介绍
一个webpack打包的应用中,js代码可以分为三类:
* 团队或者个人编写的代码。
* 第三方代码,例如react、vue等。
* 运行时各个模块之间连接交互的代码。
看一个具体的配置
const webpack = require('webpack');
const CleanWebpackPlugin=require('clean-webpack-plugin');
const path=require('path');
const entries=require('./public/javascripts/getentries/merge.js')();
const fs=require('fs');
//get comoon module
entries['vendor']=['react','react-dom'];
entries['simplemde']=['simplemde'];
//server Exclude node_modules
var nodeModules = {};
fs.readdirSync('node_modules')
.filter(function(x) {
return ['.bin'].indexOf(x) === -1;
})
.forEach(function(mod) {
nodeModules[mod] = 'commonjs ' + mod;
});
const config=[{
entry:entries,
output:{
path:path.resolve(__dirname,'public/javascripts/dist'),
filename:'[name].js'
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
plugins: ['transform-runtime'],
presets: ['es2015', 'stage-0','react'],
}
},
{
test:/\.css$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" },
]
},
{
test:'/\.(png|svg|jpg|gif)$/',
use:[
'file-loader'
]
}
]
},
plugins:[
new CleanWebpackPlugin(['public/javascripts/dist']),
new webpack.optimize.CommonsChunkPlugin({
name:['vendor','simplemde','manifest']
})
]
},{
entry:{
server:'./public/javascripts/server/server.js'
},
target: "node",
output:{
path:path.resolve(__dirname,'public/javascripts/dist'),
filename:'[name].js',
library:'serverRender',
libraryTarget: 'commonjs'
},
node: {
console: true,
global: true,
process: true,
Buffer: true,
__filename: true,
__dirname: true,
setImmediate: true
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
loader: 'babel-loader',
exclude:/node_modules/,
query: {
plugins: ['transform-runtime'],
presets: ['es2015', 'stage-0','react'],
}
}
]
},
externals:nodeModules
}];
module.exports=config;
运行webpack其中会生成三类代码:
* 个人或团队应用代码。
* 三方代码,这里为 vendor.js,这里的配置将simplemde也单独提出来了,会生成一个simplemde.js,但是其也属于三方代码。
* manifest.js模块加载代码。
生成manifest.js注意点
做代码分割时,关键是如下语句,提出公共的部分(三方代码,模块加载代码manifest.js)
new webpack.optimize.CommonsChunkPlugin({
name:['vendor','simplemde','manifest']
})
此处manifest应该放在数组的最后如[‘vendor’,’simplemde’,’manifest’],不能写成[‘vendor’,’manifest’,’simplemde’],会导致的问题是不会生成manifest.js,原本manifest.js的代码被合并到simplemde.js中。