Vue学习第五天
Vue05
一.
Webpack
1.从本质上来说，webpack是一个现代JavaScript应用的静态模块打包工具
2.先安装nodejs，具体参考 https://www.cnblogs.com/fengchaoran/p/8461317.html
3.安装webpack，执行npm install [email protected] -g
这里的使用全局安装，之后学习局部安装
二.
Webpack使用
创建两个文件夹，src放开发的文件，dist放打包的文件
src创建mathUtils.js，main.js，这里使用的是commonjs模块化规范
function add(num1,num2) {
return num1 + num2;
}
function subtract(num1,num2) {
return num1 - num2;
}
function multiply(num1,num2) {
return num1 * num2;
}
function divide(num1,num2) {
return num1 / num2;
}
module.exports = {
add,subtract,multiply,divide
}
main.js引用mathUtils中的函数
const {add,subtract,multiply,divide} = require("./mathUtils.js")
console.log(add(100, 10));
console.log(subtract(100, 10));
console.log(multiply(100, 10));
console.log(divide(100, 10));
之后在命令行用webpack打包，
最后在测试页面引用bundle.js,测试成功
三.
通过webpack对src自动打包到dist
1.因为要使用node来获取绝对路径，所以 npm init -y初始化得到package.json
2.创建webpack.config.js
const path = require("path")
module.exports = {
entry : "./src/main.js",
output : {
path : path.resolve(__dirname,"dist"),
filename : "bundle.js"
}
}
此时可以用webpack命令得到bundle.js
但是在后续会使用npm run build，代替可能会很长的webpack命令
修改package.json的scripts属性
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build" : "webpack"
},
使用npm run build 也可以打包
四.
在本地安装webpack
在项目中输入命令npm install [email protected] --save-dev
接下来用npm run build就使用的是本地的webpack而不是全局
五.
使用loader完成其他文件的打包
例如现在我需要将css文件打包，必须使用loader直接接受css文件会报错
1.安装css-loader
npm install --save-dev css-loader
css-loader只负责将css文件进行加载，想要使css文件生效需,要再安装style-loader将样式添加到DOM中
npm install style-loader --save-dev
2.在main.js中
require("./css/temp.css")
3.在webpack.config.js中
const path = require("path")
module.exports = {
entry : "./src/main.js",
output : {
path : path.resolve(__dirname,"dist"),
filename : "bundle.js"
},
module:{
rules:[
{
test:/\.css$/,
//使用style-loader css-loader 从右往左生效
use:['style-loader','css-loader']
}
]
}
}
4.重新打包
npm run build
六.
在打包时需要其他loader时可以参考官网直接复制粘贴
例如在css引用图片，使用了url则需要url-loader
这里如果小于limit限制大小会将图片编译成base64字符串形式
如果大于limit，需要使用file-loader，但是还需要在output中配一个publicPath : "dist" 。目的是为了在访问文件时默认访问项目目录下dist文件夹下的文件，如果不加图片也无法加载。
七.
想要将ES6语法转成ES5