webpack进阶（一）-一一网

1. 自动生成html文件

在之前的两篇文章中，我们每次打包后想要查看打包代码运行效果需要手动在dist文件夹下新增一个index.html文件，并且在文件中手动引入打出的js包，这样非常不方便。HtmlWebpackPlugin简化了 HTML 文件的创建，所以一般项目中都会用到这个插件。

1. 安装HtmlWebpackPlugin

npm i html-webpack-plugin -D

2. 使用插件

// webpack.config.js
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'main.js',
        path: path.join(__dirname, 'dist')
    },
    mode: 'development',
    devServer: {
        port: 9000,
        contentBase: path.resolve(__dirname, './dist'),
        hot: true
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                use: 'babel-loader'
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            },
            {
                test: /\.(png|jpg|jpeg|gif)$/,
                use: 'file-loader',
            }
        ]
    },
    plugins: [
        // 使用HtmlWebpackPlugin插件
        new HtmlWebpackPlugin(),
        new webpack.HotModuleReplacementPlugin()
    ]   
}

复制代码

3. 打包查看效果

先将之前生成的dist文件夹删除（确保每次生成的dist文件均为最新的且无之前生成的无关文件）。然后执行build打包命令。输出结果如下

4. HtmlWebpackPlugin的其他配置项

默认生成的html文件如上图所示，但往往这些是不够的，HtmlWebpackPlugin也给我们提供了一些options用来配置生成的html文件。这里仅对常用的几个拿来做演示，更多配置项可以自行前往插件文档查阅使用。HtmlWebpackPlugin的options配置项说明文档。

修改webpack配置：

...
plugins: [
    new HtmlWebpackPlugin({
        // 生成html的title,默认为Webpack App
        title: '捡代码的小女孩的webpack世界',
        // 生成html的文件名，默认为index.html
        filename: 'yeah.html',
        // 生成html的meta标签内容
        meta: {viewport: 'width=device-width, initial-scale=1, shrink-to-fit=no'},
        // 生成html的图标
        favicon: './src/imgs/favicon.ico',
        //现代浏览器支持非阻塞javascript加载，以提高页面启动性能。默认为defer
        scriptLoading: 'blocking',
        // 打包出来的html文件是否开启压缩，如果mode是production，默认为true，其他模式默认为false
        minify: false
    }),
    new webpack.HotModuleReplacementPlugin()
]   
复制代码

执行build命令，（记得先将dist文件夹删除），打包结果如下

5. 使用模板生成html文件

通过配置HtmlWebpackPlugin可以生成相对灵活的html文件，但是仍然不够个性化。所以一般情况下，我们项目中会使用template这一配置项来生成html文件。

在src目录下，新建index.html模板

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>捡代码的小女孩的webpack世界</title>
</head>

<body>
    <div id="app"></div>
</body>

</html>
复制代码

修改webpack配置项

new HtmlWebpackPlugin({
    template: path.join(__dirname, 'src/index.html')
})
复制代码

执行build命令后，打包后生成的dist文件夹中的index.html文件即是以src目录下的index.html文件为模板生成的。

2.自动清理构建目录产物

在上面的操作中，我们每次build前都需要手动删除dist，其实webpack也提供了自动清理构建目录产物的插件–CleanWebpackPlugin

1. 安装HtmlWebpackPlugin

npm i clean-webpack-plugin -D

2. 使用插件

// webpack.config.js
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
    ...
    plugins: [
        // 使用CleanWebpackPlugin插件
        new CleanWebpackPlugin(),
        // 使用HtmlWebpackPlugin插件
        new HtmlWebpackPlugin(),
        new webpack.HotModuleReplacementPlugin()
    ]   
复制代码

3.静态资源内联

1. 静态资源内联的意义

资源内联（inline resource），就是将一个资源以内联的方式嵌入进另一个资源里面。其意义可从两个方面分析

代码层面上：

页面框架的初始化脚本
上报相关打点
css 内联避免页面闪动

请求层面上：

减少 HTTP ⽹网络请求数
小图片或者字体内联 (url-loader)

html与js内联

1. 安装raw-loader

npm i raw-loader@0.5.1 -D

2. 使用插件

// src/meta.html
<meta name="keywords" content="捡代码的小女孩">
<meta name="format-detection" content="telephone=no">
<meta name="description" itemprop="description" content="webpack干货专栏,快来围观!">
<meta name="name" itemprop="name" content="webpack进阶">


// src/index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <%= require('raw-loader!./meta.html') %>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>捡代码的小女孩的webpack世界</title>
    <script>
        <%= require('raw-loader!babel-loader!./test.js') %>
    </script>
</head>
<body>
    <div id="app"></div>
</body>

</html>
复制代码