webpack4 四、输出文件管理

最新推荐文章于 2022-11-02 10:22:35 发布

jiuweiC

最新推荐文章于 2022-11-02 10:22:35 发布

阅读量610

点赞数

分类专栏： webpack

本文链接：https://blog.csdn.net/jiuweiC/article/details/88862995

版权

webpack 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

输出文件管理

html文件需要引用js依赖，如果chunck name是根据[name]、[id]、[hash]、[chunkhash]自动生成的，每次依赖的文件名，可能不一致。使用插件自动生成index文件，并为我们管理输出文件

1.index.html的生成

方案一、根据模板自动生成index.html

 plugins: [
        //自动生成index.html文件、、、、、
        new HtmlWebpackPlugin({
            template: 'index.html',//以什么为模板文件，在模板文件下新增js依赖
            inject: 'head',//body 将脚本放入head还是body里
        }),
        //该插件会根据output路径自动识别输出文件，并删除历史文件，只保留最新构建
        new CleanWebpackPlugin(),

    ],

方案二、配合npm脚本

<%=htmlWebpackPlugin.options.title%>

<% %>js代码

<%= %>输出值

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>模板</title>
</head>
<body>
<%=htmlWebpackPlugin.options.title%>
</body>
</html>

2.html文件压缩

上面插件还可对html文件进行压缩，

例如去掉空格，，去掉注释等

3.将js文件与html文件分离开

设置输出文件路径，将html与其他文件分隔开

  output: {
        //文件名必须是动态生成的，不然会文件名冲突
        filename: 'js/[name].bundle.js',
        //会根据输出路径自动创建新的文件夹，HtmlWebpackPlugin，CleanWebpackPlugin俩插件会根据输出路径自动选择相应文件进行构建
        path: path.resolve(__dirname, 'dist1')
    },

3.完整配置如下

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');


module.exports = {
    entry: {
        app: './src/index.js',
        print: './src/print.js'
    },
    plugins: [
        //自动生成index.html文件、、、、、
        new HtmlWebpackPlugin({
            template: 'index.html',//以什么为模板文件，在模板文件下新增js依赖
            inject: 'head',//body将生成的文件
        }),
        //该插件会根据output路径自动识别输出文件，并删除历史文件，只保留最新构建
        new CleanWebpackPlugin(),

    ],
    output: {
        //文件名必须是动态生成的，不然会文件名冲突
        filename: 'js/[name].bundle.js',
        //会根据输出路径自动创建新的文件夹，HtmlWebpackPlugin，CleanWebpackPlugin俩插件会根据输出路径自动选择相应文件进行构建
        path: path.resolve(__dirname, 'dist1')
    },
}
;

4.结果

1.自动生成的文件目录结构

![image-20190328003737084](/Users/ocean/Library/Application Support/typora-user-images/image-20190328003737084.png)

2.生成的html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>模板</title>
    <script type="text/javascript" src="js/app.bundle.js"></script>
    <script type="text/javascript" src="js/print.bundle.js"></script>
</head>
<body>
</body>
</html>

jiuweiC

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack4 四、输出文件管理

输出文件管理html文件需要引用js依赖，如果chunck name是根据[name]、[id]、[hash]、[chunkhash]自动生成的，每次依赖的文件名，可能不一致。使用插件自动生成index文件，并为我们管理输出文件1.index.html的生成方案一、根据模板自动生成index.html plugins: [ //自动生成index.html文件、、、、、 ...
复制链接

扫一扫