自动化生成项目中的HTML页面（上）

1：接着上文中的，如果用[name]-[hash]来创建文件，就会得到这样的一个目录结构，细心的同学一定发现了，如果说我们每次都以name-hash的方式来引入JS，那么我们的工作是不是会变得极其麻烦，那么我们如何解决这个问题呢？

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>
    <script sc="./dist/js/bundle.js"></script>
</body>
</html>

2：解决的办法就说需要用到webpack的插件来解决这个问题

2.1 首先我们来安装这个插件：npm install html-webpack-plugin --save-dev

2.2 其次我们来引用这个插件

2.3 如何把插件和webpack的配置结合起来,

我们使用require引入这个插件，然后建立一个plugin数组，数组内实例化这个插件

var htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry:{
        main:'./src/script/main.js',
        a:'./src/script/a.js'
    },
    output:{
        path: __dirname + '/dist/js',
        filename: '[name]-[hash].js'
    },
    plugins:[
        new htmlWebpackPlugin()
    ]
}

接着我们来运行一下命令行npm run webpack，得到如下结果：

index.html，可以看到[name]-[hash]的文件已经自动引入了

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Webpack App</title>
</head>

<body>
  <script type="text/javascript" src="main-56eb3115fd68822c0fd5.js"></script>
  <script type="text/javascript" src="a-56eb3115fd68822c0fd5.js"></script>
</body>

</html>

但是有一个问题，我们来看它的目录，可以看到，index.html并不在我们需要的目录中：

3：调整代码，更改output配置

var htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        main: './src/script/main.js',
        a: './src/script/a.js'
    },
    output: {
        path: __dirname + '/dist',//调整目录，项目生成在此文件夹下，这样index就会生成在dist目录下
        filename: 'js/[name]-[hash].js'//在js目录下生成js文件
    },
    plugins: [
        new htmlWebpackPlugin({
            template: 'index.html'
        })
    ]
}

看新的目录结构：index已经在dist目录下，并且我在原index中把title更改为了webpack is awesome也已经生效了！

4:插件的额外参数：

var htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        main: './src/script/main.js',
        a: './src/script/a.js'
    },
    output: {
        path: __dirname + '/dist',//调整目录，项目生成在此文件夹下，这样index就会生成在dist目录下
        filename: 'js/[name]-[hash].js'//在js目录下生成js文件
    },
    plugins: [
        new htmlWebpackPlugin({
            filename: 'index-[hash].html',//生成文件名
            template: 'index.html',//调用的html模板
            inject:'head'//在头部放入脚本
        })
    ]
}

我们先删除一下dist下面的js文件夹，npm run webpack一下，可以看到新生成的文件目录

webpack入门第四节：自动化生成项目中的HTML页面（上）

自动化生成项目中的HTML页面（上）

猜你喜欢