1.安装
npm i [email protected] -D
2.编译打包生成build.js
看下目录结构
首先新建一个main.js.
main.js是整个程序的入口文件。
main.js中
import Vue from "./vue.js"
import App from './App.js'
new Vue({
el: "#app",
components: {
app:App
},
template : `<app/>`
})
App.js中
var app = {
template: `
<div>我是一个入口组件1111</div>
`
};
export default app;
index.html中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="./build.js"></script>
</html>
控制台输入webpack ./main.js build.js就会生成build.js文件了
3.自动编译打包
新建webpack.config.js
module.exports = {
//入口
entry : {
//可以有多个入口，也可以有一个，如果有一个就默认从这一个入口开始解析
"main" : "./main.js"
},
//出口
output: {
filename : "./build.js"
},
//文件监视该动，自动产出build.js
watch : true
}
package.json文件中
{
"name": "vue-cli",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {
"axios": "^0.18.0",
"vue": "^2.6.10",
"vue-router": "^3.0.6",
"webpack": "^3.6.0"
},
"devDependencies": {},
"scripts": {
"build" : "webpack",
},
"author": "",
"license": "ISC"
}
控制台输入npm run build就可以了，当代码发生变化时候，将会自动编译打包
如果新建的配置文件名字不是webpack.config.js，比如说是webpack.dev.config.js，则需要在packsge.json文件里进行配置
{
"name": "webpack",
"version": "1.0.0",
"description": "",
"main": "main.js",
"dependencies": {
"webpack": "^3.12.0"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build" : "webpack"
"dev" : "webpack --config ./webpack.dev.config.js"
},
"author": "",
"license": "ISC"
}
配置完后在控制台输入npm run dev进行编译打包
4.下载配置loader，编译样式文件
如果引入样式文件不配置对应的loader的话，编译的时候会报错
下载loader
npm i css-loader style-loader -S
配置loader
module.exports = {
//入口
entry : {
//可以有多个入口，也可以有一个，如果有一个就默认从这一个入口开始解析
"main" : "./main.js"
},
output: {
filename : "./build.js"
},
//声明模块，包含各个loader
module: {
loaders: [
{
//遇到后缀为.css的文件，webpack先用css-loader加载器去解析这个文件
//最后计算完的css，将会使用style-loader生成一个内容为最终解析完成的css代码的style标签放到head标签里。
test: /\.css$/,
loader : 'style-loader!css-loader'
}
]
},
//文件监视该动，自动产出build.js
watch : true
}
main.js中引入样式文件
import './main.css'
5.下载配置loader，编译打包图片
不配置的话报错
ERROR in ./article6.jpg
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
@ ./App.js 1:0-35
@ ./main.js
下载loader
npm i url-loader file-loader -S
配置loader
//对于图片的大小小于limit的图片，使用base64编码，可以减少一次图片的网络请求；那么对于比较大的图片，使用base64就不适合了
//编码会和html混在一起，一方面可读性差，另一方面加大了html页面的大小。因此设置一个合理的limit是非常有必要的
{
test: /\.(jpg|png|jpeg|gif|svg)$/,
loader : 'url-loader?limit=80000'
}
App.js中
import img from './a.png';
var app = {
template: `
<div>
我是一个入口组件
<img :src="imgSrc"/>
</div>
`,
data() {
return {
imgSrc:img
}
}
};
export default app;
6.less-loader
下载loader
npm i less -S //先下载less模块
npm i less-loader -S
配置loader
{
test: /\.less$/,
loader : 'style-loader!css-loader!less-loader'
}