webpack系统学习（四）不同开发环境的打包配置

为什么需要多种开发环境的打包配置呢？
在项目的不同开发阶段，我们需要的打包文件也具有不同的要求。
当我们在development模式（开发者模式）时，打包的文件可以具有全面的source-map以便于我们快速定位bug，并且不需要进行代码压缩，我们需要的是尽可能多的代码信息；而在production模式，source-map就不是十分重要，但是代码文件应该尽量的小……
所以，我们需要多个打包配置。

webpack.dev.js

//CommonJs的写法
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const webpack = require('webpack')

module.exports = {
  mode: 'development',
  devtool: 'cheap-module-eval-source-map',
  devServer: {
    contentBase: path.resolve(__dirname,'dist'),
    open: true,
    port: 8090,
    hot:true
  },
  entry: {
    main: './src/js/index.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/html/index.html'
    }),new CleanWebpackPlugin(['dist']),
    new webpack.HotModuleReplacementPlugin()
  ],
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: [['@babel/preset-env',{
              useBuiltIns: 'usage'
            }]]
          }
        }
      },{
        test:/\.(png|jpg|gif)$/,
        use:{
          loader: 'url-loader',
          options: {
            name: '[name].[ext]',//placeholder占位符
            outputPath:'image/',
            limit: 2048 //2kb
          }
        }
      },{
        test:/\.css$/,
        use:[
          'style-loader',
          'css-loader'
        ]
      },{
        test:/\.scss$/,
        use:[
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders:2, //importLoaders 选项允许你配置在 css-loader 之前有多少 loader 应用于@imported 资源。
              modules: true
            }
          },
          'sass-loader',
          'postcss-loader'
        ]
      }]
  },
  optimization: {
    usedExports: true
  },
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname,'dist')
  },

}

webpack.prod.js

//CommonJs的写法
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const webpack = require('webpack')

module.exports = {
  mode: 'production',
  devtool: 'cheap-module-source-map',
  entry: {
    main: './src/js/index.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/html/index.html'
    }),new CleanWebpackPlugin(['dist'])
  ],
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: [['@babel/preset-env',{
              useBuiltIns: 'usage'
            }]]
          }
        }
      },{
        test:/\.(png|jpg|gif)$/,
        use:{
          loader: 'url-loader',
          options: {
            name: '[name].[ext]',//placeholder占位符
            outputPath:'image/',
            limit: 2048 //2kb
          }
        }
      },{
        test:/\.css$/,
        use:[
          'style-loader',
          'css-loader'
        ]
      },{
        test:/\.scss$/,
        use:[
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders:2, //importLoaders 选项允许你配置在 css-loader 之前有多少 loader 应用于@imported 资源。
              modules: true
            }
          },
          'sass-loader',
          'postcss-loader'
        ]
      }]
  },
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname,'dist')
  },

}

package.json:

...
  "scripts": {
    "dev-build": "webpack --config ./build/webpack.dev.js",
    "dev": "webpack-dev-server --config ./build/webpack.dev.js",
    "build": "webpack --config ./build/webpack.prod.js"
  }
...

经过这样修改之后，我们就可以通过不同的指令快速使用与当前环境相应的打包配置了，但是，还存在不足的地方就是，这两个配置文件具有相当多的重复部分，我们还可以把相同部分抽取出来放到一个文件中：
webpack.common.js:

//CommonJs的写法
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')

module.exports = {
  entry: {
   main: './src/js/index.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/html/index.html'
    }),new CleanWebpackPlugin(['dist']),
  ],
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: [['@babel/preset-env',{
              useBuiltIns: 'usage'
            }]]
          }
        }
      },{
      test:/\.(png|jpg|gif)$/,
      use:{
        loader: 'url-loader',
        options: {
          name: '[name].[ext]',//placeholder占位符
          outputPath:'image/',
          limit: 2048 //2kb
        }
      }
    },{
      test:/\.css$/,
      use:[
        'style-loader',
        'css-loader'
      ]
    },{
      test:/\.scss$/,
      use:[
        'style-loader',
        {
          loader: 'css-loader',
          options: {
            importLoaders:2, //importLoaders 选项允许你配置在 css-loader 之前有多少 loader 应用于@imported 资源。
            modules: true
          }
        },
        'sass-loader',
        'postcss-loader'
      ]
    }]
  },
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname,'dist')
  },

}

webpack.dev.js:

//CommonJs的写法
const path = require('path')
const webpack = require('webpack')
const merge = require('webpack-merge');
const commonConfig = require('./webpack.common')

const devConfig = {
  mode: 'development',
  devtool: 'cheap-module-eval-source-map',
  devServer: {
    contentBase: path.resolve(__dirname,'dist'),
    open: true,
    port: 8090,
    hot:true
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ],
  optimization: {
    usedExports: true
  }
}

module.exports = merge(commonConfig,devConfig)

webpack.prod.js:

//CommonJs的写法
const merge = require('webpack-merge');
const commonConfig = require('./webpack.common')

const prodConfig = {
  mode: 'production',
  devtool: 'cheap-module-source-map'
}

module.exports = merge(commonConfig,prodConfig)