为什么要用构建工具
- 转换 es6 语法
- 转换 JSX
- CSS 前缀补全/预处理器
- 压缩混淆
- 图片压缩
为什么选择 webpack
- 社区的生态丰富
- 配置灵活和插件
- 官方更新迭代速度快
| webpack | grunt | gulp | |
|---|---|---|---|
| 定义 | modulebundler | task runner | task runner |
| 语言 | javascript | node.js | node.js |
| 发布时间 | 2012.03 | 2012.06 | 2013.07 |
| github statrs | 40766 | 11796 | 29427 |
初识 webpack： 配置文件
- webpack 默认配置文件： webpack.config.js
- 可以通过 webpack --config 制定配置的文件
初识 webpack： webpack 配置组成
mudule.exports = {
entry: './src/index.js', ------ 打包的入口文件
output: './dist/main.js', ------ 打包的输出
mode: 'production', ------ 环境
module: [
rlues: [ --------------- Loader配置
{test:/\.txt$/, use: 'raw-loader'}
]
]
},
plugins: [ -------------------- 插件配置
new HtmlwebpackPlugin({
template: './src/index.html'
})
]
环境搭建： 安装 node.js 和 npm
安装 nvm
-
通过 curl 安装：curl -o- raw.githubusercontent.com/nvm-sh/nvm/… | bash
-
通过 wget 安装：wget -qO- raw.githubusercontent.com/nvm-sh/nvm/… | bash
安装 Node.js 和 NPM
-
nvm install v10.15.3
-
检查是否安装成功：node -v, npm -v
环境搭建： 安装 webpack 和 webpack-cli
创建空目录和 package.json
- mkdir my-project
- cd my-project
- npm init -y
安装 webpack 和 webpack-cli
- npm install webpack webpack-cli --save-dev
- 检查 是否 安装成功 ： ./node_modules/.bin/webpack -v
第一次体验 webpack
const path = require('path');
mudule.exports = {
mode:'production',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
}
}
webpack脚本
构建结果：
<! doctype html>
<html>
<head>
<title>webpack 例子</title>
</head>
<body>
<script src="dist/bundle.js"></script>
</body>
</html>
通过 npm script 运行 webpack
{
'name': 'hello-webpack',
'version': '1.0.0',
'description': 'hello webpack',
'main': 'index.js',
'srcipts': {
'bulid': 'webpack'
},
'keywords': [],
'author':'',
'license':'ISC'
}
通过 npm run build 运行构建
原理： 模块局部安装会在 node_modules/.bin 目录创建软链接
