手动实现一个vue-cli脚手架工具，同时也实现webpack的使用
1.下载webpack作为项目开发依赖
//生产环境依赖安装模式
npm install webpack@3.12.0 -D
2.创建main.js作为项目的入口文件
//整个程序的入口文件
//esModule的模块导入
import Vue from './vue.js'
import App from './App.js'
//模块整体加载
import {num1,num2,add} from './App.js'
console.log(num1);//2
console.log(num2);//3
add(3,5);//8
import * as object from './App.js'
console.log(object);
console.log(object.num1);
console.log(object.num2);
new Vue({
el:'#app',
components:{
App
},
template:'<App/>'
})
3.创建一个App.js
npm init -y
//然后会输出配置
package.json内容如下：
{
"name": "08-2.webpack",
"version": "1.0.0",
"description": "",
"main": "main.js",
"dependencies": {},
"devDependencies": {
"webpack": "^3.12.0"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
webpack ./main.js build.js
4.也可以在package.json中配置如下
{
"name": "08-2.webpack",
"version": "1.0.0",
"description": "",
"main": "main.js",
"dependencies": {},
"devDependencies": {
"webpack": "^3.12.0"
},
"scripts": {
"build": "webpack ./main.js build.js"
},
"keywords": [],
"author": "",
"license": "ISC"
}
5.新建一个index.html，script脚本引入打包完成的build.js，如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack</title>
</head>
<body>
<div id="app"></div>
<script src="./build.js"></script>
</body>
</html>
build.js内容模块如下：
webpack打包模块源码执行顺序
1.把所有模块的代码放到函数中，用一个数组保存起来
2.根据require时传入的数组索引，能知道需要哪一段代码
3.从数组中，根据索引取出包含我们代码的函数
4.执行该函数，传入一个对象module.exports
5.我们的代码，按照约定，正好是用module.exports='xxx'进行赋值
6.调用函数结束后，module.exports从原来的空对象变成有值
7.最终return module.exports;作为require函数的返回值
webpack.config.js文件配置
entry是一个对象，程序的入口
key：随意写
value ： 入口文件
output就是打包后的js
module：配置loader模块的地方
module.exports={
//入口
entry:{
//可以有多个入口，也可以有一个，如果是一个就默认从这一个入口开始解析
"main":"./main.js"
},
output:{
filename:'./build.js'
},
//声明模块 包含各个loader
module:{
loaders:[
{
}
]
},
watch:true,//文件监视改动 自动产出build.js
}
实际应用中，我们一般分开发环境和生产环境，可以分别写两个配置文件并在package.json里配置上两个js地址，同时把打包文件build的地址去掉，如下：
"scripts": {
"dev": "webpack --config ./webpack.dev.config.js",
"prod": "webpack --config ./webpack.prod.config.js"
},
生产环境不需要时刻监控文件，就可以把watch去掉
需要运行时候分别在命令行输入对应的环境名即可
npm run dev
npm run prod
css文件的处理
1）es6模块导入
import './main.css'
对于webpack来说，css文件也是一个模块，但是像这样的文件，需要loaders去处理这些文件
2）下载
npm i css-loader style-loader -D
3）在需要的webpack.config.js里面配置
module:{
loaders:[
{
//遇到后缀为.css的文件，webpack先用css-loader加载器去解析这个文件
//最后计算完成的css，将会使用style-loader生成一个内容为最终解析玩的css代码的style标-签，放到head标签里
//webpack在打包过程中，遇到后缀为css的文件，就会使用style-loader和css-loader去加载这个文件。
//style-loader css-loader
test:/\.css$/,
loader:'style-loader!css-loader'
},{
test:/\.(jpg|png|jpeg|gif|svg)$/,
loader:'url-loader?limit=6239797'
},
{//less-loader
test:/\.less$/,
loader:'style-loader!css-loader!less-loader'
}
]
},
图片文件的处理
对文件的处理 webpack需要 url-loader 和 file-loader
npm i url-loader file-loader -D
添加loader的配置（已经在css的loader处理后一并配置了）
我们改动下App,js以展示图片
import imgSrc from './bigPic.jpg'
var app={
data(){
return{
imgSrc:imgSrc
}
},
template:`
<div>
<img :src="imgSrc" alt="我的老公">
</div>
`
};
//抛出一个对象
export default app;
webpack最终会将各个模块打包成一个文件，因此我们样式中的url路径是相对入口html页面的，而不是相对于原始css文件所在路径的。这就会导致图片引入失效。这个问题可由file-loader解决，file-loader可以解析项目中的url引入（不仅限于css）。根据我们的配置，将图片拷贝到相应的路径，修改打包文件后文件引用路径，使之指向正确的文件。
对于比较小的文件，使用base64编码(即当图片小于设置的limit的数值，即会自动编译成base64格式)，可以减少一次图片的网络请求；对于比较大的图片，使用base64就不适合了，编码会和html混在一起，一方面可读性差，另一方面加大了html页面的大小，因此设置一个合理的limit非常有必要
less文件的处理
npm i less-loader -D
//使用前记得先下载less
npm i less -D
var path = require('path');
module.exports={
output:{
path:path.resolve('./dist'),//相对转绝对
filename:'./build.js'
}
}
html文件的处理
npm i html-webpack-plugin -D
const HtmlWebpackPlugin=require('html-webpack-plugin');//引入插件
module.exports={
plugins:[
//插件
new HtmlWebpackPlugin({
template: './src/index.html'//参照物
})
]
}
网友评论