1、resolve规则（查找文件的规则）
resolve: { extensions: ['.js', '.json', '.css', '.less', '.scss'], // 表示会依次按顺序进行匹配寻找文件 alias: { bootstrap: path.join( __dirname, '/node_modules/bootstrap/dist/css/bootstrap.css' ), // 表示当引入bootstrap的时候默认引入该css文件 }, modules: ['node_modules', 'my_modules'], // 相当于指定查找文件的目标，添加my_modules进入查找目录 mainFields: ['browser', 'module', 'main'], // 寻找指定文件夹下的package.json里的字段，默认是main字段，相当于入口字段 mainFiles: ['main.js', 'index.js'], // 指定查找的文件名，默认是index.js },
注意：resolveLoader是加载plugin的一个机制，配置和resolve是一样的
2、noParse
noParse字段，可以用于配置哪些模块文件的内容不需要进行解析, 这样可以提高性能，相当于不用生成ast树，进行依赖解析
module.exports = { .... module:｛ noParse: /jquery|lodash/, noParse(content){ return /jquery|lodash/.test(content) } ｝ .... }
注意：这个配置是写在module里面
3、DefinePlugin
DefinePlugin创建一些在编译时可以配置的全局变量
plugins: [ ... new webpack.DefinePlugin({ PRODUCTION: JSON.stringify(true), VERSION: '1', EXPRESSION: '1+2', COPYRIGHT: { AUTHOR: JSON.stringify('bill'), }, }), ],
调用
console.log(PRODUCTION)
console.log(VERSION)
console.log(EXPRESSION)
console.log(COPYRIGHT)
注意：通过这个配置，可以做一些区分，比如生产环境还是开发环境以及其他配置
4、区分环境变量
在项目打包编译的时候，因为不同的环境需要不同的配置，这个时候通常有两种做法：
做法一：配置不同的配置文件，把development和production区别开，然后通过 webpack.merge进行拼装，具体做法见webpack学习小结
做法二：通过不同的传参来实现不同的配置
package.json中的配置
同是更改webpack.config.js原本导出的是一个json，改成一个function
module.exports = (env, argv) => ({
//这里会把所有package.json中 --变量名=值全部存入argv中，可以从argv中获取 ， 而env 是接收--env=***的值
mode: env,
...
})
5、ignorePlugin
这是webpack内置插件,作用是：忽略第三方包指定目录，让这些指定目录不要被打包进去。
举例：
moment包： 比如我们要使用moment这个第三方依赖库，该库主要是对时间进行格式化，并且支持多个国家语言。
import moment from 'moment' //设置语言 moment.locale('zh-cn'); let r = moment().endOf('day').fromNow(); console.log(r);
注意： 虽然我设置了语言为中文，但是在打包的时候，是会将所有语言都打包进去的。这样就导致包很大，打包速度又慢
let Webpack = require('webpack');
plugins:[
new Webpack.IgnorePlugin(/\.\/locale/,/moment/),//moment这个库中，如果引用了./locale/目录的内容，就忽略掉，不会打包进去
]
注意：我们虽然按照上面的方法忽略了包含’./locale/'该字段路径的文件目录,但是也使得我们使用的时候不能显示中文语言了，所以这个时候可以手动引入中文语言的目录
import moment from 'moment' //设置语言 //手动引入所需要的语言包 import 'moment/locale/zh-cn'; moment.locale('zh-cn'); let r = moment().endOf('day').fromNow(); console.log(r);
这样就OK了。既能够显示中文，又把不必要的语言包都忽略打包了
6、对图片进行优化压缩
需要用到的依赖
npm i image-webpack-loader -D
通常来讲使用的时候与url-loader一起使用，先进行image-webpack-loader进行对图片压缩然后再使用url-loader进行处理
{ test: /\.(jpg|png|svg|jpeg|gif)$/, use: [ { loader: 'url-loader', options: { // 表示当文件大小超过 30k的时候，那么就会把图片编译成base64格式的，url-loader内置file-loader limit: 2 * 1024, esModule: false, name: '[name].[hash].[ext]', // 表示输入的文件名 outputPath: 'images', // 输出的文件所在的文件夹的名称 publicPath: '/images', // 会对publicPath进行覆盖，在url引用的时候，把原有的前缀进行替换，如果不配置，系统会默认替换 }, }, { loader: 'image-webpack-loader', options: { mozjpeg: { progressive: true, }, optipng: { enabled: false, }, pngquant: { quality: [0.65, 0.9], speed: 4, }, gifsicle: { interlaced: false, }, // the webp option will enable WEBP webp: { quality: 75, }, }, }, ], }
7、日志的优化
日志太多太少都不美观
可以修改stats
举例
stats: 'errors-only'
可以使用插件 npm i friendly-errors-webpack-plugin -D
stats: { preset: 'minimal', moduleTrace: true, errorDetails: true, }, plugins: [ new FriendlyErrorsWebpackPlugin(), ... ]
具体配置祥见webpack官网
8、费时分析
安装依赖
npm i speed-measure-webpack-plugin -D
使用
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const smp = new SpeedMeasurePlugin();
const webpackConfig = smp.wrap({
plugins: [
new MyPlugin(),
new MyOtherPlugin()
]
});
9、项目打包分析
使用插件 webpack-bundle-analyzer
安装
npm i webpack-bundle-analyzer -D
使用
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
plugins: [
...
new BundleAnalyzerPlugin(),
...
]
配置分析，但是不自动打开浏览器
new BundleAnalyzerPlugin({ analyzerMode: 'disabled', // 不启动展示打包报告的http服务器 generateStatsFile: true, // 是否生成stats.json文件 }),
package.json中的命令配置
