Question

我的网页制作webpack配置如下：

const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
const WebpackStrip = require('strip-loader');

module.exports = [
{
    devtool: 'cheap-module-source-map',
    entry: './ui/moduleTest/entry.js',
    output: { path: __dirname + '/public/compiled', filename: 'mod1bundle.js' },
    module: {
    loaders: [
         { test: /\.jsx?$/, loader: 'babel-loader', include: /ui/, query: { presets: ['es2015', 'stage-0', 'react'] } },
         { test: /\.scss$/, loader: ExtractTextPlugin.extract( "style", "css!sass") }
     ]
         },
    plugins: [
       new ExtractTextPlugin("styles.css"),
       new webpack.optimize.UglifyJsPlugin()
    ]
   }, 
 { devtool: 'cheap-module-source-map',
   entry: './ui/moduleTest2/entry.js',
   output: { path: __dirname + '/public/compiled', filename: 'mod2bundle.js' },
   module: {
        loaders: [
             { test: /\.jsx?$/, loader: 'babel-loader', include: /ui/, query: { presets: ['es2015', 'stage-0', 'react'] } },
           ]
   },
   plugins: [
         new ExtractTextPlugin("styles.css"),
         new ExtractTextPlugin("console.log"),
         new webpack.optimize.UglifyJsPlugin()
        ]
    },
   ....
  ];

我尝试了很多东西而且我无法让它准备就绪。 react dev工具告诉我，我正在使用dev版本的react。我是webpack的新手。我还需要关闭console.log消息。有关如何将此配置转换为生产准备的任何想法？我一直在阅读很多东西，但我有些问题需要理解。我使用的命令如下：

  webpack --config=webpack.prod.config.js --watch --progress --watch-poll -p

编译我的代码

Answer 1

您需要查看DefinePlugin。

它的工作是查找给定字符串的实例，然后用其他字符串替换它们。将此代码添加到您的插件数组，以配置它以构建React的生产版本。

new webpack.DefinePlugin({
  'process.env.NODE_ENV': JSON.stringify('production')
})

然后确保您使用的是UglifyJS插件，它位于配置中的DefinePlugin之后。

这将取代以下所有表达式：

if (process.env.NODE_ENV === "development") {
  // do slow development code
}

代码如下：

if ("production" === "development") {
  // do slow development code
}

Uglify可以在编译时将此识别为if表达式永远不会成立，并删除整个语句。

如果要删除所有console.log语句，最简单的方法是在初始化文件中将其设置为no op。

if (process.env.NODE_ENV === "production") {
  console.log = () => {};
  console.info = () => {};
  // ...
}

确保此代码在任何可能具有日志记录语句的文件之前运行。

优化将webpack配置反应为生产

1 个答案: