Vue学习杂记（六）——项目构建与sourceMap
- 一、项目发布
- 1.1构建生产模式
- 1.2配置clean-webpack-plugin插件
- 1.3对webpack安装的插件的管理
- 二、sourceMap的配置
一、项目发布
1.1构建生产模式
webpack打包的最后一步便是发布了，首先在package.json文件的"scripts"中添加如下脚本名称和webpack打包方式：
"build":"webpack --mode production"终端运行npm run build，这里的build的其实就是上面脚本地名称，由于这里通过--mode设置了webpack打包的参数，所以webpack会采用生产模式要求打包，也就是会对代码进行压缩。需要注意的是，这里的 --mode设置打包方式的优先级最高，会覆盖webpack.config.js里面的mode设置。打包结果如下：
当然这个打包虽然能够实现将代码全部打包到dist文件夹里面，但是里面的文件结构比较乱。一般我们希望打包后的代码目录结构更加清晰，比如希望没有被base64压缩过的图片进入images文件夹下，js能够有自己的目录，其配置方法如下：
（1）对于js文件的构建，肯定得回到最开始的webpack关于文件入口出口的配置上，修改为如下配置：
entry:path.join(__dirname,'./src/index.js'),
output:{
path:path.join(__dirname,'dist'),
filename:'js/main.js'
},（2）对于images目录的构建，同样得回到我们自定义的关于图片加载的loader，和之前limit传参一样，可以另外设置一个outputPath参数，这样不能转成base64的图片会进入到images文件目录下了：
test:/\.jpg|png|gif$/,use:['url-loader?limit=300&outputPath=images']接下来，删除dist（因为这个文件是我们通过打包生成的），重新构建时会重新生成我们想要的清晰的目录结构了。
1.2配置clean-webpack-plugin插件
有的时候我们可能存在这样的需求，我们在项目构建之后更换使用的图片，如果要避免打包之后的图片进入dist文件夹下面，我们需要手动删除dist目录再重新构建。为了省去这一步，更加方便我们构建项目，我们可以使用clean-webpack-plugin插件帮助我们删除dist文件。
安装方式如下：
npm i clean-webpack-plugin -D安装完成之后，需要在webpack的配置文件中配置如下代码：
const {CleanWebpackPlugin} = require('clean-webpack-plugin');//导入clean-webpack-plugin模块同时需要在需要使用的插件说明数组plugins中加入：
new CleanWebpackPlugin()1.3对webpack安装的插件的管理
（1）修改使用镜像，改用淘宝镜像，加速包的安装：
npm config set registry http://registry.npm.taobao.org（2）一键更新所有的插件包：
//安装更新检测插件
npm install npm-check-updates -g
//执行检测
ncu
//更新插件
ncu -u（3）删除插件包：
npm uninstall <package>
说明：经过实际测试发现，这些包的安装只能出现在一种环境中，即不能在生产环境和开发环境中同时出现。使用uninstall的时候会删除该包（不管包在哪个文件中）。
二、sourceMap的配置
首先说下souceMap的作用，建立编辑区与实际生产环境的代码行映射。可能说的有些抽象，给出如下例子：
如图所示，由于这个是生产环境压缩的代码，因此只能显示第二行报错
。但生产环境下我们需要快速debug，sourceMap能够告诉我们实际开发环境下代码在哪一行，配置方式有两种：
（1）在webpack的配置文件的module.exports中加入（推荐development下使用）：
devtool:"eval-source-map",特点：如果代码报错了，点击调试区能够获取到没有压缩的源码：
（2）在webpack的配置文件的module.exports中加入（推荐production下使用）：
devtool:"nosources-source-map",特点：能够看到开发环境对应的错误行数，但是点击之后无法查看源码：
恭喜你，如果你看到了这里，面试的时候你可以说你了解webpack了。
