以下是我的基本webpack配置:
const _ = require("lodash");
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const defaults = (tsConfigFile, babelPresets) => {
return {
entry: {
"moduleOne": "./src/ModOne.tsx",
"moduleTwo": "./src/ModTwo.tsx",
"moduleThree": "./src/ModThree.tsx",
"moduleFour": "./src/ModFour.tsx",
"moduleFive": "./src/ModFive.tsx"
},
optimization: {
splitChunks: {
cacheGroups: {
"mod.styled": {
test: /[\\/]node_modules[\\/]styled-components[\\/]/,
name: "styled",
chunks: "all",
priority: 3,
},
"mod.external.modules": {
test: /[\\/]node_modules[\\/]/,
name: "external.modules",
chunks: "all",
priority: 1,
},
}
},
runtimeChunk: {
name: "chunky.runtime"
}
},
resolve: {
extensions: [".ts", ".tsx", ".js", ".json", "*.png", "*.jpg", "*.svg"],
},
module: {
rules: [
{
test: /\.tsx?$/,
include: /src/,
loader: "ts-loader",
options: {
configFile: tsConfigFile,
},
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: babelPresets,
},
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
use: [
'url-loader?limit=10000',
'img-loader'
]
},
{
test: /\.css$/,
include: /src/,
exclude: /node_modules/,
loader: ExtractTextPlugin.extract('typings-for-css-modules-loader?modules&namedExport&camelCase&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'),
},
{
test: /\.css$/,
include: /node_modules/,
loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader?sourceMap' })
},
{
test: /\.svg$/,
loader: 'svg-loader?pngScale=2'
}
]
},
};
}
module.exports.defaults = defaults;
module.exports.merge = function merge(tsConfigFile, babelPresets, config) {
return _.merge({}, defaults(tsConfigFile, babelPresets), config);
}
这是生产webpack配置:
const base = require("./webpack.base");
const path = require('path')
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = (env, argv) => {
let outputPrefix = '';
if(env && env.version) {
outputPrefix = env.version;
if (argv.buildNumber) {
outputPrefix += "." + argv.buildNumber;
}
outputPrefix += '/';
}
return base.merge("tsconfig.json", ["es5"], {
mode: "none",
output: {
filename: outputPrefix + '[name].min.js',
path: path.resolve(__dirname, 'dist'),
},
plugins: [
new UglifyJSPlugin(),
new ExtractTextPlugin(outputPrefix + '[name].min.css'),
new OptimizeCssAssetsPlugin({
assetNameRegExp: /\.css$/g,
cssProcessor: require('cssnano'),
cssProcessorOptions: { discardComments: { removeAll: true } },
canPrint: true
}),
// Uncomment the bundle analyzer to generate a view of the output files and what they contain
new BundleAnalyzerPlugin({
analyzerMode: 'static'
}),
]
});
}
如基本Webpack文件中所示,mod.external.modules
将node_modules
中的所有内容捆绑在external.modules.js
文件中。但是,当我运行生产构建并分析捆绑软件时,它表明它捆绑了React和React-Dom的未精简版开发版本,相反,它应该从各自的node_modules
文件夹中获得精简版。 >
我用于生产的命令是:
tslint -p . --config tslint.prod.json && webpack --config ./webpack.prod.js
如何使我的产品构建包含最小版本的React和React-Dom?