版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_20087231/article/details/83541682
准备
新增/src/print.js
export default function printMe() {
console.log('I get called from print.js!');
}
在src/index.js中使用这个函数
src/index.js
import _ from 'lodash';
import printMe from './print.js';
function component() {
let element = document.createElement('div');
let 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());
更新dist/index.html,为webpack分离入口做好准备
dist/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="/print.bundle.js"></script>
</head>
<body>
<script src="./app.bundle.js"></script>
</body>
</html>
调整配置,在webpack.config.js中 在entry入口处添加src/print.js作为新的起点,然后修改output出口,以便根据入口起点名称动态生成bundle名称
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')
}
};
重新构建
npm run build
使用插件
HtmlWebpackPlugin ,解决当我们修改index.js中的入口起点名称或者新增一个名称之后生成的包被重命名在一个构建中,而index.html文件仍然会引用旧名字的问题。
安装
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'
},
plugins: [
new HtmlWebpackPlugin({
title: 'Output Management'
})
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
clean-webpack-plugin 清理/dist文件夹
安装
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'
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: 'Output Management'
})
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
重新构建
npm run build
执行之后,/dist文件夹中除了构建后生成的文件不会再有其他文件。
WebpackManifestPlugin 生成一个json文件,来对应本来文件构建之后的文件
npm install --save-dev webpack-manifest-plugin
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ManifestPlugin = require('webpack-manifest-plugin');
module.exports = {
entry: {
app: './src/index.js',
print: './src/print.js'
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: 'Output Management'
}),
new ManifestPlugin()
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
重新构建
npm run build
默认在/dist文件夹(publicPath)中生成manifest.json
{
"app.js": "app.bundle.js",
"print.js": "print.bundle.js",
"index.html": "index.html"
}