webpack4学习笔记(七)
Eslint的配置
为了遵循代码规范，使用eslint是必不可少的，配置eslint有两种方式
第一：使用eslintrc.js配置文件
// 安装
npm install eslint --save
// 生成文件
npx eslint --init
// 安装 'babel-eslint',并在eslintrc.js中配置
"parser": 'babel-eslint',
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
第二：通过eslint-loader的配置
// 安装
npm install eslint-loader --save-dev
// module中配置
{
test: /\.js$/,
exclude: /node_modules/,
use: ['babel-loader', {
loader: 'eslint-loader',
options: {
fix: true // 较为简单的错误可以自动帮助修复
}
}
// devserver中配置
overlay: true, // eslint报错时会在屏幕提示
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
为了提升团队的代码规范，也可以通过git的钩子，在代码提交时就对代码作出eslint检查
webpack优化性能
一：提升webpack打包速度
- 1.跟上技术的迭代更新
- 2.尽可能少的模块使用loader
- 3.plugin尽可能精简并保证可靠
例如尽可能使用官方的插件，并在合适的环境下使用对象的插件 - 4.resolve参数合理配置
当通过import child from './child/child'形式引入文件时，会先去寻找.js为后缀当文件，再去寻找.jsx为后缀的文件
resolve: {
extensions: ['.js', '.jsx']，
mainFiles: ['index', 'child']， // 如果是直接引用一个文件夹，那么回去直接找index开头的文件，如果不存在再去找child开头的文件
alias: {
roshomon: path.resolve(__dirname, '../src/child'); // 别名替换，引入roshomon其实是引入../src/child
}
}
1
2
3
4
5
6
7
2
3
4
5
6
7
- 5.使用DellPlugin提高打包速度
对于第三方库，只打包分析一次，后面的每次打包都不会重复打包第三方库
webpack.dll.js
const path = require('path');
const webpack = require('webpack');
module.exports = {
mode: 'production',
entry: {
vendors: ['lodash'],
react: ['react', 'react-dom'],
jquery: ['jquery']
},
output: {
filename: '[name].dll.js',
path: path.resolve(__dirname, '../dll'),
library: '[name]'
},
plugins: [
new webpack.DllPlugin({ // 使用该插件分析第三方库，并把库里面的映射关系放到[name].manifest.json里，并放在dll文件里
name: '[name]',
path: path.resolve(__dirname, '../dll/[name].manifest.json'),
})
]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
webpack.common.js
// 引用
const AddAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin');
// plugins配置
....
const plugins = [
new HtmlWebpackPlugin({
template: 'src/index.html'
}),
new CleanWebpackPlugin(['dist'], {
root: path.resolve(__dirname, '../')
})
];
const files = fs.readdirSync(path.resolve(__dirname, '../dll'));
files.forEach(file => {
if(/.*\.dll.js/.test(file)) {
plugins.push(new AddAssetHtmlWebpackPlugin({ // 将dll.js文件自动引入html
filepath: path.resolve(__dirname, '../dll', file)
}))
}
if(/.*\.manifest.json/.test(file)) {
plugins.push(new webpack.DllReferencePlugin({ // 当打包第三方库时，会去manifest.json文件中寻找映射关系，如果找到了那么就直接从全局变量(即打包文件)中拿过来用就行，不用再进行第三方库的分析，以此优化打包速度
manifest: path.resolve(__dirname, '../dll', file)
}))
}
})
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
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
package.json
"build:dll": "webpack --config ./build/webpack.dll.js"
1
- 6.控制包文件大小
可以通过treeShaking或者拆分文件来优化打包速度 - 7.thread-loader, parallel-webpack,happywebpack多进程打包
- 8.合理使用sourceMap
- 9.结合stats分析打包结果
通过命令生成一个关于打包情况的stats文件，并借助工具进行打包情况分析，通过分析打包的流程对相应内容进行优化 - 10.开发环境内存编译
- 11.开发环境无用插件剔除
webpack多页面打包配置
在entry中配置多入口，并在plugins中配置多个HtmlWebpackPlugin
// config配置
const configs = {
entry: {
index: './src/index.js',
list: './src/list.js',
detail: './src/detail.js',
},
......其他配置
}
// 根据配置自动生成HtmlWebpackPlugin
Object.keys(configs.entry).forEach(item => {
plugins.push(
new HtmlWebpackPlugin({
template: 'src/index.html',
filename: `${item}.html`,
chunks: ['runtime', 'vendors', item] // 只引入需要的打包生成文件，不需要引入其他多余的文件
})
)
});
configs.plugins = makePlugins(configs);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20