vue学习之配置HtmlWebpackPlugin插件

HtmlWebpackPlugin插件可以：自动生成一个index.html文件(可以指定模板来生成) 将打包的js文件；自动通过script标签插入到body中。安装插件npm install html-webpack-plugin@3.2.0 --save-dev跟着B站coderwhy老师的视频做的，此处需要指定版本@3.2.0，同时保证webpack是4以下的，贴上package.json

以后灬会緈福

3599人浏览 · 2020-09-07 23:31:55

以后灬会緈福 · 2020-09-07 23:31:55 发布

HtmlWebpackPlugin插件可以：

自动生成一个index.html文件(可以指定模板来生成) 将打包的js文件；
自动通过script标签插入到body中。

安装插件

npm install html-webpack-plugin@3.2.0 --save-dev

跟着B站coderwhy老师的视频做的，此处需要指定版本@3.2.0，同时保证webpack是4以下的，贴上package.json，主要是devDependencies中的内容：

{
  "name": "meetwebpack",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "description": "",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-es2015": "^6.24.1",
    "css-loader": "^2.0.2",
    "file-loader": "^3.0.1",
    "less": "^3.9.0",
    "less-loader": "^4.1.0",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^0.23.1",
    "url-loader": "^1.1.2",
    "vue-loader": "^13.0.0",
    "vue-template-compiler": "^2.5.21",
    "webpack": "^3.6.0"
  },
  "dependencies": {
    "vue": "^2.5.21"
  }
}

坑：

webpack版本：

自己的，最初安装的版本是4以上的，而且是全局安装，

王老师的，视频是2018年的，当时安装的全局版本是3.6.0，跟局部安装的一样。

因此开始时自己在命令行里使用webpack打包一直使用的是全局安装的4版本（命令行中使用的都是全局安装的webpack版本），在后续安装其他包的时候没有注意视频内的版本号。因此出现了很多vue-loader的错误，htmlwebpackPlugin的错误。此处应该保持两点：

第一，在package.json中配置build命令，并使用npm run build命令编译项目(使用的是webpack 3.6版本)。

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open",
    "build": "webpack"
  },

此时，在命令行中输入npm run build，它会优先去找本地安装的webpack(3.6版本)，如果找不到才会去使用全局的4.0版本。

第二，要保证各模块版本间的适配，按照第一张图给的cnpm install即可。

使用插件

修改webpack.config.js文件中plugins部分的内容如下：

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

//在module.exports中添加
module.exports = {
.....
.....
    entry:'./src/main.js',
    output:{
        path: path.resolve(__dirname,'dist'),
        filename:'bundle.js',
        // publicPath:'dist/'    //此处需要注释掉，否则会在生成的index.html前添加该值
    },
    plugins:[
      new HtmlWebpackPlugin({
        template : 'index.html'    //根据index.html模板生成dist下的index.html
      })
    ]
}

附：

//index.html 内容，里面将script标签注释掉，因为htmlwebpackPlugin会自动生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

    <div id="app"></div>
    
    <!-- <script src="./dist/bundle.js" ></script> -->

</body>
</html>

这里的template表示根据什么模板来生成index.html

另外，我们需要删除之前在output中添加的publicPath属性否则插入的script标签中的src可能会有问题

编译后生成的index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

    <div id="app"></div>
    
    <!-- <script src="./dist/bundle.js" ></script> -->

<script type="text/javascript" src="bundle.js"></script></body>
</html>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^