7、webpack管理输出

※项目使用前文webpack起步建立的项目

随着应用程序增长，并且一旦开始对文件名使用哈希(hash)]并输出多个 bundle，手动地对 index.html 文件进行管理，一切就会变得困难起来。然而，可以通过一些插件，会使这个过程更容易操控。

1、index.html自动生成，防止入口脚本名字修改还要再手动修改index.html

1)安装html-webpack-plugin

npm install html-webpack-plugin --save-dev

2)新增src/print.js文件

export default function print() { console.log('print js print infomation!'); }

3）更改wenpack配置文件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: '输出管理' }) ] }

4、构建前目录结构

webpack-demo |- webpack.config.js // webpack配置文件 |- package.json |- /src // 新增src源代码文件夹 |- index.js // 新增js文件 |- print.js |-/dist

5、构建工程

npm run build

6、构建后目录结构

webpack-demo |- webpack.config.js // webpack配置文件 |- package.json |- /src // 新增src源代码文件夹 |- index.js // 新增js文件 |- print.js |- /dist |- app.bundle.js |- print.bundle.js |- index.html

7、浏览器打卡index.html 验证结果