webpack（一）介绍及安装
2019-09-14 本文已影响0人
OrochiZ
webpack是一个前端资源加载打包工具，它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源
webpack
webpack4新特性
1.mode属性
webpack需要设置mode属性，可以是development（开发）或者production（生产）
webpack4.x针对开发模式提供的特性
- 浏览器调试工具
- 注释，开发阶段的详细错误日志和提示
- 快速和优化的增量构建机制
webpack针对生产模式提供的特性
- 开启所有的代码优化
- 更小的bundle体积
- 去除只在开发阶段运行的代码
- scope hoisting和tree-shaking
注意点：当使用webpack4时，确保使用v8.94以上的node.js的版本，因为webpack4使用了很多js新的语法，他们在新版本的v8里面经过了优化
2.安装
webpack4.x中分离了webpack-cli和webpack
3.x版本中全局安装webpack的方法为（现在最新的是4.x，想安装3.x需要 加上版本号）
cnpm i webpack@3.6.0 -g
4.x版本中全局安装webpack-cli的方法为
cnpm i webpack-cli -g
除了全局安装，在项目中也要重新安装一份本地的webpack
webpack3.x（现在最新的是4.x，想安装3.x需要 加上版本号）
cnpm i webpack@3.6.0 -D
webpack4.x
cnpm i webpack webpack-cli -D
查看webpack的版本号
webpack -v
3.基本使用
webpack本身可以加载js和json模块
命令行：webpack 输入文件.js
// math.js
const foo = function(x) {
return x*x
}
export default foo
// data.json
{
"name":"kyo",
"age":18
}
// index.js
import foo from './math.js'
import data from './data.json'
console.log(foo(6))
console.log(JSON.stringify(data))
使用webpack将这两个文件打包成一个文件，初次使用需要设置mode（设置成生产模式，生成的打包文件体积会更小）
webpack --mode development index.js
完成后会在当前目录下生成dist/main.js 这个main.js就是打包好的文件
也可以自定义生成的文件名
webpack --mode development index.js -o output.js
完成后当前目录下会生成output.js
使用打包好的main.js
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./dist/main.js"></script>
</head>
<body>
</body>
</html>
可以在控制台看到
36
{"name":"kyo","age":18}
