webpack系列

1.全局安装webpack后，执行webpack提示安装webpack-cli

在webpack 3版本，webpack本身和它的CLI以前都是在同一个包中，但在第4版中，他们已经将两者分开来更好地管理它们。需要再全局安装webpack-cli

npm i webpack-cli -g

2.webpack常用命令

• webpack – 开发环境构建
• webpack -p – 生产环境构建(压缩混淆脚本)
• webpack --watch 监听变动并自动打包
• webpack -d – 生成 map 映射文件
• webpack --colors – 构建过程带颜色输出

有时可能需要再package.json中自定义一个脚本

// package.json
{
  // ...
  "scripts": {
    "dev": "webpack-dev-server --devtool eval --progress --colors",
    "deploy": "NODE_ENV=production webpack -p"
  },
  // ...
}

3.webpack4 mode开发环境配置
webpack4加了一个mode配置，mode有以下三个可选值

• development
• production
• none
  配置：
  1）直接写在webpack.config.js配置中

module.exports = {
  mode: 'production'
};

2）作为webpack执行的参数

webpack --mode=production

使用
在开发和生产版本有很多不同之处，主要可分以下几种：

• 后端接口区分线上、开发
• 编译结果不同，是否分离js、css，是否压缩等

1）区分开发和线上

{
 "scripts": {
    "dev": "webpack-dev-server --mode=development --devtool inline-source-map --hot",
    "build":"webpack --mode=production",
  },
}

2）接口前缀根据mode来区分

// 接口前缀配置
let baseUrl = "";
const env = process.env.NODE_ENV;
if(env === "production" || env === "none"){
    baseUrl= "https://www.production.com/public/"; 
}else{
    baseUrl= "https://www.development.com/public/"; 
}
export default baseUrl;

具体可参考官方文档