webpack.config.js webpack配置

webpack.config.js 文件的分离

原因：有些配置针对开发环境，有些配置针对生产环境，所以分开配置

步骤

1.建立build文件夹，分别建立 base.config.js prod.config.js dev.config.js
2.需要安装 webpack-merge
npm install --save-dev webpack-merge
3. 在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 : path.resolve(__dirname,"./dist"),
    filename:'bundle.js',
    // publicPath:'dist/',//url中路径会自动加上dist/,
  },
  resolve: {
    alias:{
      'vue$':'vue/dist/vue.esm.js'
    },
  },
  module:{
    rules:[
      {
        test: /\.css$/,
        //css-loader将引用的css文件编译，style-loader编译的css文件加载到DOM中，但是webpack中loader是从后往前找的，所以要将css-loader写在style-loader的后面
        use: [ 'style-loader', 'css-loader' ]
      },
      {
        test: /\.(png|jpg|gif|jpeg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              //小于8192时使用url-loader,大于8192时使用file-loader
              limit: 8192,
              name:'./img/[name].[hash:8].[ext]',
            }
          }
        ]
      },
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
        }
      },
      {
        test:/\.vue$/,
        use:['vue-loader']
      }
    ]
  },
  plugins:[
    // new webpack.BannerPlugin('author:QianMing'),
    new HtmlWebpackPlugin({
      template:'./index.html'
    }),
    // new UglifyJsPlugin()
  ]
}

4.在prod.config.js里配置生产环境

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

5.在dev.config.js里配置开发环境

const baseConfig = require('./base.config')
const webpackMerge = require('webpack-merge')
module.exports = new webpackMerge(baseConfig,{
  devServer:{
    contentBase:'./dist',
    inline:true //自动更新
  }
})

6. 在package.json里指定 scripts 里 build 和 dev 所需要找的配置环境路径

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