2

我刚刚将我的 react 项目中的 webpack 从版本 1 升级到了最新版本（3.5.5）。

我按照迁移指南进行操作，没有任何问题，但显然我的捆绑包中没有应用摇树（所有 aws-sdk 都包含在捆绑包中，即使我只导入了 s3 模块）。

这是我的 webpack 配置：

webpack.config.base.js

const paths = require('./paths')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {  
  resolve: {
        modules: [
         paths.appSrc,
         paths.appNodeModules
        ]
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: 'eslint-loader',
        include: paths.appSrc,
      },
          {
        exclude: [
          /\.html$/,
          /\.(js|jsx)$/,
          /\.(scss|sass)$/,
          /\.css$/,
          /\.json$/,
          /\.svg$/
        ],
        use: {
          loader: 'url-loader',
          query: {
            limit: 10000,
            name: 'static/media/[name].[hash:8].[ext]'
          }
        },

  },
  {
    test: /\.(js|jsx)$/,
    include: paths.appSrc,
    use: {
      loader: 'babel-loader',
      query: {
        cacheDirectory: true,
        presets: [
          'react',
          ['es2015', { modules: false }],
          'stage-1',
        ],

      }
    }
  },
  {
    test: /\.svg$/,
    use: {
      loader: 'file-loader',
      query: {
        name: 'static/media/[name].[hash:8].[ext]'
      }
    }
  }
],
},
plugins: [
    new HtmlWebpackPlugin({
      inject: true,
      template: paths.appHtml
    })
  ]
}

webpack.config.prod.js

const webpack = require('webpack')
const merge = require('webpack-merge')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const InterpolateHtmlPlugin = require('react-dev-
utils/InterpolateHtmlPlugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const ShakePlugin = require('webpack-common-shake').Plugin;
const url = require('url')
const paths = require('./paths')
const baseConfig = require('./webpack.base')


function ensureSlash(path, needsSlash) {
  const hasSlash = path.endsWith('/')
  if (hasSlash && !needsSlash) {
    return path.substr(path, path.length - 1)
  } else if (!hasSlash && needsSlash) {
    return path + '/'
  } else {
    return path
  }
}

const homepagePath = require(paths.appPackageJson).homepage
const homepagePathname = homepagePath ? url.parse(homepagePath).pathname : '/'
const publicPath = '.' + ensureSlash(homepagePathname, true)
const publicUrl = '.' / +ensureSlash(homepagePathname, false)


const clientConfig = {
  name: 'client',
  bail: true,
  devtool: 'cheap-module-source-map',
  entry: [
    require.resolve('./polyfills'),
    paths.appIndexJs
  ],
  output: {
    path: paths.appBuild,
    filename: 'static/js/[name].[chunkhash:8].js',
    chunkFilename: 'static/js/[name].[chunkhash:8].chunk.js',
    publicPath: publicPath
  },
  module: {
    rules: [
      {
        test: /\.(sass|scss)$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            {
              loader: "css-loader"
            },
            {
              loader: "resolve-url-loader"
            },
            {
              loader: "sass-loader?sourceMap"
            }],
          publicPath: publicPath
        })
      },
    ]
  },
  plugins: [
    new InterpolateHtmlPlugin({ PUBLIC_URL: publicUrl }),
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': JSON.stringify('production')
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true,
      debug: false
    }),
    new UglifyJsPlugin({
      sourceMap: true,
      minimize: true,
      compress: {
        screw_ie8: true,
        warnings: false
      },
      mangle: {
        screw_ie8: true
      },
      output: {
        comments: false,
        screw_ie8: true
      }
    }),
    new ExtractTextPlugin('static/css/[name].[contenthash:8].css'),
    new ShakePlugin()
  ]
}

module.exports = merge(baseConfig, clientConfig)

我尝试了许多不同的配置，但似乎没有任何效果，有人知道我做错了什么吗？

4

0 回答 0