【问题标题】:Configure webpack production build配置 webpack 生产构建
【发布时间】:2019-04-04 13:05:59
【问题描述】:

我需要使用带有 Webpack 的生产版本。如果我现在在生产中访问我的网站,图标的背景为红色,这意味着它没有使用生产

当我执行 npm run build 时,它显示 npm ERR!缺少脚本:构建

如何调整 webpack 以便进行生产构建并使我的应用程序更快?

这是我的 webpack 配置:

 const webpack = require('webpack');

const config = {
  entry: ['babel-polyfill', './src/index.js'],
  output: {
    filename: 'bundle.js',
  },
  devServer: {
    inline: true,
    port: 8080,
    historyApiFallback: true,
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        API_KEY: 'API_KEY',
        GOOGLE_MAPS_KEY: 'GOOGLE_MAPS_KEY',
        GOOGLE_GEOLOCATION_KEY: 'GOOGLE_GEOLOCATION_KEY',
      },
    }),
  ],
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015', 'react'],
        },
      },
      {
        test: /\.css$/,
        loader: 'style!css',
      },
    ],
  },
};

module.exports = config;

【问题讨论】:

    标签: reactjs webpack


    【解决方案1】:
     plugins: [
        new webpack.DefinePlugin({
          'process.env': {
             API_KEY: 'API_KEY',
             GOOGLE_MAPS_KEY: 'GOOGLE_MAPS_KEY',
             GOOGLE_GEOLOCATION_KEY: 'GOOGLE_GEOLOCATION_KEY',
             NODE_ENV: JSON.stringify('production') // <--- this set everything to use production.
          },
        }),
      ],
    

    【讨论】:

    • 谢谢,npm start 现在是否要进行生产构建?
    • 这是我单击开发工具扩展时得到的结果:此页面上的 React 构建包括开发和生产版本,因为没有正确应用死代码消除。这使得它的大小变大,并导致 React 运行得更慢。确保在部署之前设置死代码消除
    猜你喜欢
    • 2018-07-22
    • 2016-12-06
    • 1970-01-01
    • 1970-01-01
    • 2018-10-13
    • 2018-11-07
    • 2015-11-18
    • 2019-11-16
    • 2020-04-15
    相关资源
    最近更新 更多