使用webpack指定配置进行打包

最新推荐文章于 2025-05-14 11:09:53 发布

原创最新推荐文章于 2025-05-14 11:09:53 发布 · 1.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#webpack #前端

webpack 专栏收录该内容

5 篇文章

订阅专栏

本文介绍Webpack的基础配置方法及html-webpack-plugin插件的使用技巧，包括如何通过配置文件简化命令行操作、实现多入口打包，并利用html插件自动生成包含打包资源的HTML文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 指定配置文件执行打包

我们前面的使用只是使用的命令行操作，我们知道，使用webpack命令的时候可以传递一些参数，但是如果参数很多的话，命令会编写的很长，而且每次都要写这么长，显得比较麻烦，因此我们比较推荐使用配置文件来配置webpack打包时的一些参数。

这里我们说明一下，我们以后养成一个好习惯，就是将我们的源代码放到src目录下，将打包生成的文件放到dist目录下，比如我们的目录结构可以是这样的：
在这里插入图片描述

1.1 简单配置

在项目的根目录创建一个webpack.config.js文件，在里面添加内容：

var path = require('path');
module.exports = {
    // 打包起始的文件
    entry: './src/js/1.js',

    // 打包后的输出配置
    output: {
        // 打包后的保存文件目录，这里需要是个绝对路径（可手动指定），
        path: path.resolve(__dirname, 'dist'),
        // 打包输出后保存的文件名
        filename: '1.b.js'
    }
}

然后直接在命令行中使用命令：

npx webpack
# 或者（监听文件变化的话，如果修改配置文件内容后仍需要手动重新执行命令）
npx webpack --watch

其实使用配置文件，和我们之前的命令行打包是一样的，只是不用每次打包的时候都输很长的命令，因为都在配置文件中指定了。

1.2 多个打包入口，单个出口的配置

var path = require('path');
module.exports = {
    // 打包起始的文件
    entry: ['./src/js/1.js', './src/js/2.js'],

    // 打包后的输出配置
    output: {
        // 打包后的保存文件目录，这里需要是个绝对路径（可手动指定），
        path: path.resolve(__dirname, 'dist'),
        // 打包输出后保存的文件名
        filename: '1.b.js'
    }
}

1.3 多个打包入口，多个出口的配置（带名字的）

var path = require('path');
module.exports = {
    // 打包起始的文件
    entry: {
        page1: ['./src/js/1.js', './src/js/2.js'],
        page2: './src/js/3.js'
    },

    // 打包后的输出配置
    output: {
        // 打包后的保存文件目录，这里需要是个绝对路径（可手动指定），
        path: path.resolve(__dirname, 'dist'),
        // 可以使用占位符自动生成出口文件名，常用占位符有[name]、[id]、[hash]、[chunkhash]
        filename: '[hash]-[name].b.js'
    }
}

2. `html-webpack-plugin` 的使用

首先我们先了解一些什么是plugin ：plugin 翻译成中文就是插件的意思，webpack提供了插件功能支持，可以方便的使用插件进行功能的扩展，webpack的plugin的配置很简单：plugins 配置项接收一个数组，数组里的每一项都是一个要使用的plugin的实例，plugin需要的参数通过构造函数传入。

2.1 安装插件

html-webpack-plugin 有一个基本功能是：根据模板文件生成对应的html代码，下面我们先安装一下它。

# 安装 html-webpack-plugin
npm install html-webpack-plugin --save-dev

2.2 单模板的基本使用：

var path = require('path');
// 引入插件
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    // 打包起始的文件
    entry: {
        page1: ['./src/js/1.js', './src/js/2.js'],
        page2: './src/js/3.js'
    },
    // 打包后的输出配置
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[hash]-[name].b.js',
        // 可以设置上线后的地址（生成的html引用的是绝对路径）
        publicPath:'http://www.baidu.com'
    },
  	// 这里是配置插件的部分
    plugins:[
        // 使用插件
        new HtmlWebpackPlugin({
            // 指定生成html使用的模板
            template:'./index.html'
        })
    ]
};

使用上面的配置我们会发现：不仅我们的代码会自动打包，同时自动生成了html代码，而且将打包生成的静态资源直接引用到html 结构中。不过，生成的js和html在同一个目录，我们实际中可能不是这样处理的，那么我们可以稍作修改：

var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: {
        page1: ['./src/js/1.js', './src/js/2.js'],
        page2: './src/js/3.js'
    },

    output: {
        path: path.resolve(__dirname, 'dist'),
        //输出的打包文件可以加个目录
        filename: 'js/[hash]-[name].b.js'
    },

    plugins:[
        new HtmlWebpackPlugin({
            template:'./index.html'
        })
    ]
};

当然了，上面的配置，打包后，我们发现生成的html文件始终叫index.html，我们其实是可以修改的，只需要在使用插件的时候配置一下filename项就行了。

plugins:[
    new HtmlWebpackPlugin({
        template:'./index.html',
        //自动生成文件名
        filename:'[hash].html',
        //需要将脚本引入标签嵌入到何处。可以是：body|head|true|false等
        inject: 'body'
    })
]

在模板中使用插件变量（选看）

这个功能类似于模板引擎的自定义标记。我们可以在模板中使用特殊的标记来访问插件中设置的变量

比如我们的插件中是这样设置的：

plugins:[
    new HtmlWebpackPlugin({
        template:'./index.html',
        filename:'[hash].html',
        inject: 'body',
        minify:{
                //自动删除注释
                removeComments:true
            },
      	// 在这里自定义了变量
        xxxx: 112233,
        yyyy: 1+2
    })
]

那么我们的html模板中可以这样使用它们：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<!--htmlWebpackPlugin注意大小写，它就叫这名字，和其它变量无关-->
<%= htmlWebpackPlugin.options.xxxx %>
<%= htmlWebpackPlugin.options.yyyy %>
<div class="xx"></div>
</body>
</html>

2.3 多模板使用

其实多模板的使用比较简单，只需要多次调用html-webpack-plugin插件即可

var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: {
        page1: ['./src/js/1.js', './src/js/2.js'],
        page2: './src/js/3.js'
    },

    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/[hash]-[name].b.js',
        publicPath:'http://www.baidu.com'
    },

    plugins:[
        new HtmlWebpackPlugin({
            template:'./index1.html',
            //自动生成名字
            filename:'index.1.html'
        }),
        new HtmlWebpackPlugin({
            template:'./index2.html',
            //自动生成名字
            filename:'index.2.html'
        })
    ]
};

不过这种打包后，所有html文件引用的都是相同的编译后的js文件，这并不是我们想要的，我们有时候需要不同的页面引入不同的编译后的文件，比如上面的配置会生成index.1.html和index.2.html两个html，同时会打包生成两个js文件，我想让index.1.html引入page1编译后的文件，index.2.html引入page2编译后的文件。怎么办呢？我们可以用该插件的chunks配置项。

2.3.1 指定生成的html文件引入编译后的文件

var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: {
        page1: ['./src/1.js', './src/2.js'],
        page2: './src/3.js'
    },

    output: {
        path: path.resolve(__dirname, 'dist'),
        //输出的打包文件可以加个目录
        filename: 'js/[hash]-[name].b.js',
    },

    plugins:[
        new HtmlWebpackPlugin({
            template:'./1.html',
            //自动生成名字
            filename:'index.1.html',
            chunks:['page1']
        }),
        new HtmlWebpackPlugin({
            template:'./2.html',
            //自动生成名字
            filename:'index.2.html',
            chunks:['page2']
        })
    ]
};