webpack4.43 - 创建项目,打包第一个js文件
一、你需要准备什么
- webpack v4.41.5
- Node 12.14.0 LTS
- 开发环境Hbuilderx
- webpack 用于编译 JavaScript 模块。一旦完成安装，你就可以通过 webpack 的 CLI 或 API 与其配合交互。如果你还不熟悉 webpack，请阅读webpack4.x - 初始webpack，了解为什么你要使用 webpack，而不是社区中的其他工具。
二.基本安装
初始化 npm
npm init -y
F:\web\001js_learn\jQuery\06_commonjs>npm init -y Wrote to F:\web\001js_learn\jQuery\06_commonjs\package.json: { "name": "06_commonjs", "version": "1.0.0", "description": "", "main": "main.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC" }npm install --save-dev webpack
- 接着安装 webpack-cli（此工具用于在命令行中运行 webpack）;
- npm install --save-dev webpack-cli
截止目前,我们就完成了webpack的本地安装,我们来看看我们的项目接口;
我们发现了3个不是我们创建的目录/文件,其中package.json是我们初始化npm是自动生成,另外两个使我们本地安装webpack时自动生成;
三.打包js文件
接下来,我们随着一个小案例,来学习如何使用webpack打包js文件;
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script src="bundle.js">
</script>
</body>
</html>main.js
1 var s = require(‘./s‘); 2 console.log(s.s_circle(10));
math.js
var PI = 3.14;
function multile(num1,num2){
return num1 * num2;
}
function square(n){
return n * n;
}
module.exports = {
PI: PI,
multile:multile,
square:square
}s.js
var m =require(‘./math‘);
function circle(r){
return m.multile(m.square(r),m.PI);
}
module.exports = {
s_circle:circle
}通过webpack打包就可以
webpack app.js --output-filename bundle.js --output-path . --mode development
生成了文件bundle.js
相关推荐
gufudhn 2020-06-06
不知道该写啥QAQ 2020-11-12
webfullStack 2020-11-09
Yvettre 2020-09-15
想做大牛的蜗牛 2020-10-30
gaojie0 2020-09-11
SelinaChan 2020-08-14
不知道该写啥QAQ 2020-08-09
gloria0 2020-08-09
不知道该写啥QAQ 2020-08-02
hline 2020-07-29
SelinaChan 2020-07-28
wangdianyong 2020-07-23
webpackvuees 2020-07-23
yqoxygen 2020-07-20
不知道该写啥QAQ 2020-07-18
waterv 2020-07-18