webPack
安装
- webpack 4.0以上的版本,必须单独安装webpack 和 webpack-cil
- 安装指令如下
cnpm install webpack
cnpm install -g webpack-cli
使用
- index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
</div>
<script type="text/javascript" src="./build.js"></script>
</body>
</html>
- main.js
//esModule模块导入
import Vue from './vue.js'
import App from './App.js'
new Vue({
el: '#app',
components:{
App
},
template:`<App/>`
})
- App.js
var App = {
template:`<div>我是一个入口组件</div>`
}
//抛出App让main引用
export default App
执行打包命令
webpack ./main.js -o build.js
除了导出vue组件之外,export还可以导出单个变量和函数
App.js
// 声明,并导出
export var num1 = 2; //作为一整个对象key导出
//声明再导出
var num2 = 3;
export {num2};
export function add(x,y) {
console.log(x+y)
}
main.js
//esModule模块导入
import Vue from './vue.js'
import App from './App.js'
import {num1,num2,add} from "./App.js";
console.log(num1);
console.log(num2);
console.log('main-------------');
add(5,6)
new Vue({
el: '#app',
components:{
App
},
template:`<App/>`
});
此外,我们可以将webpack打包命令写入package.json,这样就不用每次通过命令行打包了
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack ./main.js -o build.js"
},
然后再终端输入
npm run build
webpackConfig配置
module.exports = {
//入口
entry: {
// 可以有多个入口,也可以有一个,如果有一个就默认从这个入口开始解析
"main":"./main.js"
},
output:{
filename:'./build.js'
},
watch:true , //文件监视改动,自动编译
// watchOptions: {
// poll: 1000, //检测代码修改时间,以毫秒为单位
// aggregeateTimeout: 500, //防止重复保存而发生重复编译错误,这里设置的500为半秒内重复保存,不进行打包操作
// ignored: /node_modules/ //不监听目录,使用正则匹配
// },
}
使用指令
"dev": "webpack --config ./webpack.config.js",
css文件处理
安装
npm i css-loader style-loader -D
使用css-loader和style-loader
module:{
rules:[
{
//遇到后缀为.css的文件,webpack先用css-loader加载器去解析这个文件
//然后会使用style-loader生成style标签放入header中
test:/\.css$/,
loaders:'style-loader!css-loader'
}
]
}
图片处理
使用url-loader
less文件处理
安装
npm install less -D
npm install i less-loader -D
使用less-loader
自动输出html代码和js文件到指定路径
-下载html-webpack-plugin -D
npm i html-webpack-plugin -D
- 引用
const HtmlWebpackPlugin = require('html-webpack-plugin')
- 使用
plugins:[
new HtmlWebpackPlugin({
template:'./src/index.html' //参照物
})
],
- npm run dev编译
SplitChunksPlugin分包
https://segmentfault.com/a/1190000015938570
https://www.jianshu.com/p/2cc8457f1a10
webpack.ensure 异步加载js
https://www.jianshu.com/p/9fa38e536033
https://blog.youkuaiyun.com/chiuwingyan/article/details/80666778