管理输出主要针对多个bundle,但是通常打包成的bundle只有一个。
1.最简单的管理
(1).相关文件
index.html
多加
<html>
<head>
<title>Output Management</title>
<script src="./print.bundle.js"></script>//
</head>
<body>
<script src="./app.bundle.js"></script>//
</body>
</html>
print.js:
export default function printMe() {
console.log('I get called from print.js!');
}
index.js:
import _ from 'lodash';
import printMe from './print.js';
function component() {
var element = document.createElement('div');
var btn = document.createElement('button');
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
btn.innerHTML = 'Click me and check the console!';
btn.onclick = printMe;
element.appendChild(btn);
return element;
}
document.body.appendChild(component());
(2). webpack.config.js
需要配置entry和output属性
output里需要用到占位符。
const path = require('path');
module.exports = {
entry: {
app: './src/index.js',
print: './src/print.js'
},
output: {
filename: '[name].bundle.js',//name就是entry里的app,print。
path: path.resolve(__dirname, 'dist')
}
};
执行npm run build
之后,就会看到生成了app.bundle.js和print.bundle.js,这和index.html导入的一致。
2.加上HtmlWebpackPlugin插件
这个插件存在的最大意义就是帮助更新index.html文件,在我们更改了入口起点(webpack.config.js里的entry)之后。
(1)安装
npm install --save-dev html-webpack-plugin
(2)添加入口文件
添加入口文件:print2.js
export default function printMe2() {
console.log('afg');
}
let a = 111;
let b = 222;
var jk = (c,d) => c*d;
console.log(jk(a,b));
在index.js里import:
import _ from 'lodash';
import printMe from './print.js';
import printMe2 from './print2.js';
function component(){
var btn = document.createElement('button')
var element = document.createElement('div');
element.innerHTML = _.join(['hello','webpack','']);
btn.innerHTML = 'click me and check the console!';
btn.onclick = printMe2;
element.appendChild(btn);
return element;
}
document.body.appendChild(component());
document.body.appendChild(component());
(3)配置webpack.config.js入口
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
app: './src/index.js',
print: './src/print.js',
print2: './src/print2.js'//1.添加入口
},
output: {
//filename: 'bundle.js',
filename:'[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
loaders: [{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
}]
},
plugins: [//2.配置plugins
new HtmlWebpackPlugin({
title: 'Output Management'
})
]
};
在我们构建之前/dist文件夹里已经有index.html这个文件,我们已经添加了入口起点,再次进行构建npm run build
,HtmlWebpackPlugin就会默认生成index.js,将原来的替换掉。然后新生成的bundle会自动添加到dist文件夹下的index.html里
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Output Management</title>
</head>
<body><!--包含print2对的<script>是后来添加的-->
<script type="text/javascript" src="app.bundle.js"></script><script type="text/javascript" src="print2.bundle.js"></script><script type="text/javascript" src="print.bundle.js"></script></body>
</html>
这个插件还有其他的功能
3.清理dist文件夹
如果没有进行清理的话,每次构建后生成的文件都会保存在dist文件夹里,即使某些文件你已经用不到了,它仍然保留在那里,造成很大困扰。
比如上面目录,框出来的是项目修改前生成的文件,现在项目修改了,框出来部分已经不是源码构建出来的了,没有用武之地了,应该清理掉。
clean-webpack-plugin是一个普及了的管理器。安装和配置如下:
npm install clean-webpack-plugin --save-dev
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');//1.导入插件
module.exports = {
entry: {
app: './src/index.js',
print: './src/print.js',
print2: './src/print2.js'
},
output: {
//filename: 'bundle.js',
filename:'[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
loaders: [{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
}]
},
plugins: [
new CleanWebpackPlugin(['dist']),//2.添加插件配置
new HtmlWebpackPlugin({
title: 'Output Management'
})
]
};
现在构建以下,打开dist文件夹,发现多余的文件已经消失了。cmd里会有相关记录
关于用Manifest管理输出部分,我们暂时不加以深入。