Webpack 4.x入门

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

1.webpack安装

1.1 使用nvm安装NodeJS

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

1brew install nvm
2
3mkdir ~/.nvm
4
5vi ~/bash_profile
6export NVM_DIR="$HOME/.nvm"
7  [ -s "/usr/local/opt/nvm/nvm.sh" ] && . "/usr/local/opt/nvm/nvm.sh"  # This loads nvm
8  [ -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:

1nvm install 10.16.0
2
3nvm use 10.16.0
4Now using node v10.16.0 (npm v6.9.0)
5
6node -v
7v10.16.0

1.2 使用npm安装nrm

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

nrm的安装命令如下：

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

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

1nrm ls
2
3  npm ---- https://registry.npmjs.org/
4  cnpm --- http://r.cnpmjs.org/
5* taobao - https://registry.npm.taobao.org/
6  nj ----- https://registry.nodejitsu.com/
7  npmMirror  https://skimdb.npmjs.com/registry/
8  edunpm - http://registry.enpmjs.org/

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

1npm use taobao

1.3 安装webpack

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

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

安装webpack和webpack-cli：

1npm install webpack webpack-cli --save-dev
24.35.0

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

 1const path = require('path')
 2
 3module.exports = {
 4    mode: 'production',
 5    entry: './src/index.js',
 6    output: {
 7        path: path.resolve(__dirname, 'dist'),
 8        filename: 'bundle.js'
 9    }
10}

在webpack.config.js中entry用来指定webpack的打包入口，webpack根据入口文件生成打包时的依赖图

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

foo.js内容如下：

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

index.js内容如下：

1import { foo } from './foo'
2
3alert(foo())

编辑package.json，在npm的scripts中加入build脚本：

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

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

2.webpack的基本概念

2.1 入口点（entry points)

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

Entry Points

2.2 输出(output)

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

Output

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

文章目录