参考
- https://www.bilibili.com/video/BV1X3411y7i4?from=search&seid=13175847287667436659&spm_id_from=333.337.0.0
- https://juejin.cn/post/6984297236851064862
webpack的配置
https://www.cnblogs.com/jinzhou/p/9269854.html
-
项目入口entry和出口文件output
-
mode：production：打包模式、development：开发模式
-
devtool: 'eval-source-map'，方便页面调试，配置这个需要mode为development开发模式
- 打开浏览器控制面板，在sources中看到源代码方便调试
-
devServer：开启一个本地服务器，实现热更新，避免更改内容一次后查看需要重新打包一次
-
contentBase：本地服务器所加载的页面所在的目录
-
inline: true：实时刷新
-
historyApiFallback：不跳转
-
port：可以设置端口号，不写默认为8080
-
proxy：配置代理，用于跨域的参数配置
-
-
module（模块的处理）：可以将ES6转为ES5
-
识别文件类型，来确定具体处理该数据的loader(Rule.test属性)
-
使用相关的loader对文件进行相关的操作转换(Rule.use属性）
-
test：用正则匹配文件的后缀名，匹配到的文件要用loader进行处理
-
use：需要使用的loader
-
exclude：这个文件夹下的文件不需要使用loader处理
-
-
webpack（打包）
-
webpack-cli（解析参数）
-
webpack-dev-server（webpack开发环境）
-
vue-loader（解析.vue文件），需要配合plugins: [new VueLoaderPlugin()]插件使用
-
vue-style-loader（支持服务端渲染）
-
vue-template-compiler（解析template标签）
-
css-loader（处理css）
-
@babel/core（babel核心模块）
-
@babel/preset-env（高级语法转换成低级语法，ES6-ES5）
-
babel-loader（解析js文件）
-
html-webpack-plugin（打包html插入到页面中）
-
webpack-merge（webpack合并文件）
-
presets插件集合
-
plugins插件：VueLoaderPlugin（配合vue-loader使用），HtmlwebpackPlugin（会把打包后的文件自动插到对应的文件中，如public/index.html）
-
Compiler 模块是 webpack 的支柱引擎，它通过 CLI 或 Node API 传递的所有选项，创建出一个 compilation 实例。它扩展(extend)自 Tapable 类，以便注册和调用插件。大多数面向用户的插件会首先在 Compiler 上注册。
作者：liuxiaojie93
链接：https://www.jianshu.com/p/490544ce5a6f
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
webpack的优点
- webpack是一种非常优秀的前端模块化的打包工具
- 包括你的JavaScript代码，也包括CSS和fonts以及图片等等等，只有通过合适的loaders，它们都可以被当做模块被处理。
// webpack就是前端打包工具，减少script的引入，通过loader把.vue等浏览器不运行的代码转换为浏览器运行的JS代码
// 在index文件中的body引入<script src="./bundli.js"><script>
const path = require("path");
const { VueLoaderPlugin } = require("vue-loader");
module.exports = {
// 入口
entry: __dirname + "/src/main.js", //已多次提及的唯一入口文件 __dirname代表当前文件的根目录 webpack打包的入口文件
output: {
// 出口
// path: __dirname + "/public", //打包后的文件存放的地方
path: path.resolve(__dirname, "dist"), //打包后的文件存放的地方
filename: "bundle.js" //打包后输出文件的文件名
},
// 模式
mode: "development", // production打包模式 development 开发模式
// module模块
module: {
// rules规则，当遇到对应规则时，用对应模块处理
rules: [
// Babel 是一个 JavaScript 编译器，能将 ES6 + 代码转为 ES5 代码，让你使用最新的语言特性而不用担心兼容性问题。在 Babel 执行编译的过程中，会从项目根目录下的配置文件读取配置。在根目录下创建Babel的配置文件 .babelrc
{
test: /(\.jsx|\js)$/, // 用正则匹配文件的后缀名，匹配到的文件要用loader进行处理
use: ["babel-loader"], // 需要使用的loader
exclude: "/node_modules/" // 这个文件夹下的文件不需要使用loader处理
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
},
{
test: /\.vue$/,
use: "vue-loader"
},
// 下载配置url-loader、file-loader【图片转为base64或生成新图片】
{
test: /(\.png|\.jpg|\.jpeg|\.gif)$/,
// use:['url-loader']
// 1、base64的优点：减少了http请求，加快了页面的加载时间，避免了图片的跨域，而且还不会造成图片的缓存问题
// 2、缺点：数据量比较大，可读性不好，IE8以后不可用
// 3、如果图片的大小超出了limit的限制就会默认调用file-loader去处理这个图片此时会生成一个新的图片，而不是去转base64
use: [
{
loader: "url-loader",
options: {
limit: 1 // 限制图片大小，如果超过了，就不配置base64了 base64：减小http的请求
}
}
]
}
]
},
// 插件
plugins: [new VueLoaderPlugin()],
devServer: {
contentBase: "./public", //本地服务器所加载的页面所在的目录
// static:'./dist', //本地服务器所加载的页面所在的目录
open: true, // 打开浏览
host: "local-ip", // 打开浏览器local-ip为IP地址
historyApiFallback: true, //不跳转
inline: true, //实时刷新
port: 8888, // 开启端口号
proxy: {
// 代理，用于跨域的参数配置
"/api": {
//如果请求的路径里有/api，那就走这个跨域参数配置
target: "http://localhost:9999",
secure: false, // 目标服务器是否是安全的协议
changeOrigin: false // 是否更改请求的源头
}
}
},
devtool: "eval-source-map" // 查看错误信息，方便页面调试，配置这个需要mode为development开发模式
};
网友评论