关于webpack打包多页面遇到的问题，求解！！

目前是用webpack打包多页面。

1.如何把output输出文件在打包完成后不放到html模板内？

入口出口：

entry: {
    main: path.resolve(__dirname, "content/js/main.js")
},
output: {
    path: path.resolve(__dirname, "dist")
},

main.js文件内容：

import "../css/default.css";
import "../font/iconfont.css";
/*引入bootstrap响应式系统*/
import "../css/suit.css";
import "../css/whole.css";

/*载入图片*/ 
import "../image/backstage/login_bg.png";
import "../image/backstage/login_bg2.png";
import "../image/agent.png";
import "../image/agent2.png";
import "../image/agent3.png";
import "../image/agent4.png";
import "../image/agent5.png";
import "../image/agent6.png";

简而言之，就是我通过入口文件main.js，把需要的css和图片都打包进来。

但是发现生成的output出口文件main.js，会添加到每个页面的底部（如下图所示），而我的页面都是通过html-webpack-plugin插件来生成的。

图片描述

我发现图片资源和css已经是静态的了，此时output出口文件main.js没啥用处，那这个文件该如何在打包好后从页面中移除？

2.打包好的css资源，如何自由的控制其插入html的位置？

图片描述

因为我是打包多页面的，很多页面都有自己的样式，由于不多，于是我就直接内嵌<style>写入html中。但是发现打包好后的css放在<head>最后面，这优先级会高于我的<style>内样式（希望是能够插在<style>标签前面），该如何将打包的css资源控制其插入位置？

webpack html css javascript

阅读 3.7k

4 个回答

✓ 已被采纳

1.如何把output输出文件不放到html模板内？

使用 html-webpack-plugin插件来生成页面的时候，修改配置
方式一：设置参数 chunks，设置允许插入的js；
new HtmlWebpackPlugin({

    .....
    chunks: ['main']
    .....
})

方法二：设置参数 excludeChunks，设置跳过不插入的js；
new HtmlWebpackPlugin({

    .....
    excludeChunks: ['main']
    .....
})

2.打包好的css资源，如何自由的控制其插入html的位置？
查看 html-webpack-plugin@4.0.0-beta.5插件的源码

//index.js
if (head.length) {
      // Create a head tag if none exists
      if (!headRegExp.test(html)) {
        if (!htmlRegExp.test(html)) {
          html = '<head></head>' + html;
        } else {
          html = html.replace(htmlRegExp, match => match + '<head></head>');
        }
      }

      // Append assets to head element
      html = html.replace(headRegExp, match => head.join('') + match);
    }

从这段源码中可以看出，webpack打包的css会被append到head的结尾处。所以这个css放的位置暂时不可以随意指定。

最好还是将内嵌到页面中的style提取出来，将样式和布局解耦。

flamesnow

61621

发布于
2019-05-13

通过修改html-webpack-plugin源代码达到预期效果。
webpack.config.js配置，新增自定义两个字段
图片描述