1.webpack是什么?
webpack是一个构建工具,主要功能:
1.1代码转换(解决js兼容性问题,es6语法浏览器不支持)
1.2压缩混淆
1.3代码分割
1.4模块合并
1.5自动刷新
1.6代码校验
1.7自动发布
默认情况下,我们更改入口js文件的代码,需要重新运行命令打包webpack,才能生成出口的js文件
那么每次都要重新执行命令打包,这是一个非常繁琐的事情,那么,自动打包可以解决这样繁琐的操作。
实现自动打包功能的步骤如下:
A.安装自动打包功能的包:webpack-dev-server
npm install webpack-dev-server -D
B.修改package.json中的dev指令如下:
“scripts”:{
“dev”:“webpack-dev-server”
}
C.将引入的js文件路径更改为:
D.运行npm run dev,进行打包
E.打开网址查看效果:http://localhost:8080
注意:webpack-dev-server自动打包的输出文件,默认放到了服务器的根目录中.
F.打包js文件中的高级语法:在编写js的时候,有时候我们会使用高版本的js语法
有可能这些高版本的语法不被兼容,我们需要将之打包为兼容性的js代码
我们需要安装babel系列的包
A.安装babel转换器
npm install babel-loader @babel/core @babel/runtime -D
B.安装babel语法插件包
npm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
C.在项目根目录创建并配置babel.config.js文件
module.exports = {
presets:["@babel/preset-env"],
plugins:[ "@babel/plugin-transform-runtime", "@babel/plugin-proposal-class-properties" ]
}
D.配置规则:更改webpack.config.js的module中的rules数组
module.exports = {
…
plugins:[ htmlPlugin ],
module : {
rules:[
{
//test设置需要匹配的文件类型,支持正则
test:/.cssKaTeX parse error: Expected 'EOF', got '}' at position 106: …'] }̲, {…/,
use:[‘style-loader’,‘css-loader’,‘less-loader’]
},
{
test:/.scssKaTeX parse error: Expected 'EOF', got '}' at position 80: …'] }̲,{ …/,
//limit用来设置字节数,只有小于limit值的图片,才会转换
//为base64图片 加载更快
use:“url-loader?limit=16940”
},{
test:/.js$/,
use:“babel-loader”,
//exclude为排除项,意思是不要处理node_modules中的js文件
exclude:/node_modules/
}
]
}
}
A.安装vue组件的加载器
npm install vue-loader vue-template-compiler -D
B.配置规则:更改webpack.config.js的module中的rules数组
const VueLoaderPlugin = require(“vue-loader/lib/plugin”);
const vuePlugin = new VueLoaderPlugin();
module.exports = {
…
plugins:[ htmlPlugin, vuePlugin ],
module : {
rules:[
…//其他规则
{
test:/.vue$/,
loader:“vue-loader”,
}
]
}
}