Webpack 高级配置

Webpack 高级配置

1.区分配置文件打包

• 根据开发环境(development)和生产环境(production)进行数据的打包
• 抽取出三个配置文件
  webpack.config.js 公共配置的目录
  webpack.dev.js 开发环境需要使用到的配置
  webpack.prod.js 生产环境需要使用到的配置
• 需要使用到的插件wepack-merge
npm i webpack-merge -D
• 在package.json中使用--config配置使用的打包配置文件

  "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "webpack --config ./webpack.prod.js",
     "serve": "webpack-dev-server --config ./webpack.dev.js"
   }
  

• webpack-meger的使用 webpack.dev.js的内容

  const merge = require("webpack-merge")
  const webapckBase = require("./webpack.config.js")
  
  module.exports = merge(webapckBase, {
      // 用于设置文件的导出方式 主要是判断是否压缩代码
      // development 开发环境
      // production  项目部署的生产环境  默认为生产环境
      mode: "development",
      // webpack-dev-server 的基本配置
      devServer: {
          open: true, // 自动打开浏览器
          port: 9527, // 设置运行的端口
          hot: true, // 设置热编译 简单来说就是每次编译的时候, 会编译改变的文件
          compress: true, // 打包的文件进行压缩
          contentBase: "./public" // 配置默认的入口文件  默认的是 / 项目根目录
      },
      devtool: "cheap-module-eval-source-map"
  })
  

• webpack.pord.js 可以配置之后线上项目的优化代码

  const merge = require("webpack-merge")
  const webapckBase = require("./webpack.config.js")
  
  module.exports = merge(webapckBase, {
      // 用于设置文件的导出方式 主要是判断是否压缩代码
      // development 开发环境
      // production  项目部署的生产环境  默认为生产环境
      mode: "production"
  })
  

2. 配置不同的环境变量

• 根据不同的环境配置不同的请求接口
• 比如 在development开发环境中使用的地址是http://192.168.10.123在production生产环境中使用的是http://baidu.com
• 使用的是webpack内置的插件webpack.DefinePlugin

  const merge = require("webpack-merge")
  const webapckBase = require("./webpack.config.js")
  const webpack = require("webpack")
  
  module.exports = merge (webapckBase , {
  	plugins: [
  		new webpack.DefinePlugin({
  			// 生产环境中的配置
  			IS_DEV: "true"，
  			// 开发环境中的配置
  			IS_DEV: "false"
  		})
  	]
  })
  

• 使用 这里分开存放了 使用了一个单独的文件API_config.js
API_config.js 文件

  // API_config.js 文件
  // 用来配置公共的请求接口
  let baseURL = ""
  // 当 IS_DEV 存在的时候说明当前的环境是开发环境
  if (IS_DEV) {
      baseURL = "http://192.168.10.123/api/v1"
  }
  // 当 IS_DEV 不存在的时候 说明当前的环境是线上的生产环境
  else if (!IS_DEV) {
      baseURL = "http://baidu.com/api/v2"
  }
  
  export default baseURL