04_03.html-webpack-plugin使用

1. 首先在根目录下载 html-webpack-plugin

npm i html-webpack-plugin -D

2. 然后下载css-loader style-loader

npm i css-loader style-loader -D

3. 要操作的相关文件：

4. 首先用模块化的思想将需要使用的js模块暴露出来。（参考04_01.webpack打包初体验）

5. 然后用main.js将需要使用的js以及引入进来

/*
 * @Author: Robyn 
 * @Date: 2017-11-16 17:27:06 
 * @Last Modified by: Robyn
 * @Last Modified time: 2017-11-16 18:15:29
 */
let obj = require('./a.js'),
     fn = require('./b.js');

require('./index.css');

fn(obj.a,obj.b);

6. 在根目录创建一个webpack.config.js

/*
 * @Author: Robyn 
 * @Date: 2017-11-16 18:29:14 
 * @Last Modified by:   Robyn 
 * @Last Modified time: 2017-11-16 18:29:14 
 */

// 这个配置文件里面使用node的方式来编写
// 该配置文件必须向外暴漏一个配置对象, 供将来的webpack工具调用
const path = require('path');

// 导入插件
const htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    // 入口
    entry: path.resolve(__dirname, './src/main.js'),

    // 输出
    // webpack在打包文件的时候, 提供了一些变量, 有一个chunkhash变量
    // 它是值是根据打包后的文件内容计算出来的, 为了解决用户缓存的问题, 
    // 我们一般会把这个变量的值拼接到我们的文件中
    output: {
        path: path.resolve(__dirname, 'dist'), // 输出路径,一般起名为dist目录
        filename: 'bundle_[chunkhash:8].js'      // 打包后的文件名, 一般起名为bundle.js
    },

    // 配置插件, 这里面存存放各种插件实例
    plugins: [

        // 配置一个html插件, 用于自动注入打包后的js
        new htmlWebpackPlugin({
            template: './src/index.html',  // 要注入js的html
            filename: 'index.html',         // webpack不会修改源代码, 而是把修改后的文件输出到一个地方
            inject: 'body',
            minify:{ // 压缩优化HTML页面
                collapseWhitespace:true, // 合并空白字符
                removeComments:true, // 移除注释
                removeAttributeQuotes:true // 移除属性上的引号
            }
        })
    ],

    // webpack默认只能打包js, 要支持其他文件的打包, 需要在这里面加配置
    module: {

        // 配置规则
        rules: [

            // 匹配css文件, 先使用css-loader进行打包, 再通过style-loader执行
            {
                test: /\.css$/,                         
                use: [ 'style-loader', 'css-loader' ]
            }
        ]
    }
};

7.在根目录执行以下命令：

webpack