Javascript 树摇与网页3不';行不通
我刚刚将react项目中的网页包从版本1升级到最新版本(3.5.5) 我遵循了迁移指南,没有出现任何问题,但是显然树抖动没有应用到我的捆绑包中(所有aws sdk都包含在捆绑包中,尽管我只导入了s3模块) 这是我的网页包配置: webpack.config.base.jsJavascript 树摇与网页3不';行不通,javascript,reactjs,webpack,tree-shaking,Javascript,Reactjs,Webpack,Tree Shaking,我刚刚将react项目中的网页包从版本1升级到最新版本(3.5.5) 我遵循了迁移指南,没有出现任何问题,但是显然树抖动没有应用到我的捆绑包中(所有aws sdk都包含在捆绑包中,尽管我只导入了s3模块) 这是我的网页包配置: webpack.config.base.js const paths = require('./paths') const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = {
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)
我尝试过很多不同的配置,但似乎都不起作用,有人知道我做错了什么吗 我没有使用
webpack common shake
,但我希望它出现在UglifyJsPlugin之前,因为webpack common shake
用于使UglifyJs更容易优化代码,它不负责实际的树摇晃。我试着把它放在UglifyJS插件之前,但没有任何改变。树摇晃只适用于es模块?aws sdk是es模块还是普通的commonjs包?