webpack 注意点:
1.起步:
- webpack配置文件自定义位置时: npm run start – “start”: “webpack –config ./deploy/webpack.prod.conf.js”
- 在dist/index.html中引入js:
1
2
3
4
5
6
7
8dist/index.html
<script src="./bundle.js"></script>
deploy/webpack.prod.config.js
output: {
filename: 'bundle.js' -- 就是dist/index.html引入的js名称
path: path.resolve(__dirname, '../dist') -- !!注意输入路径
}
2.管理资源
- 比如管理css资源,需要加载相应的css loader
1
npm install --save-dev style-loader css-loader
webpack配置文件中如何使用css loader:1
2
3
4
5
6
7
8
9
10
11
12// deploy/webpack.prod.conf.js
module = {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
业务中如何引入css:1
2// dist/bundle.js
import './css/style.css'; -- 直接引入,之后会被css loader解析,作为<style>插入到引入该js文件的html文件的<header>
具体见 资源管理.html / webpack.prod.config_css.js。 其他的资源管理,比如image / data file / …一样的逻辑,只是loader换一下
3.输出管理
1 | // 多入口配置及使用HtmlWebpackPlugin |
4.Tree Shaking
为了学会使用 tree shaking,你必须……
- 使用 ES2015 模块语法(即 import 和 export)。
- 在项目 package.json 文件中,添加一个 “sideEffects” 入口。!!!
- 引入一个能够删除未引用代码(dead code)的压缩工具(minifier)(例如 UglifyJSPlugin)。 或者在webppack4.0以上直接设置mode: ‘prodution’就会自动调用UglifyJSPlugin压缩代码
5.生产环境构建
- webpack-merge的使用
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// webpack.base.js
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
app: './src/index.js'
},
plugins: [
new CleanWebpackPlugin(['dist']),
/**相对路径的时候,一定要设置root
new CleanWebpackPlugin([
'dist/*'
],{
root: path.resolve(__dirname, '../../'),
verbose: true,
dry: false
}),
*/
new HtmlWebpackPlugin({
title: 'Production'
})
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
webpack.dev.js
module.exports = merge(common, {
devtool: 'inline-source-map', //建议可以使用cheap-module-eval-source-map
devServer: {
contentBase: './dist'
}
});
webpack.prod.js
module.exports = merge(common, {
devtool: 'source-map',
plugins: [
new UglifyJSPlugin({
sourceMap: true
}),
// 构建的时候制定环境
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
})
]
});package.json
1
2"start": "webpack-dev-server --open --config webpack.dev.js",
"build": "webpack --config webpack.prod.js"使用 ExtractTextPlugin 进行split css
6.code splitting – 代码分离:主要目的是分离出公共的代码,不重复加载
- 使用CommonsChunkPlugin自动提取功能的代码模块
1
2
3
4// webpack.config.js
new webpack.optimize.CommonsChunkPlugin({
name: 'common' // 指定公共 bundle 的名称。
})
7.动态导入(dynamic imports) 和 懒加载
- 在业务js代码中动态地import
8.缓存
浏览器有缓存,在生产环境上线新代码的情况避免走缓存,需要通过hash来来避免缓存,因此可以使用chunkhash
1
2
3
4
5// webpack.config.js
output: {
filename: '[name].[chunkhash].js', // chunkhash,当文件内容变更时,hash值就会发生变化
path: path.resolve(__dirname, 'dist')
}使用HashedModuleIdsPlugin,修复改一个文件全部文件的hash值全部改变的bug
1
2
3
4// webpack.config.js
plugins: {
new webpack.HashedModuleIdsPlugin()
}
注:dllPlugin的使用,对不频繁改动的代码进行单独编译,用于打包出一个个动态连接库,目的是提高 构建 时的速度
9. 注意点:
- 可以使用resolve.extensions自动解析扩展,使用resolve.alias自定义别名
1
2
3
4
5
6
7webpack.config.js
resolve: {
extensions: ['.js', '.json']
alias: {
'@': path.resolve(__dirname, '../../src')
}
}
10. 完整工程示例:
1 | // webpack.conf.base.js |
1 | // webpack.conf.dev.js |
1 | // webpack.conf.prod.js |
1 | // package.json |