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

2回答

提问者慕后端2049527 2017-10-20 10:48:13

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>

0 回复有任何疑惑可以回复我~

收起回答

Rosen 2017-10-19 19:15:04

应该是配置文件那块的问题，贴一下打包结果，和你的配置文件

0 回复有任何疑惑可以回复我~

收起回答

提问者慕后端2049527 #1
```
webpackconfig和打包后的html已经发了
```
回复有任何疑惑可以回复我~ 2017-10-20 10:49:36

提问者慕后端2049527 #2

发现了问题，只要加htmlwebpackplugin，加上filename参数，路径就会出错，删掉都是对的

回复有任何疑惑可以回复我~ 2017-10-20 11:07:43

Rosen 回复提问者慕后端2049527 #3
```
/是根目录，view/index.js是相对路径，同./view/index.js。
```
回复有任何疑惑可以回复我~ 2017-10-20 16:31:29

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

正在回答回答被采纳积分+3

2回答

相似问题

请选择置顶位置

本课精华内容

除了webpack-dev-server还有什么自动刷新的本地服务器？

老师，我的css和js也是加载不出来

老师，sass安装不上

关于font-awesome引入失败

登陆成功，但是首页没有显示，欢迎你xxx?

热搜

最近搜索清空

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

正在回答 回答被采纳积分+3

2回答

相似问题

请选择置顶位置

本课精华内容

除了webpack-dev-server还有什么自动刷新的本地服务器？

老师，我的css和js也是加载不出来

老师，sass安装不上

关于font-awesome引入失败

登陆成功，但是首页没有显示，欢迎你xxx?

正在回答回答被采纳积分+3