成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專(zhuān)欄INFORMATION COLUMN

webpack devServer 無(wú)法自動(dòng)刷新瀏覽器，但是可以自動(dòng)編譯

DataPipeline / 3724人閱讀

摘要：后面設(shè)置的輸出路徑都以此為基礎(chǔ)用于文件路徑查找抽離文件自動(dòng)生成文件熱模塊更新把注釋掉之后，可以加載成功文件和自動(dòng)刷新了。估計(jì)是因?yàn)榘盐募汲殡x到這里了，所以在下，引用和沒(méi)有效。只是估計(jì)，新手上路，目前對(duì)的使用還是摸石過(guò)河。

這幾天在學(xué)習(xí)webpack使用中，發(fā)現(xiàn)的一個(gè)問(wèn)題，記錄一下
問(wèn)題：
1.webpack devServer 無(wú)法自動(dòng)刷新瀏覽器，但是可以自動(dòng)編譯
2.無(wú)法加載js文件（不使用devServer情況下，可以正常加載js）

webpack.config.js的配置如下：

var path = require("path");
var webpack = require("webpack");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin = require("html-webpack-plugin");
// 封裝自動(dòng)生成html插件需要的參數(shù)
var getHtmlConfig = function(name){
    return {
            filename : "view/" + name + ".html",
            template : "./src/view/" + name + ".html",
            inject : "true",
            hash : "true",
            chunks :["common",name]
    };
}

module.exports = {
    mode : "development",/*三種打包模式，development（用于開(kāi)發(fā)，方便閱讀）、production（用于上線，壓縮優(yōu)化）、none（啥都不設(shè)置，給機(jī)器看的）*/
    entry : {//入口
        "common" : "./src/page/common/index.js",
        "index" : "./src/page/index/index.js",
        "login" : "./src/page/login/index.js"
        
    },
    
    devServer : {//告訴開(kāi)發(fā)服務(wù)器(dev server)，在哪里查找文件
        contentBase : path.join(__dirname, "dist"),
        inline : true
    },
    output : {//輸出
        filename : "js/[name].js",
        path : path.resolve(__dirname,"dist"),//絕對(duì)路徑，當(dāng)前目錄下的dist。后面設(shè)置的輸出路徑都以此為基礎(chǔ)
    },
    module : {//loader
        rules : [
            {
                test : /.css$/,
                use : ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: "css-loader",
                    publicPath : "../"http://用于CSS文件url路徑查找：url(../resource/xxx.jpg)
                })
            },
            {
                test: /.(gif|png|jpg|woff|svg|eot|ttf)??.*$/,
                use: 
                    {
                        loader : "url-loader",
                        options : {
                            limit : 10000,
                            name : "resource/[name]-[hash].[ext]"
                        }
                    }
            }
        ]
    },
    plugins : [
        // 抽離css文件
        new ExtractTextPlugin({
            filename: "css/bundle.css",
            disable: false,
            allChunks: true
        }),
        // 自動(dòng)生成html文件
        new HtmlWebpackPlugin(getHtmlConfig("index")),
        new HtmlWebpackPlugin(getHtmlConfig("login")),
        //熱模塊更新
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin()
    ],
    /* 把optimization注釋掉之后，devserver可以加載成功js文件和自動(dòng)刷新了。命令行打包顯示：
    js/vendors~common~index~login.js    345 KiB  vendors~common~index~login  [emitted]  vendors~common~index~login  
    估計(jì)是因?yàn)榘裫s文件都抽離到vendors~common~index~login.js這里了，所以在devserver下，index.html引用index.js和common.js沒(méi)有效 */
//     optimization: {
// 
//         splitChunks: {
//           chunks: "initial",
//           minSize: 30000,
//           maxSize: 0,
//           minChunks: 1,
//           maxAsyncRequests: 5,
//           maxInitialRequests: 3,
//           automaticNameDelimiter: "~",
//           name: true,
//           cacheGroups: {
//             vendors: {
//               test: /[/]node_modules[/]/,
//               priority: -10
//             },
//             commons: { 
//                     test: /page//,
//                     name: "page",
//                     priority: 10,
//                     enforce: true
//             }
//           }
//         }
//     }
    
};

命令行打包后顯示信息：

解決：
把optimization注釋掉之后，devserver可以加載成功js文件和自動(dòng)刷新了。估計(jì)是因?yàn)榘裫s文件都抽離到vendors~common~index~login.js這里了，所以在devserver下，index.html引用index.js和common.js沒(méi)有效。
只是估計(jì)，新手上路，目前對(duì)webpack的使用還是摸石過(guò)河。大家知道原因麻煩評(píng)論告知

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/110216.html

