WEBPACK4打包总结（包含VUE打包）
webpack4
什么是webpack
webpack是一个用于打包js文件的软件。
特点
对于打包后的js文件其有如下特点：
- 指令兼容
- 减少文件数量
下载webpack
npm init -y
npm i webpack webpack-cli -D -g
指令说明：https://www.cnblogs.com/itlkNote/p/6830682.html
webpack简单打包
指令打包
webpack 将要打包的文件 --output 打包文件名
注意：如果js文件中使用require引入了另一个js文件那么webpack会自动搜索并一起打包。
配置文件进行打包
- 新建一个文件:webpack.config.js
- 写入代码：
module.exports={
entry : ”main.js”,//入口文件（你要打包的文件）
output : {//出口文件
filename:”build.js”,//文件名
path:__dirname + “/dist”//路径，__dirname表示当前路径
}
}
- 执行cmd指令：webpack
css文件打包
下载库
npm i style-loader css-loader -D
webpack.config.js文件配置
module.exports={
entry:’打包文件的路径’,
output:{
filename:’打包后文件的名称’，
path:__dirname+’文件夹’//__dir表示当前路径
},
module:{
rules:[
{
test:/\.css$/,
use:[‘style-loader’,’css-loader’]
}
]
}
}
执行指令：webpack
打包url资源
下载库
npm i style-loader css-loader file-loader url-loader -D
webpack.config.js文件配置
module.exports={
entry:’打包的入口文件’,
output:{//出口文件
filename:’文件名’,
path:’文件路径（必须绝对路径）’
},
module:{
rules:[
{
test:/\.css$/,
use:[‘style-loader’,’css-loader’]
},
{
test:/\.(png|gif|jpg)$/,
use:[
{
loader:’url-loader’,
options:{
limit:20000 //单位为B
}
}
]
}
]
}
}
执行：webpack
ES6转ES5
下载库
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.7.0",
参考上述
配置package.json文件
加入字段：
"babel":{
"presets": ["env"],//表示转换格式
"plugins": ["transform-runtime"]//确保vuejs可行
}
配置webpack.config.js文件
module.exports={
entry:’打包文件入口’,
output:{
filename:’文件名’,
path:’绝对路径’
},
module:{
rules:[
{
test:/\.js$/,
exclude:/node_modules/, //排除文件夹
use:[‘babel-loader’]
}
]
}
}
执行：webpack
vue模板文件打包
下载：
npm i -D …
"vue-loader": "^15.4.0",
"vue-template-compiler": "^2.5.17",
"style-loader": "^0.22.1",
"file-loader": "^1.1.11",
npm i -save vue
配置文件
hello.vue:
{{t}}
main.js//入口文件引用
import Vue from "vue";//引入核心文件
import temp from "../templates/hello.vue"//引入组件文件
var vm = new Vue({
el:'#app',
data:{
//添加一些数据
},
render(cl) {//使用作为根组件
return cl(temp);
},
methods:{
//添加一些方法
}
})
webpack.config.js
var vue_loader_plugin = require(“vue-loader/lib/plugin”);//配合vue加载器的辅助插件
//“这个插件是必须的！“它的职责是将你定义过的其它规则复制并应用到.vue文件里相应语言的块
module.exports={
entry:”main.js”,//入口
output:{
filename:”index.js”,
path:__dirname+”/dist”
},
module:{
rules:[
test::/\.vue$/,
use:[‘style-loader’,’vue-loader’]
]
},
plugins:[
new vue_loader_plugin()//使用引入的插件
]
}
执行：webpack
热重载
下载：
"html-webpack-plugin": "^3.2.0",
"webpack": "^4.16.5",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.5"
配置文件
package.js
添加代码：
"scripts": {
"test": "webpack-dev-server --inlink --hot --port 3333"
},
--inlink 表示自动打开浏览器
--hot表示自动刷新
--port表示端口
--host表示主机地址
使用html-webpack-plugin插件
提示：以下操作都处于webpack.config.js文件中
第一步：引入插件：
var cj = require(“html-webpack-plugin”);
第二步：使用插件：
plugins:[
new cj(options)
]
options:
类型：objcet
参数：
filename:渲染后文件名
template:网页模板路径
title：网页名称
执行指令：npm run test
说明：test是前面scripts里的属性