次の webpack 構成があります。
var path = require('path'),
webpack = require('webpack'),
CopyWebpackPlugin = require('copy-webpack-plugin'),
WebpackStripLoader = require('strip-loader');
const webpack_config = {
context: path.join(__dirname, 'src'),
entry: './lib/Polywrap',
output: {
path: path.join(__dirname, 'build'),
chunkFilename: "[id].bundle.js"
filename: '[name].js'
},
plugins: [],
module: {
resolve: {
extensions: ['']
},
loaders: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
include: path.join(__dirname, './src'),
query : {
presets: ['es2015'],
}
}
]
}
};
//
// Environment-specific confs
//
switch (process.env.NODE_ENV) {
case "prod":
console.warn("Prod mode");
var stripLoader = {
test: [/\.js$/],
exclude: /node_modules/,
loader: WebpackStripLoader.loader('console.log')
};
webpack_config.module.loaders.push(stripLoader);
webpack_config.plugins.push(
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production')
}
})
);
webpack_config.plugins.push(
new webpack.optimize.UglifyJsPlugin({
include: /\.js$/,
compress: {
warnings: false
}
})
);
break;
case "dev":
console.warn("Dev mode");
// Let's omit this for example's sake
break;
}
module.exports = webpack_config;
次のコードがあり、コード分割lib/Polywrap.js
を展開しようとしています:
function getLangObj(templateName) {
return require("../langs/"+templateName);
}
console.log(getLangObj("it-IT.js"));
console.log(getLangObj("en-US.js"));
Polywrap と 2 つのチャンクの 3 つのファイルが出力されると予想していました。残念ながら、Polywrap だけがすべてバンドルされて出力されます。内部のすべての js ファイル../langs/
がバンドルされています。どうしたの?
出力は次のとおりです。
Prod mode
Hash: f93ad402ea615e465db5
Version: webpack 1.13.3
Time: 1107ms
Asset Size Chunks Chunk Names
main.js 1.93 kB 0 [emitted] main
[1] ./langs ^\.\/.*$ 268 bytes {0} [built]
+ 5 hidden modules