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