Webpack 3.x 创建多个template及rimraf使用

最新推荐文章于 2024-08-10 08:39:21 发布

Stangor

最新推荐文章于 2024-08-10 08:39:21 发布

阅读量2.6k

点赞数

分类专栏： webpack3-x 文章标签： webpack

本文链接：https://blog.csdn.net/stanxl/article/details/78632820

版权

本文介绍了如何在Webpack 3.x中创建并管理多个模板文件，如index.html和anotherPage.html，以及如何通过HtmlWebpackPlugin设置不同模板的入口文件。同时，讲解了使用rimraf命令在生产环境中清除dist目录的旧文件，确保每次构建都是最新的。

摘要由CSDN通过智能技术生成

如果是使用的webpack-dev-server模式的话，它是从内存中去读取目标模板的，也就是说如果现在磁盘上的index.html被删除了，对它读取index.html没有任何影响，那么现在我要做这样的件事，将目标模板index.html更换一下目录位置，也就是说这种情况会是在使用webpack -d的模式下才有意义，所以现在就切换回这种模式：

  "scripts": {
    "dev": "webpack -d --watch",
    "prot": "webpack -p"
  }

而它之前的存放的目录是：

output:{
    path: __dirname + "/dist",
    filename: "app.bundle.js"
}

更改模板文件的目录只需要在HtmlWebpackPlugin中添加一个filename字段：

    new HtmlWebpackPlugin({
        title: 'webpack', 
        filename: './../index.html', // 表示在root目录下
        hash: true,
        template: './src/my-index.html', // Load a custom template (lodash