我刚刚将反应项目中的webpack从版本1升级到最新版本(3.5.5)。
我按照迁移指南进行操作并没有出现任何问题,但显然树震动并没有应用到我的捆绑包中(尽管我只导入了s3模块,但所有aws-sdk都包含在捆绑包中)。 / p>
这是我的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)
我尝试了很多不同的配置,但似乎什么都没有用,有没有人知道我做错了什么?