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的打包入口。
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