前面介绍了 webpack 的一些基本常用方法，都是在本地运行。这篇文章记录下webpack 的打包过程
打包
一、配置执行命令
在package.json配置文件中
{
...
"scripts": {
// webpack serve 命令会把js代码打包在内存中
"dev": "webpack serve --open",
// webpack 通过mode参数 ，可以把代码写入硬盘中，方便我们发布
"build":"webpack --mode production"
},
}
其中 --mode 是一个参数项，用来指定webpack的运行模式。production代表生产环境，进行代码压缩和性能优化
注意：通过 --mode指定的参数项，会覆盖webpack.config.js中的mode选项
1.1 在输入目录把js 、 html、image 分开不同目录
对于js ，我们找到webpack.config.js 配置文件中的 ， output 配置
// 在filename 字段加一个目录即可
output:{
// 存放到的目录
path:path.join(__dirname,'/dist'),
// 生成的文件名
filename : 'js/bundle.js'
},
对于html文件，我们找到htmlPlugin插件
// 这个插件是把指定的html文件，编译复制到指定输入目录，方便打包发布，所以在filename 字段，添加一个目录结构即可
const htmlPlugin = new HtmlPlugin({
template:'./src/index.html',
filename:'./index.html'
})
对于image 文件，我们找到 第三方资源加载器
// 在url-loader 配置中添加一个参数 outputPath 参数即可
module:{
// 文件后缀名的匹配规则
rules:[
/**
* 参数：limit 是告诉 url-loader ，在加载图片的时候， 如果图片的大小小于或等于给定值的时候，
* 才会把图片转换成base64；如果图片大小大于给定值，则不会转换成base64，而是直接用地址访问
* 再配置url-loader的时候，多个参数之间使用 & 符号分割
*/
{test:/\.jpg|png|gif$/,use:['url-loader?limit=22229&outputPath=images']},
]
}
2 、自动清理编译包
安装clean-webpack-plugin 插件
(可以去npm-js 网站搜索这个插件的用法)
npm install --save-dev clean-webpack-plugin
使用
// 引用库
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const webpackConfig = {
plugins: [
new CleanWebpackPlugin(),
],
};
//
module.exports = webpackConfig;
二、SourceMap
SourceMap 就是源码定位，webpack在编译js时，会混淆js，导致在开发的时候，不容易定位到具体源码错误位置，这个时候就需要使用sourcemap 来锁定源码的位置
配置：在webpack.config.js 文件中
如果不加插件，报错如下：
image.png
源码映射：会单独生成一个sourcemap文件，出错了会标识当前报错的列和行，主要有四种形式，需要在配置文件webpack.config.js中添加配置：
方式一：定位行数，也暴漏源码
.map 文件 记录了源码信息
//1.增加映射文件，可以帮我们调试源代码
module.exports = {
devtool: "source-map",
}
image.png
执行后，行数对应的是编译后的行数，点击能定位到具体错误（编译后的代码中）
image.png
方式二：定位到准确源码行数
module.exports = {
// 在开发调试阶段，把devtool 值设置为 eval-source-map
devtool: 'eval-source-map',
}
可以看到 ， 能准确定位到源码行数
image.png
方式三：只定位行数不暴露源码
module.exports = {
// 线上环境，建议关闭source-map 或者使用这个方式
devtool: 'nosources-source-map',
}
网友评论