webpack笔记三管理输出

增加src/print.js：

export default function printMe() {    console.log('I get called from print.js!');}

在src/index.js中导入它：

import _ from 'lodash';import printMe from './print';function component() {    let element = document.createElement('div');    let btn = document.createElement('button');    element.innerHTML = _.join(['Hello', 'webpack'], ' ');    btn.innerHTML = 'Click here, then watch the console!';    btn.onclick = printMe;    element.appendChild(btn);    return element;}document.body.appendChild(component());

在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')    }};

到这里，还需要手动修改dist/index.html：

...

打包后可以看到效果：

使用 HtmlWebpackPlugin 插件

经过以上实践，我们发现每次修改输出文件名，都得手动修改dist/index.html文件，如果给输出文件名增加了hash值维护起来更是麻烦。懒是进步的动力：

安装 HtmlWebpackPlugin 插件：

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: {        filename: '[name].bundle.js',        path: path.resolve(__dirname, 'dist')    }};

HtmlWebpackPlugin会生成一个index.html，替换掉之前的文件。

插件
提供默认模板之外，还提供了一些额外的功能。

CleanWebpackPlugin 清理`/dist`文件夹

npm install --save-dev clean-webpack-plugin

webpack.config.js

...const CleanWebpackPlugin = require('clean-webpack-plugin');module.exports = {    ...    plugins: [        ...        new CleanWebpackPlugin()    ],    ...};