新手配置webpack打包js文件教程，以及webpack的常用配置说明

绝地灬酷狼 2023-10-09 18:31 9阅读 0赞

![502b43820e0fa0a1679d6dfe132178c2.png][]最近在搞chrome插件开发，想使用webpack打包js文件，因为不用webpack打包的话，就会出现源码泄露风险,,,,哈哈哈哈，所以想配置webpack打包一下。

### 环境准备 ###

初始化环境，安装webpack webpack-cli，配置webpack.config.js

初始化webpack

npm init

然后输入相关的项目名称和描述：![8b3bb008634c40b288cb0f427766cf51.png][]

完成之后，就会在项目文件夹中出现一个：package.json

![a24aa47344e84d7eafddb71da797f56f.png][]

安装webpack webpack-cli：

npm install webpack webpack-cli -D

![b7ff1d25cef94a77acf3c02153eda2c9.png][]

完成之后，会出现node\_modules文件夹和package.json里面出现：

"devDependencies": {
      "webpack": "^5.79.0",
      "webpack-cli": "^5.0.1"
    }

![470d541a83144abeac321587b9bb7544.png][]

新建配置文件 webpack.config.js

初始化后文件结构如下图所示，当然还有一些测试ts和html需要自己手动创建下：

![6e51eff61d944f5996d3d8ab95085f63.png][]

### webpack 配置 ###

配置之前我们先去package.json中添加一个运行指令![314a18c8cbb34b37b5cc2410b73bb7f7.png][]

webpack简单配置：

const HtmlWebpackPlugin = require('html-webpack-plugin');
    
    module.exports = {
        //mode 指打包模式 
        //development 指开发模式，代码未压缩
        //production 指产品模式，代码压缩
        mode: 'development',    //development and production
    
        //entry 指明入口文件，webpack 会从这个文件开始连接所有的依赖。
        entry: {
            './js/first': __dirname + '/src/first.js',
            './js/second': __dirname + '/src/second.js',
        },
    
        //output 指明出口文件， 即打包后的文件存放的位置
        output: {
            path: __dirname + '/dist',
            filename: '[name]_bundle_[hash].js',
        },
    
        //文件加载器 loader
        //loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）
        module: {
            rules: [
                ...
            ]
        },
    
        // 本地服务器配置
        devServer: {
            contentBase: './dist',  //默认本地服务器所在的根目录
            historyApiFallback: true,   //是否跳转到index.html
            inline: true,   //源文件改变时刷新页面
            port: 8084  //端口号，默认8080
        },
        
        //插件
        plugins: [
           ...
        ]
    }

把那些你用不到的配置删除掉，然后运行一下：就会出现dist目录，并且文件都被压缩了，真的很棒啊：![8dde09a72323464683a783a255243902.png][]

压缩之后小了一倍多，不错不错：

![9d0c439d7fac4cf493b2ca206f04fa56.png][]

## webpack.config.js各个模块的介绍 ##

1. mode 介绍

module.exports = {
      mode: 'production'    //或者 development
    };

解释： 通过选择 `development` 或 `production` 之中的一个，来设置 `mode` 参数，你可以启用相应模式下的 webpack 内置的优化

development 表示 开发模式，代码不会压缩（有利于断点调试）

production　表示 产品模式， 代码会进行压缩（不利于断点调试）

2. devServer介绍

module.exports = {
        // 本地服务器配置
        devServer: {
            contentBase: './dist',  //默认本地服务器所在的根目录
            historyApiFallback: true,   //是否跳转到index.html
            inline: true,   //源文件改变时刷新页面
            port: 8084  //端口号，默认8080
        },
    }

介绍： 来自 [webpack-dev-server][] 插件的 部分功能

解释： webpack-dev-server 可以开启本地服务器，便于开发

详细请查找 [DevServer | webpack 中文文档 | webpack 中文文档 | webpack 中文网][DevServer _ webpack _ _ webpack _ _ webpack]

