【webpack】3. 将入口html也打包

webpack学习

【webpack】1.快速入门
 【webpack】2.webpack核心–loader
【webpack】3. 将入口html也打包
 【webpack】4. webpack-dev-server思考
 【webpack】5.开发和生产模式的配置加载

文章目录

webpack学习
安装
配置
解决缓存

通过前两章，发现用webpack想做的就是一个入口，一切都从index.js开始，或者一切都从webpack.config.js开始，其他都不用管，告诉入口即可。通过对loader的学习，发现图片，css，js，数据都可以被webpack管理，只有index.html不可以，还得手动指定打包后的js的地址。

若是希望把html也交由webpack管理，需要安装一个插件

安装

npm i html-webpack-plugin --save

配置一下webpack.config.js(以下是配置过css-loader，style-loader和file-loader的配置文件，和html-webpack-plugin有关的只有带注释的地方，对于loader的配置可见webpack loader)

const HtmlWebpackPlugin = require('html-webpack-plugin')//这里
module.exports={
    mode: 'development',
    entry: './js/index.js',
    output: {
        filename:'pack.js',
        path:__dirname + '/dist',
        publicPath: './dist/'
    },
    plugins : [ //
        new HtmlWebpackPlugin(),//是一个构造器，new一下
    ], //
    module: {
        rules: [
            {
                test: /\.css$/,
                use:[
                    {
                        loader:'style-loader'
                    }, 
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true,
                        }
                    }
                ]
            },
            {
                test: /\.(jpg|jpeg|png|gif)$/i,
                use: [
                    {
                    loader: 'file-loader',
                    options: {
                        publicPath: './dist/'
                    }
                    }
                ]
            }
        ]
    }
}

npm run pack
再查看dist目录（打包后的出口文件目录），发现生成了个index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Webpack App</title>
  </head>
  <body>
  <script type="text/javascript" src="./dist/pack.js"></script></body>
</html>

里面引入了pack.js。所以之前项目目录下的index.html不需要了，打开这个html即可

配置

但有时希望meta标签是响应式的，或是想改title,则需要在webpack.config.js里配置

    plugins : [
        new HtmlWebpackPlugin({
            template: './index.html'
        }),//是一个构造器，new一下
    ],

这里是将项目目录下的index.html作为模版
再打包运行，发现dist目录下的html变得和项目目录下的一样了，还引入了pack.js

解决缓存

有时候浏览器有缓存策略，会导致pack.js其实已经更新过了，但浏览器看地址一样，浏览器直接用缓存里的不去请求了，所以希望每次重新打包后文件名有所变化，所以要加一个[hash]

    output: {//出口
        filename:'pack.[hash].js',//这里添加
        path:__dirname + '/dist',
    },

再保存运行，查看dist目录，发现名字有变化
在这里插入图片描述
这时候再改变一下入口文件index.js，查看dist目录

又多了一个打包后的文件，dist/index.html下引入的也是新的打包后文件，可以确保浏览器每次都加载重新打包后的文件