【webpack学习笔记】a03-管理输出

webpack 中输出管理主要运用了两个插件:

• html-webpack-plugin
• clean-webpack-plugin

这两个插件可以满足常规的输出管理需求。

---

html-webpack-plugin会在输出目录创建一个全新的index.html（当然你也可以自己命名），将所有相关的bundle自动添加到html中，这样就可以不用每次更改完还需要自己手动去更改html的。

还有个相当的好处就是，可以使用hash，也就是版本号，这样可以有效的应对缓存问题。

例子：

安装：

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',
            filename: 'index-[hash:5].html'
        })
    ]
};

输出：

---

如果使用了版本号，几次更改输出后，输出目录必然是杂乱的，这时候就需要用到clean-webpack-plugin插件。

这个插件可以清楚旧文件，只留下当前构建后生成的文件。

例子：

安装：

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

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 HtmlWebpackPlugin({
            title: 'Output Management',
            filename: 'index-[hash:5].html'
        }),
        new CleanWebpackPlugin(['dist'])
    ]
};