「Python与算法社区」 第 309 篇原创
昨天,写了入门javascript的一篇文章:这是我的10分钟 js 入门笔记,老铁给我们的建议,js非常有用,具体请看下面:
webpack把所有文件都看做模块,webpack会理清所有文件之间的引用关系,然后打包到一起。
可以把webpack看做java,c++编译器,我们抽象不同功能到不同的文件,文件之前相互引用,但是编译器依旧能够将所有文件关系理清并编译成二进制文件。我们只需要把精力放到业务实现。同理,你可以把功能抽象到不同的JS文件中,使用ES6,ES5等,作为开发语言,webpack都能够将你的js文件编译打包成,任何浏览器都能够支持的js文件。
模块化在之前就有过相关的插件,commonjs,requriejs,这些插件都可支持模块化开发。可以说这是前端发展的一个过程,从同步模块化开发,到AMD异步模块化开发,到webpack支持同步,异步,模块化,打包等。
./dist/main.js
,可以根据需求自己定义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
在浏览器中查看
本文分享自 程序员郭震zhenguo 微信公众号,前往查看
如有侵权,请联系 cloudcommunity@tencent.com 删除。
本文参与 腾讯云自媒体同步曝光计划 ,欢迎热爱写作的你一起参与!