vue-cli中webpack配置解析

 

1. 构建工具后，如何在前端也引用到process.env.NODE_ENV或者自己定义的变量

通过webpack自带的DefinePlugin方法

 

在前端main.js入口文件打印该变量

通过这种方法，我们也可以在前端通过js判断是开发还是生产环境等

 2.对于src等图片链接，如果是以变量的形式已用，那么webpack在打包时时会出现地址错误的，并不会以相对地址的形式去查找图片

安装copy-webpack-plugin插件

这样的话，你本地的static即为你存放静态资源的地方，同时通过·`/${config.dev.assetsSubDirectory}`浏览器就能解析存于变量中的地址了

3. 对于Windows和Unix操作系统的不一样，可以采用path.posix和path.win32(只用于Windows)，以及path.sep和path.delimiter

path.posix.join('static', 'js/[name].[chunkhash].js')
//平台下的文件分隔符，win下为'\'，*nix下为'/';所以直接用path.join是不行的，因为我们有自定义路径
//对于这种的则不需要这么麻烦
path.join(__dirname, '..', dir)

//对应平台下的路径分隔符，win下为';'，*nix下为':'
所以采用path.delimiter对路径进行切割split

 4. node,npm版本检查

node的版本信息可以直接使用process.version // => 'v8.11.2'

辅助插件（semver）

semver.clean(process.version)

semver.satisfies(mod.currentVersion, mod.versionRequirement)

npm版本检查借助child_process来产生一个shell并执行命令

//cmd ‘npm --version’
function exec (cmd) {
  return require('child_process').execSync(cmd).toString().trim()
}

同时，采用插件 chalk 在控制台输出不同颜色的信息

5. 采用rimraf插件来输出static下的文件（rm -rf）,用mkdirp来创建文件夹

6.uglifyjs-webpack-plugin插件常用参数详解

output通常采用默认值，所以不用配置出来，删除所以‘console’的话会降低打包速率

7.在webpack3及以前我们都利用CommonsChunkPlugin将一些公共代码分割成一个chunk，实现单独加载。在webpack4 中CommonsChunkPlugin被废弃，使用SplitChunksPlugin