webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler)。

1.webpack安装

1.1 使用nvm安装NodeJS

首先安装nvm,nvm是一个NodeJS多版本管理工具。nvm管理的多个node版本位于~/.nvm路径下。 下面使用homebrew在Mac OS下安装nvm。

1
2
3
4
5
6
7
8
brew install nvm

mkdir ~/.nvm

vi ~/bash_profile
export NVM_DIR="$HOME/.nvm"
  [ -s "/usr/local/opt/nvm/nvm.sh" ] && . "/usr/local/opt/nvm/nvm.sh"  # This loads nvm
  [ -s "/usr/local/opt/nvm/etc/bash_completion" ] && . "/usr/local/opt/nvm/etc/bash_completion"  # This loads nvm bash_completion

下面使用nvm安装NodeJS 10.16.0:

1
2
3
4
5
6
7
nvm install 10.16.0

nvm use 10.16.0
Now using node v10.16.0 (npm v6.9.0)

node -v
v10.16.0

1.2 使用npm安装nrm

nrm是一个npm源管理器,使用nrm可以轻松的在不同的npm源之间切换,使用nrm可以在国内的网络环境中轻松切换最快的npm源。

nrm的安装命令如下:

1
npm --registry https://registry.npm.taobao.org install nrm -g

安装成功后可以使用nrm ls查看内置的npm源:

1
2
3
4
5
6
7
8
nrm ls

  npm ---- https://registry.npmjs.org/
  cnpm --- http://r.cnpmjs.org/
* taobao - https://registry.npm.taobao.org/
  nj ----- https://registry.nodejitsu.com/
  npmMirror  https://skimdb.npmjs.com/registry/
  edunpm - http://registry.enpmjs.org/

使用nrm use xxx命令来切换不同的源:

1
npm use taobao

1.3 安装webpack

使用npm init初始一个前端工程。

1
2
3
mkdir my-project
cd my-project
npm init -y

安装webpack和webpack-cli:

1
2
npm install webpack webpack-cli --save-dev
4.35.0

在my-project目录中创建webpack的配置文件webpack.config.js

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

module.exports = {
    mode: 'production',
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    }
}
  • 在webpack.config.js中entry用来指定webpack的打包入口,webpack根据入口文件生成打包时的依赖图

在my-project目录中创建源码目录src,在src下创建源码文件index.js和foo.js。

foo.js内容如下:

1
2
3
export function foo() {
    return 'foo'
}

index.js内容如下:

1
2
3
import { foo } from './foo'

alert(foo())

编辑package.json,在npm的scripts中加入build脚本:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
{
  "name": "my-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.35.0",
    "webpack-cli": "^3.3.4"
  }
}

my-project目录中运行npm run build可进行构建打包

2.webpack的基本概念

2.1 入口点(entry points)

在webpack.config.js中entry用来指定webpack的打包入口。

2.2 输出(output)

output用来指定webpack打包的输出,即如何将编译后的文件输出到磁盘

2.3 loader

webpack默认只支持js和json两种文件类型,可以通过loader实现对其他文件(如css, scss, lesss)的支持并将它们转换成有效的模块添加到依赖图中。loader本身是一个处理函数,将源文件作为参数并返回转换后的结果。

  • babel-loader - 转换ES6、ES7
  • css-loader - css文件的加载和解析
  • less-loader - 将less转换成css
  • file-loader - 进行图片、字体的打包
  • raw-loader - 将文件以字符串的形式导入
  • thread-loader - 多进程打包JS和CSS

  • Loaders