webpack4 文档（入门） - 第三章 - 出口

最新推荐文章于 2024-06-21 10:31:53 发布

qin & kong

最新推荐文章于 2024-06-21 10:31:53 发布

阅读量229

点赞数

分类专栏：前端 # webpack

本文链接：https://blog.csdn.net/qq_36605165/article/details/115328525

版权

前端同时被 2 个专栏收录

31 篇文章 0 订阅

订阅专栏

webpack

20 篇文章 0 订阅

订阅专栏

多入口单出口

webpack.config.js：

var path = require('path');
module.exports = {
    mode: 'development',
    entry: {
        entry1: ['./index1.js', './index2.js'],
        entry2: ['./index3.js', './index4.js']
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
}

在这里插入图片描述
可以将 output 的 filename 改为包含 ‘[name]’ 的名称，’[name]’ 会替换为入口的名称。

不指定出口文件名

webpack.config.js：

module.exports = {
    mode: 'development',
    entry: {
        entry1: ['./index1.js', './index2.js'],
        entry2: ['./index3.js', './index4.js']
    },
    output: {
        path: __dirname + '/dist'
    }
}

在这里插入图片描述
可以看出，不指定 output 的 filename 时，出口文件名默认就是入口名称。

出口 publicPath

这个属性值是按需加载（懒加载）脚本资源和其他静态资源文件（如图片，媒体文件等等）路径的前缀。

按需加载中的 publicPath

index.js：

console.log('index.js')
import('./test.js').then(() => {
    console.log('test.js is loaded');
});

webpack.config.js：

var {CleanWebpackPlugin} = require('clean-webpack-plugin');
module.exports = {
    mode: 'development',
    entry: {
        main: './index.js'
    },
    output: {
        path: __dirname + '/dist',
        publicPath: '/dist/'
    },
    plugins: [
        new CleanWebpackPlugin()
    ]
}

这里将 publicPath 的值设为了 “/dist/” ，在打包出的代码中搜索一下 “/dist/” 。

 // __webpack_public_path__
 __webpack_require__.p = "/dist/";

再搜一下 __webpack_require__.p 。

// script path function
function jsonpScriptSrc(chunkId) {
 	return __webpack_require__.p + "" + ({}[chunkId]||chunkId) + "." + {"0":"ecd714c6a7e081230508"}[chunkId] + ".js"
}

接着再搜索一下 jsonpScriptSrc 。

script.src = jsonpScriptSrc(chunkId);

而 jsonpScriptSrc 是 __webpack_require__.e 中用来获取异步模块的 src 的，然后再回顾 jsonpScriptSrc 的内容，可以看出出口的 publicPath 是异步模块资源链接的前缀。

来实践一下，先在打包目录下新建一个 index.html 并引入同级目录下的 main.js ，然后借助 Live Server 访问 index.html
在这里插入图片描述
报错的原因是找不到打包后的异步模块的代码，因为浏览器地址栏是这个…

http://127.0.0.1:5500/webpack3-output/no-demand-loading/dist/index.html

因为打包出的异步模块的代码是和 index.html 是同一级目录下的，所以应该将出口的 publicPath 改为 “” 或 “../dist/” 或 “/webpack3-output/no-demand-loading/dist/” 。

其他静态资源中的 publicPath

目录
在这里插入图片描述
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./static/index.css">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

static/index.css

.container {
    display: flex;
    align-items: center;
    justify-content: center;
}

index.js

console.log('index.js');

webapck.config.js

var { CleanWebpackPlugin } = require('clean-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    mode: 'development',
    entry: {
        main: './index.js'
    },
    output: {
        path: __dirname + '/dist',
        chunkFilename: '[name].js',
        publicPath: '/dist/'
    },
    module: {
        rules: [
            // 处理 html 标签的 src 和 href
            {
                test: /\.html$/,
                use: {
                    loader: 'html-loader'
                }
            },
            // 处理 css 文件
            {
                test: /\.css$/,
                use: [{
                    loader: 'file-loader',
                    options: {
                        name: '[name].css',
                        // 覆盖 output 的 publicPath
                        // publicPath: '/xxx/'
                    }
                }]
            },
        ]
    },
    plugins: [
        // 清除打包目录
        new CleanWebpackPlugin(),
        // 引入打包的 chunk 并将 html 扔进打包目录
        new HtmlWebpackPlugin({
            template: './index.html',
            // 覆盖 output 的 publicPaht
            publicPath: ''
        })
    ]
}

package.json

{
  "name": "html-publipath-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^5.2.0",
    "file-loader": "^6.2.0",
    "html-loader": "1"
  }
}

打包后的 index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/dist/index.css">
    <title>Document</title>
</head>
<body>
    
<script src="main.js"></script></body>
</html>

在不覆盖输出属性的 publicPath 的前提下，通过 html-loader 和 file-loader 这两个 loader 使得 index.html 中的 css 链接的 href 的前缀变成了输出属性的 publicPath 。

再次借助 Live Server 访问一下打包后的 index.html
在这里插入图片描述

试着访问一下链接 http://127.0.0.1:5500/dist/index.css ，看下响应
在这里插入图片描述
可以得出：因为请求到了 404 的 html ，最后导致 MIME 类型不匹配，请求被 canceled 。

需要改下 file-loader 的配置

// 处理 css 文件
{
    test: /\.css$/,
    use: [{
        loader: 'file-loader',
        options: {
            name: '[name].css',
            // 覆盖 output 的 publicPath
            publicPath: ['', '../dist', './'][~~(Math.random()*(2 - 0 + 1) + 0)]
        }
    }]
}