版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/kai_vin/article/details/89025966
如果你喜欢这系列的文章,欢迎star
我的项目,源码地址,点击这里
cross-env
yarn add cross-env -D
cross-env
能够跨平台的设置及使用环境变量,修改package.json
文件的命令:
"dev": "cross-env NODE_ENV=development webpack --config webpack.dev.conf.js",
"start": "webpack-dev-server --config webpack.dev.conf.js --color --progress",
"test": "cross-env NODE_ENV=production webpack --config webpack.test.conf.js",
"build": "cross-env NODE_ENV=production webpack --config webpack.prod.conf.js"
这里测试环境的变量名也暂时设置成production
,后期在整合配置文件时,会再做修改。
friendly-errors-webpack-plugin node-notifier
终端在运行webpack
命令时会输出很多信息,让人看着不太舒服~ 那就需要使用这个插件来解决这个问题:
yarn add friendly-errors-webpack-plugin node-notifier -D
修改webpack.dev.conf.js
配置文件:
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');
const notifier = require('node-notifier');
// 友好的终端错误显示方式
new FriendlyErrorsPlugin({
// 运行成功
compilationSuccessInfo:{
message:[`你的应用程序在这里运行:http://${ip}:${this.port}`],
// notes:['有些附加说明要在成功编辑时显示']
},
// 运行错误
onErrors:function(severity,errors){
// 可以收听插件转换和优先级的错误
// 严重性可以是'错误'或'警告'
if (severity !== 'error') {
return;
}
const error = errors[0];
notifier.notify({
title: "Webpack error",
message: severity + ': ' + error.name,
subtitle: error.file || '',
// icon: ICON
});
},
//是否每次编译之间清除控制台
//默认为true
clearConsole:true,
}),
webpack-bundle-analyzer
可视化视图查看器,可以清楚的看到webpack
打包后所有组件与组件的依赖关系,以及打包压缩后各文件的大小,还支持缩小捆绑,以及支持查看gzip的大小
yarn add webpack-bundle-analyzer -D
该插件具体参数如下:
new BundleAnalyzerPlugin({
// 可以是`server`,`static`或`disabled`。
// 在`server`模式下,分析器将启动HTTP服务器来显示软件包报告。
// 在“静态”模式下,会生成带有报告的单个HTML文件。
// 在`disabled`模式下,你可以使用这个插件来将`generateStatsFile`设置为`true`来生成Webpack Stats JSON文件。
analyzerMode: 'server',
// 将在“服务器”模式下使用的主机启动HTTP服务器。
analyzerHost: '127.0.0.1',
// 将在“服务器”模式下使用的端口启动HTTP服务器。
analyzerPort: 8888,
// 路径捆绑,将在`static`模式下生成的报告文件。
// 相对于捆绑输出目录。
reportFilename: 'report.html',
// 模块大小默认显示在报告中。
// 应该是`stat`,`parsed`或者`gzip`中的一个。
// 有关更多信息,请参见“定义”一节。
defaultSizes: 'parsed',
// 在默认浏览器中自动打开报告
openAnalyzer: true,
// 如果为true,则Webpack Stats JSON文件将在bundle输出目录中生成
generateStatsFile: false,
// 如果`generateStatsFile`为`true`,将会生成Webpack Stats JSON文件的名字。
// 相对于捆绑输出目录。
statsFilename: 'stats.json',
// stats.toJson()方法的选项。
// 例如,您可以使用`source:false`选项排除统计文件中模块的来源。
// 在这里查看更多选项:https: //github.com/webpack/webpack/blob/webpack-1/lib/Stats.js#L21
statsOptions: null,
logLevel: 'info' 日志级别。可以是'信息','警告','错误'或'沉默'。
})
该插件在任何环境都可以用,这里主要看打包成生产环境后,知道各文件的依赖关系,以及文件大小,所以暂时只修改webpack.prod.conf.js
:
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
// 在 plugin 中添加以下代码:
new BundleAnalyzerPlugin({
analyzerMode: 'static',
// 是否在默认浏览器中自动打开报告
openAnalyzer: false,
// 将在“服务器”模式下使用的端口启动HTTP服务器。
analyzerPort: 9528,
reportFilename: 'static/report.html',
})
这里我选择了静态模式下,将生成的报告文件输出到static
文件夹下,在执行过yarn build
后,可以打开dist
文件夹看到生成的该文件,直接打开就可以看本项目的各文件的大小了;
当然,也可以选择服务器模式,将static
改为server
即可,再次执行yarn build
,这时要想看,需要开启本地服务支持(iis或者其他),使用这里设置的端口号就可以看到了
测试环境webpack.test.conf.js
也可以添加该插件配置。