Vue 成长之旅 | webpack打包发布

前面介绍了 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',
}