webpack配置分离

webpack 安装合并插件 用于合并配置

npm install webpack-merge --save-dev

把 webpack.config 配置文件分为三个文件 分别是

• base.config.js - 基本的/公共的配置
• dev.config.js - 开发环境下的配置
• prod.config.js - 线上环境的配置

base.config.js

const path = require('path')
const webpack = require('webpack')
const htmlWebpackPlugin = require('html-webpack-plugin')
const uglifyjs = require('uglifyjs-webpack-plugin')

module.exports = {
  entry: './src/main.js', /*打包入口*/
  output: { /*打包出口*/
    path: path.resolve(__dirname, '../dist'), /*动态获取路径*/
    filename: 'base.js'
  },
  module: {
    rules: [
      {
        /*匹配所有的css文件*/
        test: /\.css$/,
        /*此处版本css-loader@2.0.2.*/
        /*css-loader 只负责加载*/
        /*style-loader 负责解析  要写在前面*/
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015'],
            // plugins: [require('@babel/plugin-transform-object-rest-spread')]
          }
        }
      },
      {
        test: /\.vue$/,
        use: ['vue-loader']
      }
    ]
  },
  resolve: {
    // extensions: ['.js', 'css', '.vue'],
    // alias 别名
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  plugins: [
    /*添加版权  --自带*/
    new webpack.BannerPlugin('最终版权归Lang所有！'),
    /*打包html npm install html-webpack-plugin --save-dev*/
    new htmlWebpackPlugin({
      template: 'index.html'
    }),
    /*js压缩插件 npm install uglifyjs-webpack-plugin@1.1.1 --save-dev
    */
    // new uglifyjs()

  ],
  // /*本地服务配置*/
  // devServer: {
  //   /*为哪个文件夹服务*/
  //   contentBase: './dist',
  //   //是否实时监听
  //   inline: true,
  //   // 端口号
  //   port: 8082
  //   /*webpack-dev-server*/
  // }
}

dev.config.js

const webpackMerge = require('webpack-merge')
const baseConfig = require('./base.config')

module.exports = webpackMerge(baseConfig, {/*本地服务配置*/
  devServer: {
    /*为哪个文件夹服务*/
    contentBase: './dist',
    //是否实时监听
    inline: true,
    // 端口号
    port: 8082
    /*webpack-dev-server*/
  }
})

pro.config.js

const uglifyjs = require('uglifyjs-webpack-plugin')
const webpackMerge = require('webpack-merge')
const baseConfig = require('./base.config')

module.exports = webpackMerge(baseConfig, {
  plugins: [
    /*js压缩插件 npm install uglifyjs-webpack-plugin@1.1.1 --save-dev
    */
    new uglifyjs()

  ]
})