关于html-webpack-plugin自动注入js和css到页面的问题

来源：3-9 项目初始代码提交与本章知识点总结

慕后端2049527

2017-10-19

打包后的html中，自动注入的js和css路径有重复，导致找不到这些文件，../user/........//dist/js....这个形式，按道理应该是../js/xxx.js，网上查了很久了，不知道什么问题

写回答

2回答

慕后端2049527

提问者

2017-10-20

var webpack             = require("webpack");
var ExtractTextPlugin   = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin   = require('html-webpack-plugin');

module.exports={
    entry:{
        "common"    : [__dirname+"/src/page/common/common.js"],
        "index"     : [__dirname+"/src/page/index/index.js"],
        "login"     : [__dirname+"/src/page/login/login.js"]
        },//webpack编译入口文件

    output:{
        path:__dirname+"/dist",//打包文件所在目录
        filename:"/js/[name].js"//打包文件名称
    },

    externals:{
        "jquery" : "window.jQuery"
    },

    module : {
        loaders : [
            { 
                test: /\.css$/, 
                //loader: "style-loader!css-loader" //其中css-loader用于解析，而style-loader则将解析后的样式嵌入js代码
                loader : ExtractTextPlugin.extract("style-loader","css-loader")
            }
        ]
    },
    
    plugins : [
        new webpack.optimize.CommonsChunkPlugin({
            name : "common",
            filename : "/js/base.js",
        }),
        
        new ExtractTextPlugin("/css/[name].css"),

        new HtmlWebpackPlugin({
            template : "./src/view/index.html",
            filename : "/view/index.html",
            inject   : true,
            hash     : true,
            chunks   : ["common","index"]

        })
    ]
};

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Webpack Sample Project</title> 
  <link href="../Users/Administrator/Desktop/happytmall/dist//css/index.css?2f06bba8cfc9aa7a6212" rel="stylesheet"></head>
  <body>
    <p id='root'></p>
    <script type="text/javascript" src = "https://cdn.bootcss.com/jquery/2.1.2/jquery.min.js"></script>
    
    
  <script type="text/javascript" src="../Users/Administrator/Desktop/happytmall/dist//js/base.js?2f06bba8cfc9aa7a6212"></script><script type="text/javascript" src="../Users/Administrator/Desktop/happytmall/dist//js/index.js?2f06bba8cfc9aa7a6212"></script></body>
  
</html>