webpack 安装和配置

安装

局部安装（推荐）

npm init -y # 初始化 npm 配置文件
npm install --save-dev webpack # 安装核心库
npm install --save-dev webpack-cli # 安装命令行工具

# 安装指定版本
npm i -D [email protected] [email protected] [email protected]

全局安装（不推荐，所有项目都使用同一版本，可能造成打包失败）

# 安装最新版本
npm i -D webpack webpack-cli -g

# 版本
webpack -v

# 卸载
npm uninstall webpack-cli -g

构建

测试代码 src/index.js ，构建后会产生 dis/main.js

console.log('test');

构建模式 mode=production, 默认开启代码压缩插件

方式一，使用 npx 在当前项目的 node_modules 找 webpack

npx webpack

方式二，在 package.json 中的 scripts 添加 "dev": "webpack"，命令执行

npm run dev

配置

webpack 4.0 的 0 配置（默认配置） webpack.config.js

const path = require('path');

// 默认配置
module.exports = {
  entry: './src/index.js',
  // 入口 单页面应用（默认） 多页面应用
  output: {
    path: path.resolve(__dirname, './dist'), // 输出的文件目录，必须是绝对路径
    filename: 'main.js', // 输出的文件名称
  },
};

一般的话，还是需要自定义配置，在 package.json 中的 scripts

"dev": "webpack --config ./webapck.dev.js"

构建过程中会生产 Chunks, Chunk

Hash: bf8f71f17d4a03503396
Version: webpack 4.46.0
Time: 67ms
Built at: 2021/12/28 下午2:14:27
   Asset      Size  Chunks             Chunk Names
    a.js  3.76 KiB       a  [emitted]  a
index.js  3.79 KiB   index  [emitted]  index
Entrypoint index = index.js
Entrypoint a = a.js
[./src/a.js] 19 bytes {a} [built]
[./src/index.js] 23 bytes {index} [built]

一个 bundle 对应一个 chunk; 对应一个 module 或多个

module 基于 nodejs, 一切皆模块，比如 js,css,img
Chunk 代码片段，可以由一个模块或者多个模块构成，Chunks 代码片段组
bundle 打包编译后输出的文件

webpack 默认只支持 .js 和 .json 类型的模块，所以需要使用 loader

loader 让 webpack 能够解析其他文件类型，一个 loader 只做一件事情，多个 loader 情况下，执行顺序是自后往前的

比如 css 模块构建，建议安装样式 loader，如 css-loader, style-loader 等，在 webpack.config.js 中添加支持

module.exports = {
  // loader
  module: {
    rules: [
      //...
      {
        test: /\.css$/,
        // 多个 loader 情况下，执行顺序是自后往前的
        use: ['style-loader', 'css-loader'],
      },
      //...
    ],
  },
};

当然也可以使用 plugin 扩展 webpack 功能

plugin 让 webpack 能够识别更多文件类型，也通过插件控制构建流程，从而执行一些特殊的任务

比如使用 html 模板，可以安装 html-webpack-plugin 插件，在 webpack.config.js 中添加支持

const htmlWebpackPlugin = require('html-webpack-plugin');

// 默认配置
module.exports = {
  // plugin
  plugins: [
    //...
    new htmlWebpackPlugin({
      template: './src/index.html',
      filename: 'index.html',
    }),
    //...
  ],
};

这样可以通过 src/index.html 生成 dist/index.html, 并自动添加 js 文件

html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <script defer src="index.js"></script>
    <script defer src="a.js"></script>
  </head>
  <body>
    <div id="app">test</div>
  </body>
</html>

webpack 安装和配置 ​

安装 ​

构建 ​

配置 ​

webpack 安装和配置

安装

构建

配置