您的位置: 首页  >  文章  >  Webpack4一行代码实现打包

Webpack4一行代码实现打包

分类: 文章 • 2023-12-06 12:09:10

本文主要讲解——

  • Webpack如何一行代码实现打包？
  • 浅析打包输出内容
  • 自定义打包命令
  • 自定义配置文件
  • 设置打包文件的代码格式

Webpack4一行代码实现打包

安装Webpack4

请戳这里——详细解读Webpack的安装

官方内置的webpack.config.js

webpack.config.js是Webpack的默认配置文件。哪些文件需要打包，打包成什么样，都可以通过它来配置。我们安装完Webpack之后，文件夹里并没有出现webpack.config.js文件。这个时候依然可以对某一个文件进行打包，因为Webpack4官方为我们内置了默认配置文件。
文件用例目录如下——

  • Webpack-demo
    • index.html
    • index.js
    • header.js
    • common.js
    • sidebar.js
    • package.json

各个文件的具体内容，请戳这里——测试用例
git bash执行

npx webpack index.js

文件夹中出现dist目录以及dist/main.js文件，打包成功。

但是假如要同时打包多个文件，就需要多次输入命令，比较麻烦。有没有办法一行代码实现所有的打包操作呢？此时webpack-demo文件夹中还没有webpack.config.js文件，我们尝试在git bash 输入

npx webpack

却出现下面的报错
Webpack4一行代码实现打包

配置Webpack.config.js

要解除上面的报错，需要生成并填写webpack的默认配置文件。
git bash 生成webpack.config.js，输入

touch webpack.config.js

文件目录如下

  • webpack-demo
    • index.html
    • src
      • header.js
      • content.js
      • sidebar.js
      • index.js
    • package.json
    • webpack.config.js

webpack.config.js填入下面的内容

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
}

简单解释一下——
这里要引入NodeJS的path模块，用于配置output部分的path。entry表示打包的入口文件，filename带包打包生成文件的文件名。path表示打包生成文件的文件路径，这里的__dirname代表当前目录webpack-demo。
然后，配置完webpack.config.js，git bash中再一次运行

npx webpack

git bash 显示打包成功。
Webpack4一行代码实现打包
文件夹中出现了dist文件夹，以及dist/bundle.js文件。

  • webpack-demo
    • dist
      • bundle.js
    • src
      • header.js
      • content.js
      • sidebar.js
      • index.js
    • index.html
    • package.json
    • webpack.config.js

在index.html中导入

<script src='./dist/bundle.js'></script>

打开页面，发现导入成功。

浅析打包输出内容

Webpack4一行代码实现打包
Hash代表哈希值，Version指的是Webpack的版本，Time是Webpack的打包时间。

Asset代表打包出来的文件bundle.js，size代表bundle.js的大小。

Chunks，如果同时打包出很多文件，Chunks将代表不同文件的ID，如果bundle.js与其他打包文件有关联，其他关联文件的ID也会被放在bundle.js的Chunks字段中。Chunk Names和Chunk基本没有太大的区别。

自定义打包命令

webpack的默认启动方式是npx webpack，我们也可以自定义启动方式，打开文件夹中的package.json文件，配置其中的script部分

"scripts": {
    "bundle": "webpack"
  },

这样，在git bash 输入，依然可以正常打包。

npm run bundle

自定义配置文件

webpack默认配置文件是webpack.config.js，我们也可以自定义配置文件。比如我想让webpackconfig.js做配置文件，生成并且按照上述方法填写完webpackconfig.js后，只需要在git bash中输入

npx webpack –config webpackconfig.js

依然可以正常打包。

设置打包文件的代码格式

虽然刚才的npx webpack显示打包成功，但是却有一行报错。报错显示

The ‘mode’ option has not been set, webpack will fallback to ‘production’ for this value. Set ‘mode’ option to ‘development’ or ‘production’ to enable defaults for each environment.

这是因为没有设置mode参数引起的，于是我们添加mode参数。

const path = require('path');
module.exports = {
    mode: 'production',
    entry: {
        main:'./src/index.js'
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
}

git bash再次npx webpack，没有报错成功编译，打开dist里面的bundle.js文件，却发现打包后的代码全部挤在一行。
Webpack4一行代码实现打包
于是修改mode的参数，将production改成development，再次git bash输入
npx webpack,重新打包。bundle.js中的代码恢复正常。
Webpack4一行代码实现打包

以上，是Webpack的基本配置方法。

相关推荐