小白学 Webpack之开发环境和生成环境分离

webpack 环境分离

配置文件,生成和开发是不同的,开发的时候可能配置比较多,生成的时候只需要一些就可以了,所以有必要对环境进行分离。

安装合并插件

npm -D i webpack-merge

路程

  • 合并公用配置
  • 设置开发和生成额外配置
  • 配置package.json

合并公用配置

base.config.js

const path = require('path');

//插件
const HtmlWebpackPlugin = require('html-webpack-plugin');

//清除目录
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports={

  plugins: [
    new HtmlWebpackPlugin({
      filename:"index.html",
      template:"./src/index.html"
    }),
    new CleanWebpackPlugin()
  ],
  entry:{
    index:"./src/js/index.js"
  },
  output: {
    filename: "js/[name].js",
    path: path.resolve(__dirname, './dist/'),
    publicPath: '',
  }

}

dev.config.js


//合并JS插件
const {merge}=require('webpack-merge');

//调用通用配置
const base=require('./base.config');

module.exports=merge(base,{
  watch:true,
  watchOptions: {
    ignored:/node_modules/,
    aggregateTimeout:300,
    poll:1000
  },
  mode:'development',
  devServer: {
    port:3000,
    stats:'minimal',
    //代理
    proxy:{
      '/api':{
        target:"https://www.heibaiketang.com",//请求目标地址
        changeOrigin:true,//改变请求源
        pathRewrite:{
          '^/api':""
        }
      }
    }
  }
})

prod.config.js

//合并JS插件
const {merge}=require('webpack-merge');

//调用通用配置
const base=require('./base.config');

module.exports=merge(base,{
  mode:"production"
})

这样简单配置就分离,现在需要改下package.json来区分开发和生成

{
  "name": "webpack3",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev":"webpack --config ./dev.config.js",
    "build":"webpack --config ./prod.config.js"
  },
    ...
}

评论区 (0)

没有记录
支持 markdown,图片截图粘贴拖拽都可以自动上传。