管理输出
在 src 下新建 print.js 文件
|- package.json
|- webpack.config.js
|- /dist
|- /src
|- index.js
+ |- print.js
|- /node_modules
src/print.js
export default function printMe() {
console.log('I get called from print.js!');
}
修改 src/index.js
import wx from './wx.png'
import './style.css'
import printMe from './print'
window.onload = function () {
var btn = document.getElementById('btn')
btn.addEventListener('click',printMe)
}
修改 dist/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello webpack</title>
<script src="print.bundle.js"></script>
<script src="app.bundle.js"></script>
</head>
<body>
<div class="hello">
Hello Webpack 4
</div>
<button id="btn">点击有惊喜!</button>
</body>
</html>
重新修改 webpack.config.js 配置
const path = require('path');
module.exports = {
entry: {
app : './src/index.js',
print : './src/print.js'
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules : [
{
test:/\.css$/,
use:[
'style-loader',
'css-loader'
]
},
{
test :/\.(png|svg|jpg|gif)$/,
use : [
'file-loader'
]
}
]
}
};
执行命令 => npm run build 。此时会发现 dist 文件下生成了 app.bundle.js 和 print.bundle.js,这与在 index.html 文件中指定的文件名称相对应。但如果更改了一个入口起点的名称,或添加了一个新的名称,生成的包将被重命名在一个构建中,但是 index.html 文件仍然会引用旧的名字,这时使用 HtmlWebpackPlugin 解决问题
设定 HtmlWebpackPlugin
安装插件,调整 webpack.config.js 文件
npm install --save-dev html-webpack-plugin
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: {
app : './src/index.js',
print : './src/print.js'
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new HtmlWebpackPlugin ({
title : 'Output Management'
})
],
module: {
rules : [
{
test:/\.css$/,
use:[
'style-loader',
'css-loader'
]
},
{
test :/\.(png|svg|jpg|gif)$/,
use : [
'file-loader'
]
}
]
}
};
虽然在 dist/ 文件夹已经有 index.html 文件,然后 HtmlWebpackPlugin 还是会默认生成 index.html 文件。也就是说,它会用新生成的 index.html 文件替换原来的文件。
执行命令 => npm run build。
清理 /dist 文件夹
由于过去的代码遗留,导致我们的 /dist 文件夹相当杂乱。webpack 会生成文件,然后将这些文件放置在 /dist 文件夹中,但是 webpack 无法追踪到哪些文件是实际在项目中用到的。所以,在每次构建前清理 /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')
module.exports = {
entry: {
app : './src/index.js',
print : './src/print.js'
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin ({
title : 'Output Management',
template : './src/index.html'
})
],
module: {
rules : [
{
test:/\.css$/,
use:[
'style-loader',
'css-loader'
]
},
{
test :/\.(png|svg|jpg|gif)$/,
use : [
'file-loader'
]
}
]
}
};
此时 /dist 中只有构建后生成的文件