相關(guān)文章

  • webpack優(yōu)化

    摘要：使用要給項(xiàng)目構(gòu)建接入動(dòng)態(tài)鏈接庫(kù)的思想，需要完成以下事情把網(wǎng)頁(yè)依賴(lài)的基礎(chǔ)模塊抽離出來(lái)，打包到一個(gè)個(gè)單獨(dú)的動(dòng)態(tài)鏈接庫(kù)中去。接入已經(jīng)內(nèi)置了對(duì)動(dòng)態(tài)鏈接庫(kù)的支持，需要通過(guò)個(gè)內(nèi)置的插件接入，它們分別是插件用于打包出一個(gè)個(gè)單獨(dú)的動(dòng)態(tài)鏈接庫(kù)文件。 webpack優(yōu)化 查看所有文檔頁(yè)面：全棧開(kāi)發(fā)，獲取更多信息。原文鏈接：webpack優(yōu)化，原文廣告模態(tài)框遮擋，閱讀體驗(yàn)不好，所以整理成本文，方便查找。 ...

    ChanceWong 評(píng)論0 收藏0

  • webpack 單頁(yè)面應(yīng)用實(shí)戰(zhàn)

    摘要：關(guān)于這個(gè)單頁(yè)面應(yīng)用大家可以直接去我的上查看，我將結(jié)合這個(gè)項(xiàng)目去介紹。 這篇文章將介紹如何利用 webpack 進(jìn)行單頁(yè)面應(yīng)用的開(kāi)發(fā)，算是我在實(shí)際開(kāi)發(fā)中的一些心得和體會(huì),在這里給大家做一個(gè)分享。webpack 的介紹這里就不多說(shuō)了，可以直接去官網(wǎng)查看。 關(guān)于這個(gè)單頁(yè)面應(yīng)用大家可以直接去我的github上查看https://github.com/huangshuwei/webpackFor...

    anonymoussf 評(píng)論0 收藏0

  • webpack 項(xiàng)目構(gòu)建：（三）開(kāi)發(fā)環(huán)境——本地服務(wù)器搭建

    摘要：上一章我們了解了的編譯環(huán)境搭建項(xiàng)目構(gòu)建二編譯環(huán)境搭建這一章我們會(huì)結(jié)合的，介紹本地測(cè)試服務(wù)器的搭建過(guò)程。三開(kāi)發(fā)環(huán)境有一些特性是專(zhuān)門(mén)用于開(kāi)發(fā)環(huán)境的，可以幫助我們搭建一個(gè)更好的開(kāi)發(fā)環(huán)境。我們可以通過(guò)配合使用來(lái)搭建本地服務(wù)。 注：以下教程均在 windows 環(huán)境實(shí)現(xiàn)，使用其他操作系統(tǒng)的同學(xué)實(shí)踐過(guò)程可能會(huì)有些出入。 ??上一章我們了解了 webpack 的 ES6 編譯環(huán)境搭建：webpack...

    tolerious 評(píng)論0 收藏0

  • webpack配置

    摘要：配置無(wú)入口的在輸出時(shí)的文件名稱(chēng)。配置發(fā)布到線上資源的前綴，為類(lèi)型。則是用于配置這個(gè)異步插入的標(biāo)簽的值。配置以何種方式導(dǎo)出庫(kù)。是字符串的枚舉類(lèi)型，支持以下配置。在為時(shí)，配置將沒(méi)有意義。是可選配置項(xiàng)，類(lèi)型需要是其中一個(gè)。 webpack配置 查看所有文檔頁(yè)面：全棧開(kāi)發(fā)，獲取更多信息。原文鏈接：第2章 配置，原文廣告模態(tài)框遮擋，閱讀體驗(yàn)不好，所以整理成本文，方便查找。 配置 Webpack...

    Doyle 評(píng)論0 收藏0

  • React入門(mén)系列 - 2 編寫(xiě)第一個(gè)Hello world的React程序

    摘要：安裝必要的開(kāi)發(fā)包安裝兩個(gè)包安裝編寫(xiě)一個(gè)的首先我們編寫(xiě)一個(gè)的組件但是這僅僅是一個(gè)組件，我們需要一個(gè)頁(yè)面來(lái)容納的組件。到這一步，需要準(zhǔn)備的東西已經(jīng)完成了。 2.1 采用create react app 編寫(xiě) create-react-app項(xiàng)目 [[點(diǎn)擊前往Github]](https://github.com/facebook/c... 是facebook推出的入門(mén)初始化項(xiàng)目，適合新手第...

    PingCAP 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<