首页 / WEBPACK / 配置webpack4
配置webpack4
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了配置webpack4，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含6076字，纯文字阅读大概需要9分钟。
内容图文
console.log(123);
|
1
2
3
4
5
|
"scripts"
: {
"test"
:
"echo \"Error: no test specified\" && exit 1"
,
"dev"
:
"webpack --mode development"
,
// （开发模式）
"build"
:
"webpack --mode production" // （生产模式）
},
|
开发模式生成的文件不压缩
生产模式生成的文件压缩
|
1
2
3
4
5
6
7
8
9
|
const path = require(
"path"
)
module.exports = {
entry:
"./src/index.js"
,
// 入口
output: {
// 出口
filename:
"bundle.js"
,
// 生成打包文件的名字
path: path.join(__dirname,
"dist"
)
// 打包文件的路径，__dirname指当前根目录
}
}
|
此时运行npm run dev，在dist文件夹下就能看到打包生成的bundle.js文件
|
1
2
3
4
5
6
7
8
9
10
|
module.exports = {
entry: {
// 多文件入口
index:
"./src/index.js"
,
test:
"./src/test.js"
},
output: {
// 出口
filename:
"[name].bundle.js"
,
// 生成打包文件的名字 ==>注意这里，因为是多文件入口，所有需要[name]来区分文件
path: path.join(__dirname,
"dist"
)
// 打包文件的路径，__dirname指当前根目录
}
}
|
运行npm run dev
|
1
2
3
4
5
6
7
8
9
10
|
devServer: {
// 设置基本目录结构
contentBase: path.join(__dirname,
"dist"
),
// 服务器的ip地址，也可以使用localhost
host:
"localhost"
,
// 服务端压缩是否开启
compress:
true
,
// 配置服务端口号
port: 8080
}
|
修改package.json内容为
|
1
2
3
4
5
6
|
"scripts"
: {
"test"
:
"echo \"Error: no test specified\" && exit 1"
,
"serve"
:
"webpack-dev-server --mode development"
,
"dev"
:
"webpack --mode development"
,
"build"
:
"webpack --mode production"
},
|
运行npm run serve
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<!DOCTYPE html>
<html lang=
"en"
>
<head>
<meta charset=
"UTF-8"
>
<meta name=
"viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv=
"X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id=
"main"
>
hello
</div>
</body>
</html>
|
在webpack.config.js中进行配置
开头引入插件
|
1
|
const HtmlWebpackPlugin = require(
‘html-webpack-plugin‘
)
|
在plugins配置
|
1
2
3
4
5
6
7
8
|
plugins: [
new HtmlWebpackPlugin({
filename:
‘index.html‘
,
template:
‘./src/inde.html‘
,
// chunks: [‘index‘], // 多入口时需要用到
hash:
true // 插入的文件后面加一段随机数
})
],
|
运行npm run serve，浏览器中打开localhost:8080
|
1
2
3
4
5
6
7
|
#main{
height: 100px;
width: 100px;
font-size: 40px;
color: #FF6347;
}
|
需要安装css-loader，style-loader
|
1
2
3
4
5
6
7
8
9
|
module: {
rules:[
// css loader
{
test: /\.css$/,
use: [
"style-loader"
,
"css-loader"
]
// 这里顺序不能颠倒
}
]
},
|
|
1
2
3
|
new ExtractTextPlugin({
filename:
"index.css"
,
})
|
|
1
2
3
4
5
6
7
8
9
10
11
|
rules:[
// css loader
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback:
"style-loader"
,
use:
"css-loader"
})
}
]
|
|
1
2
3
4
5
|
.bg{
height: 50px;
width: 50px;
background: url(
"./img/confirm.png"
)
}
|
|
1
2
3
4
5
6
7
8
9
10
|
// 图片 loader
{
test: /\.(png|jpg|gif|jpeg)/,
use: [{
loader:
‘url-loader‘
,
options: {
limit: 500
//是把小于500B的文件打成Base64的格式，写入JS
}
}]
}
|
|
1
2
3
4
|
options: {
limit: 500,
//是把小于500B的文件打成Base64的格式，写入JS
outputPath:
‘images/‘ //打包后的图片放到images文件夹下
}
|
|
1
2
3
4
|
{
test: /\.(htm|html)$/i,
use: [
"html-withimg-loader"
]
}
|
|
1
2
3
4
5
|
// less loader
{
test: /\.less$/,
use: [
"style-loader"
,
"css-loader"
,
"less-loader"
]
}
|
|
1
2
3
4
5
6
|
@bgColor: #FFA54F;.my{
height: 100px;
width: 100px;
}
|
|
1
2
3
4
5
6
7
8
9
10
|
// less loader
{
test: /\.less$/,
use: ExtractTextPlugin.extract({
fallback:
"style-loader"
,
use: [
"css-loader"
,
"less-loader"
]
}),
}
|
|
1
2
3
4
5
|
module.exports = {
plugins: [
require(
‘autoprefixer‘
)
//自动添加前缀插件
]
}
|
|
1
2
3
4
5
6
7
8
9
|
// css loader
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback:
"style-loader"
,
use: [
"css-loader"
,
"postcss-loader"
]
})
},
|
内容总结
以上是互联网集市为您收集整理的配置webpack4全部内容，希望文章能够帮你解决配置webpack4所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。