webpack4多入口多出口打包index.html自动加上代理路径

最新推荐文章于 2024-04-25 22:43:08 发布

luckberry

最新推荐文章于 2024-04-25 22:43:08 发布

阅读量2.4k

点赞数 1

分类专栏：【React】文章标签： React webpack webpack4 HtmlWebpackPlugin

本文链接：https://blog.csdn.net/luckberry/article/details/89465471

版权

【React】专栏收录该内容

1 篇文章 0 订阅

订阅专栏

为了避免项目代码都打包在一个文件下面，我采用多入口多出口打包的方式，以src/pages文件夹为目录，然后在pages下分别创建每个功能的文件夹进行代码开发。这样打包之后就会分别打到每个文件夹下。效果如图：

chargeAction文件夹：

debang文件夹：

这样访问的时候就可以通过：

http://localhost:8106/文件夹名/来访问每个功能点，如图：

但是还有个需求：服务器上是通过nginx转发的，转发配置了/mb前缀，所以部署到服务器上，index.html的css和js路径必须都加上/mb，怎么办呢？不可能一个一个页面去修改。ejs模板是个好东西！public/index.ejs

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>welcome</title>
        <% for (var css in htmlWebpackPlugin.files.css) { %>
        <link href="<%=process.env.NODE_ENV=='production'?'/mb'+htmlWebpackPlugin.files.css[css]:htmlWebpackPlugin.files.css[css] %>" rel="stylesheet">
        <% } %>
        <script  src=https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js></script>
        <script>
        if ('addEventListener' in document) {
            document.addEventListener('DOMContentLoaded', function() {
                FastClick.attach(document.body);
            }, false);
        }
        if(!window.Promise) {
            document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>');
        }
    </script>
    </head>
    <body>
        <div id="root" style="height:100vh;"></div>
        <% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
        <script type="text/javascript" src="<%=process.env.NODE_ENV=='production'?'/mb'+htmlWebpackPlugin.files.chunks[chunk].entry:htmlWebpackPlugin.files.chunks[chunk].entry %>"></script>
        <% } %>
    </body>
</html>

然后把模板文件改成index.ejs即可。

new HtmlWebpackPlugin({
    template: path.resolve(__dirname, "./public/index.ejs"),
    filename: `${item}/index.html`,
    chunks: ["manifest", "vendor", item],
    inject: false//取消自动插入，使用ejs模板
})

output中也要配置publicPath，不然css里面引用的图片路径会不对。

output: {
    path: __dirname + "/build",
    filename: "[name]/[name]-[hash].js",
    publicPath: process.env.NODE_ENV=='production'?'/mb/':'/' //因为服务器用了nginx代理/mb
},

package.json中build命令：

"scripts": {
    "build": "webpack -p --define process.env.NODE_ENV='\"production\"' --progress --config webpack.pro.config.js",
    "dev": "webpack-dev-server --mode development --config webpack.dev.config.js",
  },

这样运行 npm run build打包后就index.html会自动加上/mb

多入口多出口可参考其他大神文章：https://segmentfault.com/a/1190000018381677

luckberry

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
webpack4多入口多出口打包index.html自动加上代理路径

为了避免项目代码都打包在一个文件下面，我采用多入口多出口打包的方式，以src/pages文件夹为目录，然后在pages下分别创建每个功能的文件夹进行代码开发。这样打包之后就会分别打到每个文件夹下。效果如图：chargeAction文件夹：debang文件夹：这样访问的时候就可以通过：http://localhost:8106/文件夹名/来访问每个功能点，如图：但...
复制链接

扫一扫