成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

webpack1學(xué)習(xí)筆記

alexnevsky / 3210人閱讀

摘要：基本介紹引入文件打包文件預(yù)覽選項(xiàng)參數(shù)基本配置創(chuàng)建項(xiàng)目創(chuàng)建并引入創(chuàng)建可參考官網(wǎng)配置模塊化輸出指定文件為詳解和的種單一字符串，數(shù)組，對象根絕不同而不同數(shù)組和打包成對象多頁面應(yīng)用

基本介紹

引入文件

// a.js
require("./b.js")
require("style-loader!css-loader!./a.css")

打包文件

// cli
webpack hello.js hello.bundle.js --module-bind "css=style-loader!css-loader!"

預(yù)覽html

// html

webpack選項(xiàng)參數(shù)
--watch
--progress
--display-modules
--display-reasons
--color
--display-error-details

基本配置

創(chuàng)建項(xiàng)目
mkdir webpack-demo
cd webpack-demo
npm init
npm install webpack --save-dev
mkdir src
mkdir dist
vsc //vscode
創(chuàng)建html并引入bundle.js
創(chuàng)建webpack.config.js//可參考官網(wǎng)配置API

//模塊化輸出
module.exports={
    // 
    entry:"./src/script/main.js",
    output:{
        path:"./dist/js",
        filename:"bundle.js"
    },
}
//cli
webpack --config webpack.dev.config.js//指定config文件為webpack.dev.config.js
//
詳解entry和output

entry的3種：單一字符串，數(shù)組，對象
output根絕entry不同而不同
【數(shù)組】
main和sub-main打包成bundle

module.exports={
    entry:[
    "./src/script/main.js",
    "./src/script/sub-main.js"
    ],
    output:{
        path:"./dist/js",
        filename:"bundle.js"
    },
}

【對象】--多頁面應(yīng)用
main和打包成bundle

module.exports={
    entry:{
        page1:"./src/script/main.js",
        page2:[
            "./src/script/main.js",
            "./src/script/sub-main.js"
        ],    
    },
    output:{
        path:"./dist/js",
        //【占位符】hash本次 chunkhash靜態(tài)資源改變后才變化
        filename:"[name]-[hash]-[chunkhash].js"
    },
}
使用插件 html-wabpack-plugin

作用：同步html內(nèi)引入的js的chunkhash

//cli
npm install html-wabpack-plugin --save-dev
//webpack.config.js
var htmlWebpackPlugin=require("html-wabpack-plugin")
module.exports={
    // 上下文的默認(rèn)環(huán)境就是當(dāng)前運(yùn)行腳本的目錄
    // context:
    entry:{
        page1:"./src/script/main.js",
        page2:[
            "./src/script/main.js",
            "./src/script/sub-main.js"
        ],    
    },
    output:{
        path:"./dist",
        // js
        filename:"js/[name]-[hash]-[chunkhash].js",
        // 上線環(huán)境的
        publicPath:"http://m.mi.com/"
    },
    // 所有plugin都輸出到output.path
    plugin:[
        //初始化插件 并傳入相關(guān)參數(shù)
        new htmlWebpackPlugin({
            // 上下文環(huán)境 以根目錄html作為模板 
            template:"index.html",
            filename:"index-[hash].html",
            inject:"head",//不配置的話 默認(rèn)放到body標(biāo)簽內(nèi)
            //向html里面?zhèn)鲄?
            //在html用<%= htmlWebpackPlugin.options.title %>接收
            title:"haha",//date:new Date(),
            //壓縮html 刪除注釋和空格
            minify:{
                removeComments:true,
                collapseWhitespace:true
            }
        });
    ]
}




<% for (var key in htmlWebpackPlugin.files) {%>
<%= key %> : <%= JSON.stringify(htmlWebpackPlugin.files[key]) %>
<% } %>

<% for (var key in htmlWebpackPlugin.options) {%>
<%= key %> : <%= JSON.stringify(htmlWebpackPlugin.files[key]) %>
<% } %>

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/82267.html

相關(guān)文章

  • webpack1學(xué)習(xí)筆記

    摘要：基本介紹引入文件打包文件預(yù)覽選項(xiàng)參數(shù)基本配置創(chuàng)建項(xiàng)目創(chuàng)建并引入創(chuàng)建可參考官網(wǎng)配置模塊化輸出指定文件為詳解和的種單一字符串，數(shù)組，對象根絕不同而不同數(shù)組和打包成對象多頁面應(yīng)用 基本介紹 引入文件 // a.js require(./b.js) require(style-loader!css-loader!./a.css) 打包文件 // cli webpack hello.js hel...

    LdhAndroid 評論0 收藏0

  • webpack1學(xué)習(xí)筆記

    摘要：基本介紹引入文件打包文件預(yù)覽選項(xiàng)參數(shù)基本配置創(chuàng)建項(xiàng)目創(chuàng)建并引入創(chuàng)建可參考官網(wǎng)配置模塊化輸出指定文件為詳解和的種單一字符串，數(shù)組，對象根絕不同而不同數(shù)組和打包成對象多頁面應(yīng)用 基本介紹 引入文件 // a.js require(./b.js) require(style-loader!css-loader!./a.css) 打包文件 // cli webpack hello.js hel...

    DevYK 評論0 收藏0

  • webpack v2升級踩坑筆記

    摘要：從再到目前當(dāng)紅明星，前端模塊打包技術(shù)日新月異，在今年月份和月份左右接連更新了和版本為了減少冗余模塊，縮減文件大小，中也加入了關(guān)于的特征，可以查看知乎如何評價(jià)新引入的代碼優(yōu)化技術(shù)的討論。 從Grunt->gulp->webpack,再到目前當(dāng)紅明星rollup，前端模塊打包技術(shù)日新月異，webpack在今年1月份和6月份左右接連更新了v2和v3版本,為了減少冗余模塊，縮減bundle文件...

    JayChen 評論0 收藏0

  • 小白上學(xué)のwebpack+vue初級使用指南

    摘要：但我們今天學(xué)的是，原因我還不會(huì)而且新手還是學(xué)習(xí)為主吧。原因中文文檔全，學(xué)習(xí)曲線簡單，很容易上手。后續(xù)總結(jié)在學(xué)習(xí)打包工具過程中由于出現(xiàn)的問題各種蛋疼，讓很多人都半途而廢。大家互相學(xué)習(xí)共同進(jìn)步本節(jié)講的都是很基礎(chǔ)的東西，自己可以延展一下。 寫這篇文章的時(shí)候先說一下原因：webpack：現(xiàn)在很流行的打包工具；推薦原因：學(xué)習(xí)成本比gulp，fis3等簡單，就是這么直接！vue：國人開發(fā)的MVVM...

    PascalXie 評論0 收藏0

  • 前端補(bǔ)集 - 收藏集 - 掘金

    摘要：原文地址一個(gè)非常適合入門學(xué)習(xí)的博客項(xiàng)目前端掘金一個(gè)非常適合入門學(xué)習(xí)的項(xiàng)目，代碼清晰結(jié)構(gòu)合理新聞前端掘金介紹一個(gè)由編寫的新聞。深入淺出讀書筆記知乎專欄前端專欄前端掘金去年的一篇老文章，恰好今天專欄開通，遷移過來。 破解前端面試（80% 應(yīng)聘者不及格系列）：從閉包說起 - 掘金修訂說明：發(fā)布《80% 應(yīng)聘者都不及格的 JS 面試題》之后，全網(wǎng)閱讀量超過 6W，在知乎、掘金、cnodejs ...

    YorkChen 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<