webpack简介及入门

webpack

简介

在官方文档里，webpack是一个js应用程序的静态模块打包器，当webpack处理应用程序时，它会递归地构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将这些模块打包成一个或多个bundle。
通俗地说，就是找出模块之间的依赖关系，按照一定的规则将这些模块组织合并为一个js文件。webpack认为一切都是模块，它会把所有模块合并为一个js文件，我们可能并不想要它把这些合并为一个js文件，这时我们可以通过一些规则来改变它。

基本概念

入口entry

入口起点指示webpack应该使用哪个模块来作为构建其内部依赖图的开始，进入入口起点后，webpack会找出有哪些模块和库是入口起点依赖的。

//webpack.config.js
module.exports = {
  //指定入口起点
  entry: './path/to/my/entry/file.js'
};
1
2
3
4
5

出口output

出口是告诉webpack在哪里输出以及如何命名，基本上整个应用程序结构都会被编译到你指定的输出路径的文件夹里。

//webpack.config.js
const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    //出口绝对路径 默认值./dist
    path: path.resolve(__dirname, 'dist'),
    //出口文件名
    filename: 'my-first-webpack.bundle.js'
  }
};
1
2
3
4
5
6
7
8
9
10
11
12

loader

loader让webpack能够去处理那些非js文件，loader可以将所有类型的文件转换为webpack能够处理的有效模块，然后就可以利用webpack打包处理。

//webpack.config.js
const path = require('path');

const config = {
  output: {
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      //test属性用于标识应该被对应的loader进行转换的某些文件
      //use属性表示进行转换时应该使用哪个loader
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }
};

module.exports = config;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

插件plugins

插件可以用于执行范围更广的任务，从打包优化和压缩，一直到重新定义环境中的变量，插件接口功能及其强大，可以用来处理各种各样的任务。

//webpack.config.js
//想要使用一个插件，需要require()它，然后添加到plugins数组中
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件

const config = {
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    //多数插件可以通过选项自定义，你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要new操作符创建实例
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

module.exports = config;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

指南

安装

webpack的安装分为全局安装和本地安装，推荐使用本地安装。
全局安装的webpack，在任何目录执行webpack命令都可以进行打包。本地安装的webpack必须要找到对应node_modules下的webpack命令才能执行，在使用npx或package.json的scripts时会自动帮我们寻找。

  "scripts": {
    "dev":"webpack"
  },
1
2
3

//本地安装
npm install --save-dev webpack  //安装最新版本
npm install --save-dev webpack@<version>  //安装指定版本

//如果使用webpack 4+版本 还需要安装cli
npm install --save-dev webpack-cli
1
2
3
4
5
6

//全局安装
//最新指定版本
npm install webpack webpack-cli-g
//指定版本
npm install webpack@<version> webpack-cli@<version> -g
1
2
3
4
5

入门

举个例子。
命令行参数打包：

//初始化一个npm项目并使用默认参数创建package.json文件
npm init -y

//安装指定版本的webpack和webpack-cli
//webpack是webpack核心包
//webpack-cli是命令行工具包
npm install --save-dev webpack@4.43.0 webpack-cli@3.3.12
1
2
3
4
5
6
7

a.js

import {name} from './b.js'
console.log(name)
1
2

b.js

export var name = 'yc'
1

main.html

<script src="./a.js">script>
1

如果我们在HTML中直接引入a.js，浏览器会报错，浏览器对原始的ES6模块默认引入方式不支持并且即使使用支持的方式引入也会因为本地js引入安全问题报错。
所以我们把这两个文件打包成一个js文件来解决这个问题，打包后代码里就没有这种模块化语法了。

//从a.js文件开始，按照模块引入顺序把所有代码打包到bundle.js文件里
npx webpack a.js -o bundle.js
1
2

<script src="./bundle.js"></script>
1

现在控制台就可以正常输出了。这是一个最简单的webpack打包过程，打包后的bundle.js代码目前是压缩过的。

webpack的配置文件打包：

//在文件夹下新建webpack.config.js文件
var path = require('path')
//webpack打包使用的参数
module.exports = {
    //入口文件
    entry:'./a.js',
    //打包后资源输出文件
    output: {
        //返回的是绝对路径，表示当前文件夹根目录的绝对路径
        path:path.resolve(__dirname,''),
        //输出的文件名
        filename:'bundle.js'
    },
    //打包模式 默认production表示给生产环境打包 设置none代码不会压缩
    mode:'none'
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

//webpack默认的配置文件是项目根目录下的webpack.config.js
//webpack自动寻找文件并使用配置信息进行打包
npx webpack
1
2
3

简单的项目我们使用默认的webpack.config.js文件，复杂的项目可能区分开发环境、测试环境和线上环境，会使用不同的配置文件。