DaMeng

webpack 入门

发表于 更新于 分类于 ，

概念

webpack 是前端模块化打包工具。

对于webpack 来说，万物（js|img|css|sass|less..）皆模块，webpack 会根据模块依赖关系进行静态分析，将所有模块打包生成对应的静态资源（bundle）。

特点

1、通过模块化解决了全局污染、命名冲突、依赖管理混乱问题

2、兼容 AMD CMD

3、适合大型项目

4、与 react、vue 有很好的契合度

安装

1、node（通过 node 官网下载安装）

2、通过 npm 命令初始化项目

1
npm init -y

3、安装 webpack 和 webpack-cli

1
npm install webpack webpack-cli -D

组成

entry

通过 entry 来配置 webpack 的入口文件，webpack 从 entry 开始分析模块间的依赖关系。

webpack 将存在依赖关系的模块，打包为 trunk（代码分片），trunk 为代码在打包过程中的中间状态。

由 trunk 最终产生的打包产物叫做bundle。

1
2
3
module.exports = {
  entry: './path/to/my/entry/file.js'
};

output

通过 output 来配置 webpack 的输出文件夹和输出文件名称。默认输出到文件夹 ./dist，默认输出的文件为 ./dist/main.js。

1
2
3
4
5
6
7
8
9
10
11
const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
      /*path 和 filename配置共同决定了bundles的输出地址*/
      //__dirname 为当前 webpack.config.js 所在文件夹名称
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  }
};

loader

webpack 只能识别 js 和 json 文件，可以通过 loader 将 webpack 不认识的资源转换为 webpack 可以识别的。

使用 loader 时，需要先安装，然后配置到 module.rules 中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const path = require('path');

module.exports = {
  output: {
    filename: 'my-first-webpack.bundle.js'
  },
    //loader 需要定义在module.rules 中
  module: {
    rules: [
      { 
          //test 用于指定需要转换的文件
        test: /\.txt$/, 
          //use 用于指定使用哪个 loader 转换 test 指定的文件
        use: 'raw-loader' 
      }
    ]
  }
};

plugins

plugin 可于执行更广泛的任务，如 打包优化、资源管理、注入环境变量。

使用方法：

  1. 外部插件需要使用 npm 安装
  2. 使用 require 来引用
  3. 通过 new 创建插件实例，将其添加到 plugins 数组中
  4. 可根据不同目的多次使用同一个插件
  5. 使用对象给插件实例传递参数
1
2
3
4
5
6
7
8
9
10
11
12
13
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件

module.exports = {
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

mode

可以设置为 development、productions、none 中的一个，webpack 会根据不同的配置进行不同的默认优化。默认值为 production。

1
2
3
module.exports = {
  mode: 'production'
};

浏览器兼容性

webpack 默认支持 es5 标准（不支持 ie8 及以下）。如果想要支持旧版本浏览器，在使用这些表达式之前，需要 提前加载 polyfill。

参考：

https://www.cnblogs.com/skychx/p/webpack-module-chunk-bundle.html