[译]webpack官网文档：指南 -- 9.正式产品的编译

最新推荐文章于 2025-11-24 17:58:44 发布

最新推荐文章于 2025-11-24 17:58:44 发布 · 164 阅读

文章标签：

#webpack #ViewUI

Webpack 专栏收录该内容

29 篇文章

订阅专栏

本文介绍了如何使用 Webpack 进行正式产品的编译工作，包括自动和手动配置方法。自动方式通过运行特定命令实现代码压缩、SourceMaps 生成及环境变量设定；手动方式则通过配置不同环境的 JS 文件来灵活应对多种需求。

原创翻译，转载请注明出处。

原文地址：https://webpack.js.org/guides/production-build/

这一页解释了怎样使用webpack来做正式产品编译。

自动方式

运行webpack –p（等同于：webpack --optimize-minimize --define process.env.NODE_ENV="'production'"），它会执行以下的步骤：

使用UglifyJsPlugin压缩
运行LoaderOptionsPlugin
设定节点环境变量

压缩

webpack自带UglifyJsPlugin，它运行UglifyJS来压缩输出文件。这个插件支持所有的UglifyJS选项。在命令行指定--optimize-minimize，就会添加下面的配置：

// webpack.config.js
const webpack =require('webpack');
 
module.exports ={
  /*...*/
  plugins:[
    newwebpack.optimize.UglifyJsPlugin({
      sourceMap: options.devtool &&(options.devtool.indexOf("sourcemap")>=0|| options.devtool.indexOf("source-map")>=0)
    })
  ]
};

因此依据devtool的选项，会生成Source Maps。

Source Maps

我们鼓励在产品里可用Source Maps。它在调试和基准测试的时候非常有帮助。webpack可以在包文件里或者在单独的文件里生成行内Source Maps。

在你的配置里，使用devtool对象来设定Source Map的类型。我们目前支持7种Source Maps类型。你可以在配置相关的文档里找到找到更多的相关信息。

节点环境变量

运行 webpack –p （或者--define process.env.NODE_ENV="'production'"），就会以下面的方式调用DefinePlugin：

// webpack.config.js
const webpack =require('webpack');
 
module.exports ={
  /*...*/
  plugins:[
    newwebpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production')
    })
  ]
};

DefinePlugin在原代码里执行查找-替换操作。任何被引入代码里的process.env.NODE_ENV都被替换成“production”。因此，像if (process.env.NODE_ENV !== 'production') console.log('...')的检查都会被处理为if (false) console.log('...')，最后使用UglifyJS就把它们剔除掉了。

手动方式：为webpack配置多个环境

当我们需要为不同的环境准备不同配置的话，最简单的方式就是为每一个环境写一个独立的js文件。

dev.js

module.exports =function(env){
  return{
    devtool:'cheap-module-source-map',
    output:{
        path: path.join(__dirname,'/../dist/assets'),
        filename:'[name].bundle.js',
        publicPath: publicPath,
        sourceMapFilename:'[name].map'
    },
    devServer:{
        port:7777,
        host:'localhost',
        historyApiFallback:true,
        noInfo:false,
        stats:'minimal',
        publicPath: publicPath
    }
  }
}

prod.js

module.exports =function(env){
  return{
    output:{
        path: path.join(__dirname,'/../dist/assets'),
        filename:'[name].bundle.js',
        publicPath: publicPath,
        sourceMapFilename:'[name].map'
    },
    plugins:[
        newwebpack.LoaderOptionsPlugin({
            minimize:true,
            debug:false
        }),
        newwebpack.optimize.UglifyJsPlugin({
            beautify:false,
            mangle:{
                screw_ie8:true,
                keep_fnames:true
            },
            compress:{
                screw_ie8:true
            },
            comments:false
        })
    ]
  }
}

在webpack.config.js里添加下面的代码：

functionbuildConfig(env){
  returnrequire('./config/'+ env +'.js')(env)
}
 
module.exports = buildConfig;

并且在package.json里，使用webpack来编译应用的时候，代码像这样：

"build:dev":"webpack --env=dev --progress --profile --colors",
"build:dist":"webpack --env=prod --progress --profile --colors",

你可以看到我们给webpack.config.js文件传递了一个环境变量。在webpack.config.js文件里我们使用了一个简单的开关，根据传递过来的环境变量调用正确的文件，来进行编译。

一个更好的方法是有一个基础的配置文件，把所有的共同功能都放进去，然后再配置环境特定的文件，使用’webpack-merge’就可以简单的合并它们。这样可以避免代码重复。例如，你可以把解析js，ts，png，jpeg，json等等放到下面这样的共通配置里：

base.js

module.exports =function(){
    return{
        entry:{
            'polyfills':'./src/polyfills.ts',
            'vendor':'./src/vendor.ts',
            'main':'./src/main.ts'
 
        },
        output:{
            path: path.join(__dirname,'/../dist/assets'),
            filename:'[name].bundle.js',
            publicPath: publicPath,
            sourceMapFilename:'[name].map'
        },
        resolve:{
            extensions:['.ts','.js','.json'],
            modules:[path.join(__dirname,'src'),'node_modules']
 
        },
        module:{
            rules:[{
                test:/\.ts$/,
                use:[
                    'awesome-typescript-loader',
                    'angular2-template-loader'
                ],
                exclude:[/\.(spec|e2e)\.ts$/]
            },{
                test:/\.css$/,
                use:['to-string-loader','css-loader']
            },{
                test:/\.(jpg|png|gif)$/,
                use:'file-loader'
            },{
                test:/\.(woff|woff2|eot|ttf|svg)$/,
                use:{
                  loader:'url-loader',
                  options:{
                    limit:100000
                  }
                }
            }],
        },
        plugins:[
            newForkCheckerPlugin(),
 
            newwebpack.optimize.CommonsChunkPlugin({
                name:['polyfills','vendor'].reverse()
            }),
            newHtmlWebpackPlugin({
                template:'src/index.html',
                chunksSortMode:'dependency'
            })
        ],
    };
}

然后用’webpack-merge’把基础配置和一个环境特定配置合并到一起。让我们看看一个合并产品文件的例子，像上面说的，用’webpack-merge’把基础文件合并到一起：

prod.js（更新后）

const webpackMerge =require('webpack-merge');
 
const commonConfig =require('./base.js');
 
module.exports =function(env){
    returnwebpackMerge(commonConfig(),{
        plugins:[
            newwebpack.LoaderOptionsPlugin({
                minimize:true,
                debug:false
            }),
            newwebpack.DefinePlugin({
                'process.env':{
                    'NODE_ENV': JSON.stringify('production')
                }
            }),
            newwebpack.optimize.UglifyJsPlugin({
                beautify:false,
                mangle:{
                    screw_ie8:true,
                    keep_fnames:true
                },
                compress:{
                    screw_ie8:true
                },
                comments:false
            })
        ]
    })
}

你会发现在我们的prod.js文件里有三个主要更新点。

用‘webpack-merge'合并'base.js'
我们已经把output移到'base.js'里。强调一点，我们重构'prod.js'，把output属性移到共通配置文件'base.js'里，它贯穿于所有的环境。
我们用'DefinePlugin'把'process.env.NODE_ENV'定义为'production'。现在当我们为产品环境编译应用的时候，'process.env.NODE_ENV'的值是'production'将贯穿于整个应用。同样我们可以为每个环境管理各种变量。