初识webpack
webpack把所有文件都看做模块,webpack会理清所有文件之间的引用关系,然后打包到一起。
可以把webpack看做java,c++编译器,我们抽象不同功能到不同的文件,文件之前相互引用,但是编译器依旧能够将所有文件关系理清并编译成二进制文件。我们只需要把精力放到业务实现。同理,你可以把功能抽象到不同的JS文件中,使用ES6,ES5等,作为开发语言,webpack都能够将你的js文件编译打包成,任何浏览器都能够支持的js文件。
为什么要使用webpack?
- 随着前端不断发展,前端功能、逻辑越来越复杂,需要引入工程化思维来管理前端项目。
- js插件越来越来,每实现一个功能都要去相应的网站下载并引用到html页面中,页面非常臃肿,而且好要梳理好插件之间的依赖前后关系,使用webpack结合npm,自动下载功能插件并附带相应的依赖包。
模块化在之前就有过相关的插件,commonjs,requriejs,这些插件都可支持模块化开发。可以说这是前端发展的一个过程,从同步模块化开发,到AMD异步模块化开发,到webpack支持同步,异步,模块化,打包等。
webpack主要的概念
- Entry :项目的主要入口,也是一个js模块文件,相当于其他开发语言中的Main 函数,webpack通过这entry point file 找到所有与它有直接或者间接联系的模块文件。
- Output: webpack编译打包后的输出口,默认情况下输出
./dist/main.js
,可以根据需求自己定义 - loaders:默认情况下,webpack只能够识别javascript与Json文件。使用loaders可以将css样式文件也一起打包成束。ES6已经逐渐成为前端javascript标准,但是依旧有些浏览器不支持ES6,通过loaders可以将ES6转成ES5。
- Plugins:可以说是对loaders的补充,它提供了更多的解决方案,比如将webpack打包的束最小化与优化
- Mode:一共有三种, development ,production ,none;之间的区别可以查看:Model configuration page.
webpack实践
npm是一个js包管理器,主要功能跟Java的Maven或者Python的pip比较像,这里不做主要介绍。
mkdir webpack_learn
cd webpack_learn
npm init -y
(base) ➜ webpack_learn npm init -y
Wrote to /Users/penzhu/Desktop/webpack_learn/package.json:
{
"name": "webpack_learn",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack --mode development",
"build": "webpack --mode production"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.41.2",
"webpack-cli": "^3.3.9"
},
"dependencies": {},
"description": ""
}
webpack可以安装到本地或者全局,这里将webpack安装到本地。
npm install webpack webpack-cli --save-dev
后面npm下载的包,都会在node_models文件夹下。
将webpack简单的运行命令,添加到npm中,打开package.json,修改scripts部分如下:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack --mode development",
"build": "webpack --mode production"
},
配置成功后,就可以直接用npm run dev or build来执行webpack命令。
在src文件夹下新建一个index.js文件
添加下面内容
alert("Hi , Welcome to learn webpack")
注意:index.js文件名称是webpack默认的entry文件,如果需要自定义需要配置webpack.config.js文件
执行命令
(base) npm run dev
> webpack_learn@1.0.0 dev /Users/penzhu/Desktop/webpack_learn
> webpack --mode development
Hash: 59b7b1c9078eca56d3d6
Version: webpack 4.41.2
Time: 58ms
Built at: 10/17/2019 10:45:10 AM
Asset Size Chunks Chunk Names
main.js 3.81 KiB main [emitted] main
Entrypoint main = main.js
[./src/index.js] 38 bytes {main} [built]
(base) ➜ src
(base) ➜ webpack_learn ll
total 304
drwxr-xr-x 8 penzhu staff 256 Oct 17 10:45 ./
drwx------+ 33 penzhu staff 1056 Oct 17 08:36 ../
-rw-r--r--@ 1 penzhu staff 6148 Oct 17 10:32 .DS_Store
drwxr-xr-x 3 penzhu staff 96 Oct 17 10:45 dist/
drwxr-xr-x 317 penzhu staff 10144 Oct 17 10:27 node_modules/
-rw-r--r--@ 1 penzhu staff 143136 Oct 17 10:27 package-lock.json
-rw-r--r--@ 1 penzhu staff 392 Oct 17 10:37 package.json
drwxr-xr-x 3 penzhu staff 96 Oct 17 10:37 src/
(base) ➜ webpack_learn ls dist
main.js
查看打包编译后的main.js内容
/***/ "./src/index.js":
/*!**********************!*\
!*** ./src/index.js ***!
\**********************/
/*! no static exports found */
/***/ (function(module, exports) {
eval("alert(\"Hi , Welcome to learn webpack\")\n\n//# sourceURL=webpack:///./src/index.js?");
/***/ })
/******/ });
在输出目录./dist
下,新建一个index.html文件来引用mian.js看一下效果。
<!doctype html>
<html>
<head>
<title>Getting Started</title>
</head>
<body>
<script src="main.js"></script>
</body>
</html>
使用npm+webpack 引入echarts
(base) ➜ webpack_learn npm install echarts
npm WARN webpack_learn@1.0.0 No description
npm WARN webpack_learn@1.0.0 No repository field.
+ echarts@4.4.0
added 2 packages and audited 6791 packages in 4.297s
found 0 vulnerabilities
新建一个bar.js组件
var echarts = require('echarts');
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
});
修改重命名index.js为app.js
alert("Hi , Welcome to learn webpack")
import "./bar"
新建webpack.config.js
const path = require('path');
module.exports = {
entry: './src/app.js',
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
(base) ➜ webpack_learn npm run dev
> webpack_learn@1.0.0 dev /Users/penzhu/Desktop/webpack_learn
> webpack --mode development
Hash: e5c6e0df67e1871d303e
Version: webpack 4.41.2
Time: 2461ms
Built at: 10/17/2019 2:57:25 PM
Asset Size Chunks Chunk Names
main.bundle.js 8.34 MiB main [emitted] main
Entrypoint main = main.bundle.js
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {main} [built]
[./src/app.js] 162 bytes {main} [built]
[./src/component.js] 222 bytes {main} [built]
[./src/line.js] 449 bytes {main} [built]
+ 495 hidden modules
在浏览器中查看