Vuejs学习笔记(三)-8.webpack中webpack.config.js中生产环境，开发环境配置文件分离

需求：目前webpack.config.js文件中即有开发环境的配置信息，又有测试环境的配置信息，比如：丑化插件希望生产环境配置，开发环境不希望配置，使用起来不太方便。

因此需要对webpack.config.js文件进行抽离。

安装插件：npm install webpack-merge@4.1.5 --save-dev

需要合并的js需要导入该组件 const webpackMerge = require('webpack-merge'),

1.新建base.config.js,开发和生产环境都需要的配置信息

const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, '../dist'),
    filename: 'bundle.js',
    // publicPath: 'dist/'
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.less$/i,
        loader: [
          "style-loader",
          "css-loader",
          "less-loader"
        ]
      },
      {
        test: /\.(png|jpg|jpeg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              //加载图片小于limit时，会将图片编辑成base64字符串形式
              // 加载图片大于limit时，需要使用file-loader模块进行加载
              limit: 81920,
              name: 'img/[name].[hash:8].[ext]'
            }
          }
        ]
      },
      {
        test: /\.js$/i,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
        }
      },
      {
        test:/\.vue$/i,
        use:['vue-loader']
      }
    ]
  },
  resolve:{
    alias:{
      'vue$':'vue/dist/vue.esm.js'
    },
    extensions:['.js','.css','.less','.vue']
  },
  plugins:[
    new webpack.BannerPlugin('最终版权归invoker所有'),
    new HtmlWebpackPlugin({
          template:'index.html'
        }
    ),
  ],
}

 

2.新建prod.config.js

const uglifyJsPlugin = require('uglifyjs-webpack-plugin')
const webpackMerge = require('webpack-merge')
const baseConfig = require('./base.config.js')
module.exports = webpackMerge(baseConfig, {
  plugins: [
    new uglifyJsPlugin()
  ]
})

 

 

3.新建dev.config.js

const webpackMerge = require('webpack-merge')
const baseConfig = require('./base.config.js')
module.exports = webpackMerge(baseConfig, {
  devServer: {
    // contentBase当前服务的文件夹
    contentBase: './dist',
    // inline表示是否需要实时监听
    inline: true,
    // 当前端口，默认是8080
    // port:8080
  }
})

 

4.webpack.config.js文件删除

 

5.package.json文件需要重新配置

 

 6.执行开发环境：npm run dev

7.执行生产环境： npm run build