Webpack基础

path.resolve

// 只要以/开头，就变为绝对路径
// ./和直接写效果相同 
var path = require("path")     //引入node的path模块

path.resolve('/foo/bar', './baz')   // returns '/foo/bar/baz'
path.resolve('/foo/bar', 'baz')   // returns '/foo/bar/baz'
path.resolve('/foo/bar', '/baz')   // returns '/baz'
path.resolve('/foo/bar', '../baz')   // returns '/foo/baz'
path.resolve('home','/foo/bar', '../baz')   // returns '/foo/baz'
path.resolve('home','./foo/bar', '../baz')   // returns '当前工作目录/home/foo/baz'
path.resolve('home','foo/bar', '../baz')   // returns '当前工作目录/home/foo/baz'

webpack.config.js

• 该文件若有更新，需要重启
• css-loader：由于import引入的样式文件会作用在全局，若想css模块化，则设置modules为true
• 默认情况下，将不接受在 HTTPS 上运行且证书无效的后端服务器

Tip
请注意，要完全启用 HMR ，需要 webpack.HotModuleReplacementPlugin。如果使用 --hot 选项启动 webpack 或 webpack-dev-server，该插件将自动添加，因此你可能不需要将其添加到 webpack.config.js 中。

加了publicPath后打包的文件在哪？如何利用cdn

/*
 * @Author: your name
 * @Date: 2021-04-18 15:44:29
 * @LastEditTime: 2021-08-08 17:58:22
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \newToDoc:\hyy\webpack\webpack.config.js
 */
const path = require("path");

// 设置热更新
const webpack = require('webpack')

const HtmlWebpackPlugin = require("html-webpack-plugin");
const {
    CleanWebpackPlugin } = require("clean-webpack-plugin")

// 处理vue文件
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
   
    mode: 'development', // 不设置的话是生产模式，代码会压缩成一行
    devtool: 'eval-source-map',
    // 配置sourceMap
    // 定位到源代码的错误行数
    // https://webpack.docschina.org/configuration/devtool/
    // source-map会生成map文件，打包后文件的最后一行会显示对应的.map文件
    // inline-source-map不会生成map文件，会将映射关系放在base64文件里，精确到行列（性能消耗大）
    // inline-cheap-source-map精确到行
    // inline-cheap-module-source-map检测到第三方模块里的错误
    // cheap-module-eval-source-map 开发环境：有提示，速度尚可，无map文件
    // cheap-module-source-map 有提示，速度比加eval慢，会生成.map文件
    entry: {
   
        // npx webpack 后面跟的入口
        commonjs: path.resolve(__dirname, "./src/js/commonjs.js"),
        es6: path.resolve(__dirname, "./src/js/es6.js"),
        // 完整写法 因此输出默认也是main.js（在没有配置文件名时）
        // 若改成test: 'xxx'，则默认输出test.js
        // main: "./src/js/es6.js"
    },
    output: {
   
        // __dirname指的是当前文件所在文件夹的绝对路径。
        path: path.resolve(__dirname + "/dist"),
        // 输出的文件名默认是main.js
        // [name]是占位符写法，对应entry里的key
        filename: "js/[name].js",
        // 产出的文件根目录前缀，index.html引入js时会加上这个前缀
        // publicPath: 'http://testCdn.com'
    },
    module: {
   
        // 告诉webpack 遇到什么模块要如何处理
        rules: [
            {
   
                test: /\.vue$/,
                use: ["vue-loader"]
            },
            {
   
                test: /\.(png|jpe?g|gif)$/,
                use: {
   
                    loader: 'file-loader',
                    // v5 版本已废弃: 请考虑向 asset modules 迁移。
                    // 用的loader要安装
                    // https://webpack.docschina.org/loaders/file-loader/
                    // npm install file-loader --save-dev
                    // 那么import test from './test.jpg' test就是打包后的图片文件名（含路径）
                    // 还可以用url-loader：用于将文件转换为 base64 URI 的 loader，打包后就不再产出图片文件了
                    // 若图片很大且使用url-loader → base64字符串很长 → 打包后文件体积很大 → 加载时间长 这时最好用file-loader
                    // 若图片很小且使用file-loader → 单独生成图片文件 → 多发送一次HTTP请求？不会缓存吗
                    options: {
   
                        name: