vue 打包html到模版中,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}}

export default {

data(){

return{

t:'hello World!!'

};

},

methods: {

}

}

.app{

color: red;

}

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里的属性