webpack的最基本配置文件

87 阅读 0 评论 58 点赞

我是靠谱客的博主英俊柠檬，最近开发中收集的这篇文章主要介绍webpack的最基本配置文件，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

webpack的基本配置文件webpack.config.js

var htmlWebpackPlugin = require('html-webpack-plugin');  //加载插件生成html文件

module.exports = {
    entry:{
        main: './src/script/main.js',
        a: './src/script/a.js'
    },
    output: {
        filename: './dist/js/[name]-[hash].js',
    },
    plugins: [
        new htmlWebpackPlugin({
            filename: './dist/index-[hash].html',
            template: 'index.html',
            inject: 'head',  //js文件引用位置
            title: 'webpack is good',  //title内容自定义
            date: new Date()  
        })
    ]
}

模板页面index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title><%= htmlWebpackPlugin.options.title %></title>  //引用配置文件自定义标题
</head>
<body>
    <%= htmlWebpackPlugin.options.date %>  //引用时间
</body>
</html>

自动生成的index-[hash].html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>webpack is good</title>
  <script type="text/javascript" src=".././dist/js/main-115f385c414f2135e9c8.js"></script><script type="text/javascript" src=".././dist/js/a-115f385c414f2135e9c8.js"></script></head>
  <body>
  Sun Feb 18 2018 15:04:46 GMT+0800 (中国标准时间)
  </body>
</html>