1.1 webpack是什么
webpack是一种前端资源构建工具,一个静态模块打包器(module bundler)。
在webpack看来,前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理。
它根据模块依赖关系进行静态分析,打包生成对应的静态资源(bundle)。
1.2 webpack的5个核心概念
1.2.1 Entry
入口(Entry)指示webpack以哪个文件为入口起点开始打包,分析构建内部依赖图。
1.2.2 Output
输出(Output)指示webpack打包后的资源bundles输出到哪里去,以及如何命名。
1.2.3 Loader
Loader 让webpack能够去处理那些非JavaScript文件(webpack自身只理解JavaScript)
1.2.4 Plugins
插件(Plugins)可以用于执行范围更广的任务。插件的范围包括,从打包优化和压缩,一直到重新定义环境中的变量等。
1.2.5 Mode
模式(Mode)指示webpack使用相应模式的匹配
选项 | 描述 | 特点 |
---|---|---|
development | 会将DefinePlugin中process.evn.NODE_ENV的值设置为development。启用NamedChunksPlugin和NamedModulesPlugin. | 能让代码本地调试运行的环境 |
production | 会将DefinePlugin中process.envNode_ENV的值设置为production。启用FlagDependencyUsagePlugin,FlagIncludedChunksPlugin,ModuleConcatenationPlugin,NoemitOnErrorsPlugin,OccurrenceOrderPlugin,SideEffectsFlagPlugin和TeserPlugin。 | 能让代码优化上线运行的环境 |
2 webpack 初体验
2.1初始化配置
1, 初始化package.json
输入指令:
npm init
2,下载并安装webpack
输入指令:
npm install webpack webpack-cli -g
npm install webpack webpack-cli -D
2.2 编译打包应用
1,创建文件
2,运行指令
开发环境指令:webpack src/js/index.js -o build/js/built.js --mode=development
功能:webpack能够编译打包js和json文件,并且能够将es6的模块化语法转换成浏览器能够识别的语法。
生产环境指令: webpack src/js/index.js -o build/js/built.js --mode=production
功能:在开发配置功能上多一个功能,压缩代码。
3,结论
webpack能够编译打包js和json文件。
能将es6的模块化语法转换成浏览器能识别的语法。
能压缩代码
4.问题
不能编译打包css,img等文件。
不能将js的es6基本语法转化为es5以下语法。
(解决以上问题,webpack有其他处理方式。)
webpack初体验 代码如下:
package.json
{
"name": "webpack_test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"jquery": "^3.4.1"
}
}
index.js
/*
index.js: webpack入口起点文件
1. 运行指令:
开发环境:webpack ./src/index.js -o ./build/built.js --mode=development
webpack会以 ./src/index.js 为入口文件开始打包,打包后输出到 ./build/built.js
整体打包环境,是开发环境
生产环境:webpack ./src/index.js -o ./build/built.js --mode=production
webpack会以 ./src/index.js 为入口文件开始打包,打包后输出到 ./build/built.js
整体打包环境,是生产环境
2. 结论:
1. webpack能处理js/json资源,不能处理css/img等其他资源
2. 生产环境和开发环境将ES6模块化编译成浏览器能识别的模块化~
3. 生产环境比开发环境多一个压缩js代码。
*/
// import './index.css';
import data from './data.json';
console.log(data);
function add(x, y) {
return x + y;
}
console.log(add(1, 2));
data.json
{
"name": "jack",
"age": 18
}
index.css
html,
body {
height: 100%;
background-color: pink;
}