webpack 之 Development 和 Production 的区分环境的打包

（一）前置

原先是只有webpack.config.js 这一个webpack配置文件，现在根据环境拆成两个，新建webpack.dev.js 和 webpack.prod.js 分别表示开发环境和生产环境的webpack配置文件

webpack.dev.js

var webpack = require('webpack')
const htmlWebpackPlugin = require('html-webpack-plugin') // 引入插件
module.exports = {
  // css、js都是从入口文件开始 css、js都是通过import引入js
  entry: {
    index: './src/index.js'
  },
  devtool: 'inline-source-map',
  mode: 'development',
  devServer: {
    publicPath: '/',
    open: true,
    hotOnly: true, // 即使 HMR 不生效 也不要刷新浏览器页面
    hot: true, // 开启hmr
    // 端口号
    port: 8000
  },
  module: {
    rules: [{
      test: /\.js$/,
      loader: 'babel-loader',
      exclude: __dirname + 'node_modules',
      include: __dirname + 'src',
      options: {
        presets: ['env', {
          useBuiltIns: 'usage'
        }] // 版本
      }
    }, {
      test: /\.css$/,
      loader: ['style-loader', 'css-loader'] // 从右向左，先执行css-loader再style-loader
    }, {
      test: /\.less$/,
      loader: ['style-loader', {
        loader: 'css-loader',
        options: {
          modules: true
        }
      }, 'less-loader', 'postcss-loader']
    }, {
      test:/\.scss$/,
      loader: ['style-loader', 'css-loader', 'scss-loader']
    }, {
      test:/\.html$/,
      loader: ['html-loader']
    }, {
      test: /\.(png|jpg|gif|svg)$/i,
      use: {
        loader: 'file-loader',
        options: {
          name: '[name].[ext]', // 自定义打包后的图片名称
          outputPath: 'image/', // 打包后生成的图片放到dist下的image文件夹下
          limit: 2048
        }
      }
    }]
  },
  plugins: [
    new htmlWebpackPlugin({
      template: 'public/index.html',
      filename: 'index.html',
      chunks: ['index'],
      inject: 'true',
      minify: {
        removeComments: true, // 删除注释
        collapseWhitespace: true // 删除空格
      }
    }),
    new webpack.HotModuleReplacementPlugin()
  ],
  optimization: {
    usedExports: true
  }
}

而在webpack.prod.js 中，线上的就很多可以省略了，比如热更新、devServer、Tree Shaking等等的配置

webpack.prod.js：

var webpack = require('webpack')
const htmlWebpackPlugin = require('html-webpack-plugin') // 引入插件
module.exports = {
  // css、js都是从入口文件开始 css、js都是通过import引入js
  entry: {
    index: './src/index.js'
  },
  devtool: 'inline-source-map',
  mode: 'production',
  module: {
    rules: [{
      test: /\.js$/,
      loader: 'babel-loader',
      exclude: __dirname + 'node_modules',
      include: __dirname + 'src',
      options: {
        presets: ['env', {
          useBuiltIns: 'usage'
        }] // 版本
      }
    }, {
      test: /\.css$/,
      loader: ['style-loader', 'css-loader'] // 从右向左，先执行css-loader再style-loader
    }, {
      test: /\.less$/,
      loader: ['style-loader', {
        loader: 'css-loader',
        options: {
          modules: true
        }
      }, 'less-loader', 'postcss-loader']
    }, {
      test:/\.scss$/,
      loader: ['style-loader', 'css-loader', 'scss-loader']
    }, {
      test:/\.html$/,
      loader: ['html-loader']
    }, {
      test: /\.(png|jpg|gif|svg)$/i,
      use: {
        loader: 'file-loader',
        options: {
          name: '[name].[ext]', // 自定义打包后的图片名称
          outputPath: 'image/', // 打包后生成的图片放到dist下的image文件夹下
          limit: 2048
        }
      }
    }]
  },
  plugins: [
    new htmlWebpackPlugin({
      template: 'public/index.html',
      filename: 'index.html',
      chunks: ['index'],
      inject: 'true',
      minify: {
        removeComments: true, // 删除注释
        collapseWhitespace: true // 删除空格
      }
    })
  ]
}

这个时候 生产环境 和 线上环境的webpack配置文件就好了

package.json 修改：

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

生产环境：npm run dev

线上环境：npm run build (打包)

（二）抽离公共代码

现在 webpack.dev.js 和 webpack.prod.js 有一部分公共代码，现在可以对公共代码进行抽离

webpack.common.js （公共代码）

const path = require('path')
module.exports = {
  entry: {
    index: './src/index.js'
  },
  module: {
    rules: [{
      test: /\.js$/,
      loader: 'babel-loader',
      exclude: __dirname + 'node_modules',
      include: __dirname + 'src',
      options: {
        presets: ['env', {
          useBuiltIns: 'usage'
        }] // 版本
      }
    }, {
      test: /\.css$/,
      loader: ['style-loader', 'css-loader'] // 从右向左，先执行css-loader再style-loader
    }, {
      test: /\.less$/,
      loader: ['style-loader', {
        loader: 'css-loader',
        options: {
          modules: true
        }
      }, 'less-loader', 'postcss-loader']
    }, {
      test:/\.scss$/,
      loader: ['style-loader', 'css-loader', 'scss-loader']
    }, {
      test:/\.html$/,
      loader: ['html-loader']
    }, {
      test: /\.(png|jpg|gif|svg)$/i,
      use: {
        loader: 'file-loader',
        options: {
          name: '[name].[ext]', // 自定义打包后的图片名称
          outputPath: 'image/', // 打包后生成的图片放到dist下的image文件夹下
          limit: 2048
        }
      }
    }]
  },
  output: {
    filename: 'bundle.[hash].js',
    path: path.resolve(__dirname, 'dist')
  }
}

webpack.prod.js：引入公共代码文件 webpackCommon

const htmlWebpackPlugin = require('html-webpack-plugin') // 引入插件
const webpackCommon = require('./webpack.common.js')
module.exports = {
  // css、js都是从入口文件开始 css、js都是通过import引入js
  entry: webpackCommon.entry,
  devtool: 'inline-source-map',
  mode: 'production',
  module: webpackCommon.module,
  plugins: [
    new htmlWebpackPlugin({
      template: 'public/index.html',
      filename: 'index.html',
      chunks: ['index'],
      inject: 'true',
      minify: {
        removeComments: true, // 删除注释
        collapseWhitespace: true // 删除空格
      }
    })
  ],
  output: webpackCommon.output
}

webpack.dev.js：引入公共代码文件 webpackCommon

var webpack = require('webpack')
const webpackCommon = require('./webpack.common.js')
const htmlWebpackPlugin = require('html-webpack-plugin') // 引入插件
module.exports = {
  // css、js都是从入口文件开始 css、js都是通过import引入js
  entry: webpackCommon.entry,
  devtool: 'inline-source-map',
  mode: 'development',
  devServer: {
    publicPath: '/',
    open: true,
    hot: true, // 开启hmr
    // 端口号
    port: 8000
  },
  module: webpackCommon.module,
  plugins: [
    new htmlWebpackPlugin({
      template: 'public/index.html',
      filename: 'index.[hash].html',
      chunks: ['index'],
      inject: 'true',
      minify: {
        removeComments: true, // 删除注释
        collapseWhitespace: true // 删除空格
      }
    }),
    new webpack.HotModuleReplacementPlugin()
  ],
  optimization: {
    usedExports: true
  },
  output: output
}

以上就是分环境配置webpack～