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中的命令配置