[转] webpack3最新版本配置研究(五) devtool,webpack-dev-server,CommonsChunkPlugin
2023-09-11 14:14:15 时间
devtool
devtool是webpack中config自带的属性只要使用就可以了不用安装
webpack官网的解释如下
当 webpack 打包源代码时,可能会很难追踪到错误和警告在源代码中的原始位置。例如,如果将三个源文件(a.js, b.js 和 c.js)打包到一个 bundle(bundle.js)中,而其中一个源文件包含一个错误,那么堆栈跟踪就会简单地指向到 bundle.js。这并通常没有太多帮助,因为你可能需要准确地知道错误来自于哪个源文件。为了更容易地追踪错误和警告,JavaScript 提供了 source map 功能,将编译后的代码映射回原始源代码。如果一个错误来自于 b.js,source map 就会明确的告诉你。
//webpack.config.js
//在entry上面添加一个官方推荐的devtool:对于开发环境eval-source-map - 每个模块使用 eval() 执行,并且 SourceMap 转换为 DataUrl 后添加到 eval() 中。初始化 SourceMap 时比较慢,但是会在重构建时提供很快的速度,并且生成实际的文件。行数能够正确映射,因为会映射到原始代码中。
//添加属性
module.exports = {
devtool: 'eval-source-map'
}
//注释掉压缩插件
// new webpack.optimize.UglifyJsPlugin({
// compress: {
// warnings: false,
// },
// output: {
// comments: false,
// }
// }),
//测试下报错信息,测完了删除
// index.js
consol.log('123');
然后编译一下会出现如下图
webpack-dev-server
npm install webpack-dev-server
// package.json中script添加
"devServer": "webpack-dev-server --inline",
//webpack.config.js
const devServer = require('webpack-dev-server')
//module
devServer: {
historyApiFallback:true,
inline:true,
contentBase: path.join(__dirname, "public"),
compress: true,
port: 9000
}
//plugin增加
new webpack.HotModuleReplacementPlugin()
然后运行npm run derServer可以在localhost:9000/index.html看效果,使用这个的时候不会再生成public文件夹,所有的代码都会放在内存中!
CommonsChunkPlugin
CommonsChunkPlugin是webpack中自带的插件直接使用即可
commonsChunkPlugin
//webpack.config.js
// 提供公共代码,plugins添加
// 默认会把所有入口节点的公共代码提取出来,生成一个common.js
//new webpack.optimize.CommonsChunkPlugin('common.js')
// 只提取index节点和extract节点
//new webpack.optimize.CommonsChunkPlugin('common.js',['index','extract'])
//这里我们使用
new webpack.optimize.CommonsChunkPlugin({
name: "common",
minChunks:2 // 最少两个入口文件js同时引用时打包
})
//将webpack.config.js中用来push到plugins的程序修改下,加上push('common');
const htmlArray = ['index','extract'];
htmlArray.forEach((element) => {
const chunksArray = [element];
if (element === 'index') {
chunksArray.push('entry');
}
chunksArray.push('common'); // 公共代码打出来的包也被认为是个chunks所以可以在这里push引入
const newPlugin = new HtmlWebpackPlugin({
filename: element + '.html',
template: element + '.html', // 获取最初的html末班
inject: 'body', // -
hash: true, // 在生成的文件后面增加一个hash,防止缓存
chunks: chunksArray
});
module.exports.plugins.push(newPlugin);
});
//新文件console.js
console.log('1234567');
//index.js和extract.js中增加
require('./console.js');
npm run webpack之后发现在common.js中有console.log(‘1234567’);而其他的index.js和extract.js就没有了,这样使得代码重用性更高,并且节省了文件更变时的带宽,还可以将多个地方要用的js打常用的包
相关文章
- SUSE Enterprise Server 12 SP3 64 设置防火墙开放8080端口,出现Unsafe permissions for file /etc/sysconfig/SuSEfirewall2 to be sourced
- windows server 2012 IIS配置之FTP站点
- SpringBoot配置属性之Server
- idea 配置tomcat(包含tomcat Server找不到的配置方法)
- SQL Server中的“最大并行度”的配置建议
- [AngularJS] Promises: Chain Promises - 2. Chaining multiple asynchronous (server-) calls
- nginx 配置的server_name参数(转)
- SQL Server 2012 AlwaysOn高可用性组部署总结及截图下载 - 曾垂鑫的技术专栏 - 51CTO技术博客
- eclipse3.4配置的tomcat server如何部署以前的web项目?
- nginx 配置的server_name参数(转)
- nfs server的配置 Starting NFS daemon: [FAILED]
- CM:How is the version of word installed in client returned to Application server
- 在与 SQL Server 建立连接时出现与网络相关的或特定于实例的错误
- Team Foundation Server 安装配置教程
- Sql_Server中如何判断表中某列是否存在
- atitit.Windows Server 2003 2008 2012系统的新特性 attilax 总结
- 即时通讯工具:Output Messenger Server
- SQL Server CLR全功略之一---CLR介绍和配置
- C# 连接SQL Server数据库的几种方式--server+data source等方式
- solr 3.5 配置及server设置
- Ubuntu挂载nfs文件系统报错:mount.nfs: access denied by server while mounting 198.168.1.x:/mnt/nfs
- Kubernetes 高可用API Server