webpack生产环境和开发环境的配置

最近在做公司游戏预约页面的时候，在配置webpack的时候，忽略了生产模式切换，导致开发过程中有些痛苦，当改动样式或者某个插件配置时，本地server要等待编译很久才生效。用了很久的webpack做开发，之前一直没太在意，现在特地整理下，也为以后做项目更加规范吧。

在配置前，还是先了解下生产环境和开发环境有哪些区别，知道这些后，才知道我们到底要做些什么

开发环境(development)和生产环境(production)的构建目标差异很大。在开发环境中，我们需要具有强大的、具有实时重新加载(live reloading)或热模块替换(hot module replacement)能力的 source map 和 localhost server。而在生产环境中，我们的目标则转向于关注更小的 bundle，更轻量的 source map，以及更优化的资源，以改善加载时间。由于要遵循逻辑分离，我们通常建议为每个环境编写彼此独立的 webpack 配置

虽然，以上我们将生产环境和开发环境做了略微区分，但是，请注意，我们还是会遵循不重复原则(Don't repeat yourself - DRY)，保留一个“通用”配置。为了将这些配置合并在一起，我们将使用一个名为 webpack-merge 的工具。通过“通用”配置，我们不必在环境特定(environment-specific)的配置中重复代码

那么，开始配置文件的编写。这里，我们把公共的配置，放到webpack.common.js中，生产环境配置放到webpack.prod.js中，开发环境配置放到webpack.dev.js中。

公共配置（webpack.common.js）中，我们常用的插件，入口、输出文件、模块配置

 
 

   
   

    
    

   
   
   
   

    
    

     
     const path = 
     
     require(
     
     'path');
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     const CleanWebpackPlugin = 
     
     require(
     
     'clean-webpack-plugin');
    
    
   
   

   
   

    
    

   
   
   
   

    
    

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

   
   

    
    

   
   
   
   

    
    
 
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     module.exports = {
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
     
     entry: {
    
    
   
   

   
   

    
    

   
   
   
   

    
    
        
     
     app: 
     
     './src/index.js'
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         },
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
     
     plugins: [
    
    
   
   

   
   

    
    

   
   
   
   

    
    
        
     
     new CleanWebpackPlugin([
     
     'dist']),
    
    
   
   

   
   

    
    

   
   
   
   

    
    
        
     
     new HtmlWebpackPlugin({
    
    
   
   

   
   

    
    

   
   
   
   

    
    
            
     
     title: 
     
     'Production'
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
             })
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         ],
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
     
     module: {
    
    
   
   

   
   

    
    

   
   
   
   

    
    
        
     
     rules: [
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
                 {
    
    
   
   

   
   

    
    

   
   
   
   

    
    
                
     
     test: 
     
     /\.css$/,
    
    
   
   

   
   

    
    

   
   
   
   

    
    
                
     
     use: [
     
     'style-loader', 
     
     'css-loader']
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
                 }
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
             ]
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         },
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
     
     output: {
    
    
   
   

   
   

    
    

   
   
   
   

    
    
        
     
     filename: 
     
     '[name].bundle.js',
    
    
   
   

   
   

    
    

   
   
   
   

    
    
        
     
     path: path.resolve(__dirname, 
     
     'dist')
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         }
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     }
    
    
   
   
 
 

生产配置（webpack.prod.js）中配置"source-map"，生产环境下的插件，然后合并

 
 

   
   

    
    

   
   
   
   

    
    

     
     const merge = 
     
     require(
     
     'webpack-merge');
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     const webpack = 
     
     require(
     
     'webpack');
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     const UglifyJSPlugin = 
     
     require(
     
     'uglifyjs-webpack-plugin');
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     const common = 
     
     require(
     
     './webpack.common');
    
    
   
   

   
   

    
    

   
   
   
   

    
    
 
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     module.exports = merge(common, {
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
     
     devtool: 
     
     'source-map',
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
     
     plugins: [
    
    
   
   

   
   

    
    

   
   
   
   

    
    
        
     
     new UglifyJSPlugin({
    
    
   
   

   
   

    
    

   
   
   
   

    
    
            
     
     sourceMap: 
     
     true
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
             }),
    
    
   
   

   
   

    
    

   
   
   
   

    
    
        
     
     new webpack.DefinePlugin({
    
    
   
   

   
   

    
    

   
   
   
   

    
    
            
     
     'process.env.NODE_ENV': 
     
     JSON.stringify(
     
     'production')
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
             })
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         ]
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     })
    
    
   
   
 
 

注意这里使用了webpack.DefinePlugin()插件，来指定环境。这是因为，许多 library 将通过与 process.env.NODE_ENV 环境变量关联，以决定 library 中应该引用哪些内容。例如，当不处于生产环境中时，某些 library 为了使调试变得容易，可能会添加额外的日志记录(log)和测试(test)。其实，当使用 process.env.NODE_ENV === 'production' 时，一些 library 可能针对具体用户的环境进行代码优化，从而删除或添加一些重要代码

开发环境（webpack.dev.js）中配置"inline-source-map"、本地服务器，然后合并公共配置

 
 

   
   

    
    

   
   
   
   

    
    

     
     const merge = 
     
     require(
     
     'webpack-merge');
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     const common = 
     
     require(
     
     './webpack.common.js');
    
    
   
   

   
   

    
    

   
   
   
   

    
    
 
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     module.exports = merge(common, {
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
     
     devtool: 
     
     'inline-source-map',
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
     
     devServer: {
    
    
   
   

   
   

    
    

   
   
   
   

    
    
        
     
     contentBase: 
     
     './dist'
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         }
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     })
    
    
   
   
 
 

现在，我们可以在package.json中为生产和开发模式配置单独的运行脚本，