前言
赋闲在家，学习ing。我理解的webpack是一个现代javascript的一个打包工具他可以用来对资源进行管理和优化比如说图片转base64、代码压缩等等。开始进入主题
webpack简单配置介绍
-
1.entry:入口文件我们打包都会先从这个文件进行，然后对引入的资源文件进行处理最终生成类型于依赖图的玩意。
-
2.mode:分为development（开发）和production（生产）两个模式。为什么要分两个模式呢？
- eg:1.开发环境需要配置souceMap用来更快捷的定位问题而开发环境不需要
-
3.output:打包完成后文件的输出路径
-
4.devtool:是否开启souceMap,false:为不开启，常用eval-cheap-source-map，其他的配置可以自行去看webpack
-
5.devServe:创建一个web服务器,类似于我们平常日常开发vue在本地的8080端口起个服务
-
6.loader:loader用来处理一些资源吧（我是这么理解的）
- 比如说处理css:需要用到style-loader、css-loader
-
7.plugin:这个就更牛了，对一些资源进行处理
- 比如说最常用的htmlwebpackplugin可以配置一个模版最终在本地web服务器中能够看到
第一步搭建一个webpack服务器
通过npm init -y指令生成package.json文件
npm init -y
安装webpack
npm i webpack-cli webpack -D
配置webpack.config.js文件
const path = require('path')
module.export = {
entry:'./index.js'，//在根目录下创建index.js文件
output:{
filename:"bundle.js",
path:path.resolve(__dirname,'dist')
}
}
替换package.json中的scripts字段
"scripts": {
"build": "webpack --watch"
}
此时运行npm run build会发现生成了dist文件里面包含了bundle.js文件
添加devServe属性
devServer: {
host: 'localhost',
port: '8888'
},
package.json中的scripts字段新增一条命令
"start": "webpack serve --open"
此时运行npm start会打开一个空白页
添加html-webpack-plugin插件
1.新增index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
hi yoge
</body>
</html>
2.修改webpack.config.js文件
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: './index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
mode: 'development',
devServer: {
host: 'localhost',
port: '8888'
},
plugins: [
new HtmlWebpackPlugin(
{
template: './index.html'
}
)
]
}
此时npm start，可以看到以下效果
webpack打包一个SFC文件（.vue后缀结尾的文件）
以vue2为🌰,先安装以下包
npm i vue@2 vue-loader style-loader css-loader saas-loader saas -D
- vue@2 主要是想用在index.js中应用vue Vue()这个构造函数。
- vue-loader 用来对SFC文件进行解析。
- style-loader css-loader saas-loader saas对saas、scss、css进行解析编译 修改webpack.config.js文件
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin-webpack5')
module.exports = {
entry: './index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
mode: 'development',
devServer: {
host: 'localhost',
port: '8888'
},
module: {
rules: [
{
test: /\.(css|scss)$/i,
use: ['style-loader', 'css-loader', 'sass-loader']
},
{
test: /\.vue$/i,
use: 'vue-loader'
}
]
},
plugins: [
new VueLoaderPlugin(),
new HtmlWebpackPlugin(
{
template: './index.html'
}
)
]
}
新增index.vue文件
<template>
<div id="app">
hi yoge,this is SFC
</div>
</template>
<script>
export default {
name: 'BuildIndex',
data () {
return {
}
},
mounted () {
},
methods: {
}
}
</script>
<style lang="scss" scoped>
#app{
width: 100px;
height: 100px;
background-color: pink;
}
</style>
再修改index.js入口文件
import Vue from 'vue'
import App from './index.vue'
const app = new Vue({
el: '#app',
render: h => h(App)
})
同时在index.html加入el的挂载dom
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
此时run start 能看到以下效果
手写一个loader
首先我们要知道loader是对特定的文件资源进行一些特殊的处理，比如css-loader、style-loader它们能将.css结尾的文件名进行一些处理。loader本身是个函数，接下来我们将来编写一个tplLoader。 1.新建loaders文件夹，并写入index.js文件
module.exports = function (source) {
const str = source.replace(/\s/, '')
function getDom (obj, source) {
let str = ''
str = source.replace(/\{\{(.*?)\}\}/g, function ($1, $2) {
console.log($2, '$$$')
return obj[$2]
})
console.log(str, 'str')
return str
}
return `
export default (options)=>{
console.log(options)
${getDom.toString()}
return getDom(options,'${str}')
}
`
}
- 这个loader会将tpl文件引入时返回一个函数，调用函数将能得到模版字符串。 2.新建index.tpl
<div>{{name}}<div>
<div>{{age}}</div>
3.配置webpack.config.js
{
test: /\.tpl$/,
use: [
{
loader: path.resolve(__dirname, './loaders/tplLoader.js')
}
]
}
4.在index.vue中添加模版父jiedian
<template>
<div id="app">
hi yoge,this is SFC
<div id="tpl-tempalte"></div>
</div>
</template>
<script>
export default {
name: 'BuildIndex',
data () {
return {
}
},
mounted () {
},
methods: {
}
}
</script>
<style lang="scss" scoped>
#app{
width: 100px;
height: 100px;
background-color: pink;
}
</style>
5.在index.js中引入index.tpl文件并使用
import Vue from 'vue'
import App from './index.vue'
import tplInfo from './index.tpl'
const app = new Vue({
el: '#app',
render: h => h(App)
})
document.getElementById('tpl-tempalte').innerHTML = tplInfo({
name: 'yoge',
age: 25
})
console.log(app)
6.效果图
完结撒花。🌼
