您当前的位置： 首页 > 学无止境 > JS经典实例 网站首页JS经典实例
WebPack
发布时间：2020-03-22 18:35:48编辑：雪饮阅读（）
模块化
准备webpack
我们新建立一个module的目录并在该目录安装webpack
cd module
npm install webpack@3.12.0 –D
这里-D参数是dev的意思
建立项目
先建立一个App.js并抛出一个app组件
var App={
template:`<div>我是一个入口组件</div>`
}
//抛出App组件
export default App;
然后建立main.js用来导入app.js中的抛出的组件并挂载到main.js中
import App from './App.js'
import Vue from './vue.js'
new Vue({
el:'#app',
components:{
App
},
template:'<App/>'
})
再建立index.html只需要再这个index.html中有元素id和上面main.js中所绑定的id相同的元素即可，并引入编译后的build.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app"></div>
<script src="./build.js"></script>
</body>
</html>
接下来再当前目录运行编译命令使其生成build.js
webpack ./main.js ./build.js
最后就可以直接访问这个index.html了，就和之前vue实例中的效果一样了。
简化编译命令
上面我们看到build.js是编译后才产生的
那么现在我们把他删除掉，index.html就不能正常显示我们所配置的那个组件了。
在当前目录执行命令npm init –yes后会产生package.json
然后我们将生成的这个文件中“scripts”的值替换如：
{
"name": "module",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"build": "webpack ./main.js ./build.js"
},
"keywords": [],
"author": "",
"license": "ISC"
}
然后我们就可以用简化的命令npm run build来编译build.js了
导出与导入
App.js中我们之前仅仅导出了默认的app组件，我们还可以有下面两种方式追加其他导出的变量
var App={
template:`<div>我是一个入口组件</div>`
}
//声明并导出
export var num1=2;
//声明再导出
var num2=3;
export {num2};
export default App;
那么对于导入我们则也可以继续一次追加更多变量的导入
import App from './App.js'
import Vue from './vue.js'
import {num1,num2} from './App.js'
console.log("num1",num1);
console.log("num2",num2);
new Vue({
el:'#app',
components:{
App
},
template:'<App/>'
})
对于导入，我们这里还可以继续优化，这里我们所要导入的3个变量全部来自于app.js，那么我们可以直接用*来匹配并别名下
import * as App from './App.js'
import Vue from './vue.js'
console.log("App.num1",App.num1);
console.log("App.num2",App.num2);
new Vue({
el:'#app',
components:{
App:App.default
},
template:'<App/>'
})
关于build.js
观察build.js会发现我们编译的内容在这个上面是直接看到我们编译前的语法的
关键字词：vue,webpack,模块化