webpack 的一点知识

多个入口共享多个模块

在使用webpack搭建多页面应用时候需要多个入口，这个时候需要考虑到模块共享问题了
可以使用entry.dependOn 来处理

entry: {
        home: {
            import: "./pages/home/index.js",
            // 其中vendors里边使用到模块，不会打入home对应的chunk当中了
            dependOn: 'vendors'
        },
        articles_detail: "./pages/articles/detail.js",
        articles_index: "./pages/articles/index.js",
        about: "./pages/mine/about/index.js",
        album: "./pages/mine/album/index.js",
        navigation: "./pages/navigation/index.js",
        // 共享的入口
        vendors: ['jquery'],
    },

需要处理的问题
记得引入的html文件，其中chunks需要有vendors 否则不会被引入html文件，但是如果不写chunks，则所有的chunk都会被引入该html文件

 new HtmlWebpackPlugin({
                template: path.join(__dirname, "src/pages/home/index.html"),
                filename: "pages/home.html",
                chunks: ["home", "vendors"],
                title: '首页',
                conpress: true
            }),

给单独某个入口指定chunk名称

可以通过里边的filename来指定

 home: {
            import: "./pages/home/index.js",
            filename: 'pages/home/[name].js',
            dependOn: 'vendors'
        },

给所有的模块输出默认路径

 output: {
		// 这个是指定了所有资源的输出基本路径
        path: __dirname + '/dist',
        // 指定所有chunk默认路径 优先级低于单独给某个入口设置
        filename: 'script/[name].js',
      	
        // 导出的通过asset资源管理 输出的文件放的位置
       assetModuleFilename: './images/[hash][ext][query]'
    },

给资源管理文件单独设置输出位置

{ // 图片文件
    test: /\.(png|jpe?g|webp|gif)$/, 
    type: 'asset',
    generator: {
        filename: 'static/images/[hash][ext][query]'
    }
},
{   // 字体等文件
    test: /\.(eot|svg|ttf|woff2?)$/,
    type: "asset/resource",
    generator: {
        filename: "static/media/[hash:8][ext][query]",
    },
}

output.publicPath

在将资源放在其他服务器或者cdn托管时候，可以指定路径

Rule.enforce

在对其中loader进行匹配处理时候，
Normal 阶段: loader 上的 常规方法，会按照 前置(pre)、普通(normal)、行内(inline)、后置(post)类别的loader进行 顺序调用。模块源码的转换， 发生在这个阶段
我们可以通过将一个loader 的enforce 指定为pre 让他优先处理模块

// 禁用前置和普通 loaders
import { b } from '-!./file2.js';

output.clean

可以在打包输出之前先清理dist目录，而 clean-webpack-plugin可以选择性的清理，一般情况下设置clean 即可

Rule.generator

publicPath 跟output.publicPath一样都是指定输出的内容前面的字符串
generator.outputPath 指定相对于 output.path 的路径，当然如果没有指定generator.outputPath
直接将filename写成

 filename: 'static/images/[hash][ext][query]'

也是可以创建目录的

{ // 图片文件
    test: /\.(png|jpe?g|webp|gif)$/, type: 'asset/resource',
    generator: {
        outputPath: 'static/images',
        publicPath: 'fuck',
        filename: '[hash][ext][query]'
    }
},

生成的连接

 <img src="fuck88f068a97a175bca5524.png" alt="">

但是存在一个问题（我目前也不知道怎么解决）：
如果将目录结构写在outputPath 这个只是将资源放在指定的目录结构里边，但是，路径上并没有携带上这个目录结构，所以需要指定publicPath，

比如将dist作为网站根目录

 publicPath: '/static/images/',
 outputPath: 'static/images',
 filename: '[hash][ext][query]'

如果直接将目录卸载filename里边，则创建了目录同时也能正确引入目录结构