3. module介绍

// loader设置
        module: {
            rules: [
                {
                    test: /\.(css|sass|scss)$/,
                    loaders: ['style-loader', 'css-loader']
                },
                {
                    test: /\.(jsx|js)$/,
                    use: [{
                        loader: 'babel-loader',
                        options: {
                            presets: [
                                'env', 'react', 'stage-0'
                            ]
                        }
                    }]
                },
                {
                    test: /\.xml$/,
                    loaders: ['xml-loader']
                },
                {
                    test: /\.(png|svg|jpg|gif|mp4)$/,
                    use: [{
                        loader: 'file-loader',
                        options: {
                            outputPath: './img',
                            publicPath: './img'
                        }
                    }]
                }
            ]
        },

介绍： module.loaders 允许在 webpack 配置中指定多个 loader

例如： babel-loader、style-loader、css-loader、sass-loader、file-loader等，这些都需要先 npm install

那么如何在打包时，将图片文件放置到指定文件夹中呢？

options: {
       outputPath: './img',    //指定放置目标文件的文件系统路径
       publicPath: './img'    //指定目标文件的自定义公共路径
    }

通过设置 outputPath 可以使得打包后的文件放置到指定的文件夹中（./img）

4. plugins

plugins: [
            new HtmlWebpackPlugin({ //输出html文件1
                title: '123',   //生成html文件的标题
                favicon: './favicon.png',   //生成html文件的favicon的路径
                filename: 'first.html',     //生成html文件的文件名，默认是index.html
                template: 'first.html',     //本地html文件模板的地址
                hash: true,
                chunks: ['./js/first']
            }),
            new HtmlWebpackPlugin({ //输出html文件2
                title: '123',
                favicon: './favicon.png',
                filename: 'second.html',
                template: 'second.html',
                hash: true,
                chunks: ['./js/second']
            })
        ]

*  **`hash`**：true|false，是否为所有注入的静态资源添加webpack每次编译产生的唯一hash值，添加hash形式如下所示：
    
    <table> 
     <tbody> 
      <tr> 
       <td> <p>1</p> </td> 
       <td> <p><code>&lt;script type=</code><code>"text/javascript"</code>&nbsp;<code>src=</code><code>"common.js?a3e1396b501cdd9041be"</code><code>&gt;&lt;/script&gt;</code></p> </td> 
      </tr> 
     </tbody> 
    </table>

*  **`chunks`**：允许插入到模板中的一些chunk，不配置此项默认会将`entry`中所有的thunk注入到模板中。在配置多个页面时，每个页面注入的thunk应该是不相同的，需要通过该配置为不同页面注入不同的thunk；  
    此处的chunks和 前面的 entry 入口文件 对
 *      entry: {
        
            './js/first': __dirname + '/src/first.js',
        
            './js/second': __dirname + '/src/second.js',
        
        },

5. output

//output 指明出口文件， 即打包后的文件存放的位置

output: {
            path: __dirname + '/dist',
            filename: '[name]_bundle_[hash].js',
        },

介绍： output 模块指明 项目打包的出口文件

path：表示出口文件的路径

filename：表示出口js文件的命名，此处的\[name\]对应 entry入口文件的名称，\[hash\]在每次编译时产生唯一的hash值

6. entry

//entry 指明入口文件，webpack 会从这个文件开始连接所有的依赖。
        entry: {
            './js/first': __dirname + '/src/first.js',
            './js/second': __dirname + '/src/second.js',
        },

介绍： entry 模块 指明 项目的入口js文件， 可以有多个

'./js/first' ： 是指 文件打包后的路径（放置在js文件夹中），和 output 模块中的 **\[name\]** 以及 HtmlWebpackPlugin 插件 中的 **chunk** 对应

最后，完整webpack.config.js代码

const HtmlWebpackPlugin = require('html-webpack-plugin');
    
    module.exports = {
        // 模式设置
        mode: 'development',    //development and production
    
        // 入口设置
        // 使用babel-polyfill 可以兼容低版本浏览器（不支持es6）
        entry: {
            './js/first': ['babel-polyfill', __dirname + '/src/first.js'],  
            './js/second': ['babel-polyfill', __dirname + '/src/second.js'],
        },
    
        // 出口设置
        output: {
            path: __dirname + '/dist',
            filename: '[name]_bundle_[hash].js',
        },
    
        // loader设置
        module: {
            rules: [
                {
                    test: /\.(css|sass|scss)$/,
                    loaders: ['style-loader', 'css-loader']
                },
                {
                    test: /\.(jsx|js)$/,
                    use: [{
                        loader: 'babel-loader',
                        options: {
                            presets: [
                                'env', 'react', 'stage-0'
                            ]
                        }
                    }]
                },
                {
                    test: /\.xml$/,
                    loaders: ['xml-loader']
                },
                {
                    test: /\.(png|svg|jpg|gif|mp4)$/,
                    use: [{
                        loader: 'file-loader',
                        options: {
                            outputPath: './img',
                            publicPath: './img'
                        }
                    }]
                }
            ]
        },
       
        // 本地服务器 webpack-dev-server插件，开发中server，便于开发，可以热加载
        devServer: {
            contentBase: './dist',  //默认本地服务器所在的根目录
            historyApiFallback: true,   //是否跳转到index.html
            inline: true,   //源文件改变时刷新页面
            port: 8084  //端口号，默认8080
        },
    
        // 插件设置
        // HtmlWebpackPlugin 可以在开发中按照模板生成 html文件
        plugins: [
            new HtmlWebpackPlugin({ //输出html文件1
                title: '123',   //生成html文件的标题
                favicon: './favicon.png',   //生成html文件的favicon的路径
                filename: 'first.html',     //生成html文件的文件名，默认是index.html
                template: 'first.html',     //本地html文件模板的地址
                hash: true,
                chunks: ['./js/first']
            }),
            new HtmlWebpackPlugin({ //输出html文件2
                title: '123',
                favicon: './favicon.png',
                filename: 'second.html',
                template: 'second.html',
                hash: true,
                chunks: ['./js/second']
            })
        ]
    }
    
    webpack.config.js完整代码

[502b43820e0fa0a1679d6dfe132178c2.png]: https://img-blog.csdnimg.cn/img_convert/502b43820e0fa0a1679d6dfe132178c2.png
[8b3bb008634c40b288cb0f427766cf51.png]: https://img-blog.csdnimg.cn/8b3bb008634c40b288cb0f427766cf51.png
[a24aa47344e84d7eafddb71da797f56f.png]: https://img-blog.csdnimg.cn/a24aa47344e84d7eafddb71da797f56f.png
[b7ff1d25cef94a77acf3c02153eda2c9.png]: https://img-blog.csdnimg.cn/b7ff1d25cef94a77acf3c02153eda2c9.png
[470d541a83144abeac321587b9bb7544.png]: https://img-blog.csdnimg.cn/470d541a83144abeac321587b9bb7544.png
[6e51eff61d944f5996d3d8ab95085f63.png]: https://img-blog.csdnimg.cn/6e51eff61d944f5996d3d8ab95085f63.png
[314a18c8cbb34b37b5cc2410b73bb7f7.png]: https://img-blog.csdnimg.cn/314a18c8cbb34b37b5cc2410b73bb7f7.png
[8dde09a72323464683a783a255243902.png]: https://img-blog.csdnimg.cn/8dde09a72323464683a783a255243902.png
[9d0c439d7fac4cf493b2ca206f04fa56.png]: https://img-blog.csdnimg.cn/9d0c439d7fac4cf493b2ca206f04fa56.png
[webpack-dev-server]: https://github.com/webpack/webpack-dev-server
[DevServer _ webpack _ _ webpack _ _ webpack]: https://www.webpackjs.com/configuration/dev-server/