# 前言
不知不觉,webpack现在已经更新到3.8了,新版本增加了几种新功能,打包速度据说也大大提升,因为之前使用和配置的webpack都是2.0以下的,所以想紧跟大部队,继续学习新版本的webpack,顺便做些笔记
---12月3号更新---
完善webpack打包配置文件,更全面,更高效
前期准备
- 1.npm install webpack -g (全局安装)
- 2.创一个文件夹, npm init 然后接着npm install webpack --save-dev (局部安装)
- 3.分别创建dist, src两个文件夹
- 4.在根目录下创建webpack.config.js
- 5.插件按需安装
# 配置webpack.config.js
const path = require('path');
const glob = require('glob');
const webpack = require('webpack');
const UglifyJs = require('uglifyjs-webpack-plugin'); // 代码压缩插件
const htmlPlugin = require('html-webpack-plugin'); // html引入文件插件
const extractTextPlugin = require('extract-text-webpack-plugin'); // 把css从js文件中分离出来插件
const PurifyCSSPlugin = require('purifycss-webpack'); // 消除没用到的css
const website = {
publicPath: "http://localhost:8081/"
}
module.exports = {
entry: {
entry:'./src/entry.js',
// entry2:'./src/entry2.js'
},
output: {
path: path.resolve(__dirname,'dist'),
filename: '[name].js', //对应entry的属性名
publicPath: website.publicPath // 改为绝对路径
},
module: {
// style-loader(处理路径),css-loader(处理标签)
rules:[
{
test: /\.css$/,
// use: ['style-loader','css-loader']
//
use: extractTextPlugin.extract({
fallback: "style-loader",
use: [{
loader: "css-loader", options: {importLoaders: 1}
},"postcss-loader"]
})
},{
test:/\.(png|jpg|gif)/,
use:[{
// url-loader主要把图片打包成base64
// 配合file-loader使用,file-loader可以解决引用路径的问题
loader:'url-loader',
options:{
limit: 5000, //小于500000就生成base64
outputPath: 'images/'
}
}]
},{
test:/\.(htm|html)$/i,
use:['html-withimg-loader']
},
{
test: /\.less$/,
// less和scss配置方法一样
use: extractTextPlugin.extract({
use: [{
loader: "css-loader"
},"postcss-loader",{
loader: "less-loader"
},],
fallback: "style-loader"
})
},{
test:/\.js$/,
use:{
loader: 'babel-loader'
},
exclude: /node_modules/
}
]
},
plugins: [
// new UglifyJs(), // 压缩代码
new htmlPlugin({
minify:{
removeAttributeQuotes: true
},
hash: true, // 哈希,不产生缓存
template: './src/index.html' // 入口文件
}),
// 把css文件从js中分离
new extractTextPlugin("css/index.css"),
new PurifyCSSPlugin({
paths: glob.sync(path.join(__dirname,"src/*.html"))
})
],// 插件
devServer: {
contentBase:path.resolve(__dirname,'dist'),
host:'localhost',
compress:true,// 是否启用服务器压缩
port:8081 // 端口
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
我比较喜欢代码+注释这种方式来记录笔记,这样看起来不会那么乏味
最后,在package.json的scripts中添加"server": "webpack-dev-server" 这个主要是可以通过npm run server方式来开启webpack提供的服务,热更新在新版本的webpack已经默认开启了
# 新增
使用css自动补全前缀插件,和babel编译插件,需要在文件根目录下,也就是和webpack.config.js同一路径下,分别创建**.postcss.config.js和.babelrc**配置文件
在**.postcss.config.js**文件中,编写
module.exports = {
plugins: [
require('autoprefixer')
]
}
1
2
3
4
5
2
3
4
5
在**.babelrc**文件中,编写
{
"presets": [
"env"
]
}
1
2
3
4
5
2
3
4
5
使用babel需要安装的插件有babel-core babel-preset-env 以后还可以使用babel-plugin-transform-runtime这个比较有用的插件
注意
在webpack配置文件里,module里面用到的loader,plugins里面用到的插件,都需要用npm安装,如果网速不给力,可以使用cnpm或者配置npm
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
1
2
2
# 本篇小结
webpack3.0往后的版本配置简洁了不少,蛮好的,这篇暂时就写这么多,有空会继续更新~