# 管理输出

# 多个入口

在项目开发的过程中,可以分离代码,比如业务类、组件类等


const path = require('path');

module.exports = {
    entry: {
        app: './src/index.js',
        print: './src/print.js'
    },
    output: {
        filename: '[name].bundle.js'
    }
}

这样并不能生成 html ,html 文件只能存放在 dist文件中, 开发过程中无法自动更新页面。

# html-webpack-plugin

该插件很牛X,也很重要;可以动态的接受生成的文件名,然后插入到指定的 html 页面中(存在于内存中)

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, '..', 'dist')
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'index.html'
        })
    ]
};

# clean-webpack-plugin

在每次构建前清理 /dist 文件夹,是比较推荐的做法

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, '..', 'dist')
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title: 'aaa',
            template: 'index.html'
        })
    ]
};