webpack

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”,
}
]
}
}