参考

• 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开发模式
};