Webpack打包知识
参考资料：https://segmentfault.com/a/1190000006178770
Webpack若没有配置文件则需指定--output与mode。
如： webpack ./app/main.js --output ./public/bundle.js --mode development
下载安装Node Js
并将Node Js的路径加入环境变量path中
Webpack
创建新的工作目录，并进入该目录中，使用npm init初始化目录，生成package.json文件
npm init使用npm安装Webpack和Webpack-cli
//全局安装
npm install -g webpack
//安装到项目目录
npm install --save-dev webpack
npm install --save-dev webpack-cli创建基本目录和文件，结构如下
在index.html中引入打包后的js文件(bundle.js)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Webpack Sample Project</title>
</head>
<body>
<div id='root'>
</div>
<script src="bundle.js"></script>
</body>
</html>在Greeter.js中定义一个函数，该函数生成含有问候信息的div，使用CommonJS规范将该函数导出为一个模块。
module.exports = function() {
var greet = document.createElement('div');
greet.textContent = "Here is the greet text";
return greet;
};在main.js中引入Greeter.js并将该模块的节点插入root下。
const greeter = require('./Greeter.js');
document.querySelector("#root").appendChild(greeter());此时可以使用webpack打包依赖文件了
node_modules\.bin\webpack app\main.js public\bundle.js打包结束后打开index.html可以看到结果
配置文件来帮助使用webpack
在当前练习文件夹的根目录下新建一个名为webpack.config.js的文件，配置入口文件路径和打包后文件的存放路径
module.exports = {
entry: __dirname + "/app/main.js",//唯一入口文件
output: {
path: __dirname + "/public",//打包后的文件存放路径
filename: "bundle.js"//打包后的文件名
}
}在此之后只需要执行webpack而不需要指定入口出口路径
使用npm scripts来进行打包
在package.json中对scripts对象进行配置，如下
{
"name": "vue_webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack" //此处为修改，json不允许注释，此行删除
},
"dependencies": {},
"devDependencies": {
"install": "^0.12.1",
"npm": "^6.2.0",
"webpack": "^4.16.2",
"webpack-cli": "^3.1.0",
},
"author": "",
"license": "ISC"
}npm start是预订命令，可以直接通过"npm start"执行，非预订命令需要执行"npm run command"。在上面配置完成后，可以直接通过"npm start"进行打包了。
使用webpack-dev-server构建本地服务器
安装依赖
npm install --save-dev webpack-dev-serverdevserver配置说明如下
| devserver的配置选项 | 功能描述 |
|---|---|
| contentBase | 默认webpack-dev-server会为根文件夹提供本地服务器，如果想为另外一个目录下的文件提供本地服务器，应该在这里设置其所在目录（本例设置到“public"目录） |
| port | 设置默认监听端口，如果省略，默认为”8080“ |
| inline | 设置为true，当源文件改变时会自动刷新页面 |
| historyApiFallback | 在开发单页应用时非常有用，它依赖于HTML5 history API，如果设置为true，所有的跳转将指向index.html |
将dev-server的配置加入webpack.config.js
module.exports = {
entry: __dirname + "/app/main.js",
output: {
path: __dirname + "/public",
filename: "bundle.js"
},
mode: 'development',
devServer: {//For webpack-dev-server
contentBase: "./public",//page directory
historyApiFallback: true,//all goto index.html
inline: true,//refresh immediately
port: 8080
},
};在package.json中的scripts对象中添加"server"命令，用以开启本地服务器：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack",
"server": "webpack-dev-server --open"
},现在使用"npm run server"即可通过http://localhost:8080/访问目录了
引入vue
若只是普通使用vue.js文件，则在main.js中引入vue.js文件即可。（以下为测试代码）
//main.js
const Vue = require('../dependent_source/vue.js');
window.onload = function () {
var app1message = {message :'<p>Hello Vue!</p>'};
var app = new Vue({
el: '#app',
data: {
message: app1message
}
});
var app2 = new Vue({
el:'#app2',
data:{
message : 'test title',
message2 : 'tttttt',
}
});
var app3 = new Vue({
el:'#app3',
data:{
seen : true,
no : 1,
iff : function(){
return this.no>0;
},
}
});
var app4 = new Vue({
el:'#app4',
data:{
tests : [
{test : 'a'},
{test : 'b'},
{test : 'c'},
]
}
});
var app5 = new Vue({
el:'#app5',
data:{
message : "before click"
},
methods : {
clickFunction : function(){
this.message = this.message.split('').reverse().join('');
app1message.message = 'Vue Hello';
}
}
});
var app6 = new Vue({
el : '#app6',
data : {
message : 'hi1',
},
});
Vue.component('test-component',{
template:'<span>aaaa</span>'
});
var app7 = new Vue({
el : '#app7',
})
var Child = {
template : '<p>child<span>xxxxx</span></p>'
}
var app8 = new Vue({
el : '#app8',
components : {
'test-child' : Child
}
})
var active = {
props : ['msg'],
template : '<p>{{msg.message}}</p>'
}
var app9 = new Vue({
el : '#app9',
components : {
'test-active' : active
},
data : {
messages : [
{message : 'aaaa'},
{message : 'bbbb'},
{message : 'cccc'},
]
}
})
var active2 = {
props : ['msg','msg2'],
template : '<p>{{msg}}{{msg2}}</p>'
}
var app10 = new Vue({
el : '#app10',
components : {
'test-active2' : active2
},
})
var istest = {
template : '<td><p>istest</p></td>'
}
var app11 = new Vue({
el : '#app11',
components : {
'mytd' : istest
},
})
var camelCase = {
template : '<p>{{myMsg}}</p>',
props : ['myMsg']
}
var app12 = new Vue({
el : '#app12',
components : {
'camel' : camelCase
}
})
var childTest = {
template : '<p>msg:{{msg}}</p>',
props : ['msg']
}
var child = new Vue({
el : '#child',
components : {
'child-test' : childTest
},
data : {
'parentMsg' : ""
}
})
document.querySelector("#root").appendChild(greeter());
}
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
<script src="bundle.js"></script>
</head>
<body>
<div id='root'></div>
<br/>
<p>app1</p>
<div id="app">
{{message.message}}
<span v-html="message.message"></span>
</div>
<br/>
<p>app2</p>
<div id="app2">
<span v-bind:title="message">
{{message2}}<br/>
<span :title="message">
{{message2}}
</span>
</div>
<br>
<p>app3</p>
<div id="app3">
<p v-if="seen">
I see you
</p>
<p v-if="iff()">
no no no
</p>
</div>
<br>
<p>app4</p>
<div id="app4">
<p v-for="test in tests">
{{test.test}}
</p>
</div>
<br>
<p>app5</p>
<div id="app5">
<p>{{message}}</p>
<button v-on:click="clickFunction()">click this</button>
</div>
<br>
<p>app6</p>
<div id="app6">
<input v-model="message"/>
{{message}}
</div>
<br>
<p>app7</p>
<div id="app7">
<test-component></test-component>
</div>
<br>
<p>app8</p>
<div id="app8">
<test-child></test-child>
</div>
<br>
<p>app9</p>
<div id="app9">
<test-active v-for="message in messages" v-bind:msg="message"></test-active>
</div>
<br>
<p>app10</p>
<div id="app10">
<test-active2 msg="message" msg2="2"></test-active2>
</div>
<br>
<p>app11</p>
<div id="app11">
<table><tr><td is="mytd"></td></tr></table>
</div>
<br>
<p>app12</p>
<div id="app12">
<camel my-msg="my message"></camel>
</div>
<br>
<p>parent</p>
<div id="child">
<input v-model="parentMsg">
<div>
<child-test :msg="parentMsg"></child-test>
</div>
</div>
</body>
</html>