亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

React技術(shù)棧——webpack

YorkChen / 2769人閱讀

摘要：一直在用，也能完美滿足目前業(yè)務(wù)需求。我廠的也有大量的貼合業(yè)務(wù)線。最近在看，要打通的技術(shù)棧，學(xué)習(xí)是必不可少的了。配置好文件后，下面命令可以監(jiān)聽(tīng)文件變化在配置文件里一樣可以實(shí)現(xiàn)在做網(wǎng)頁(yè)開(kāi)發(fā)時(shí)候，需要用到服務(wù)器，提供了安裝很簡(jiǎn)單

一直在用fis3，也能完美滿足目前業(yè)務(wù)需求。我廠的scrat也有大量的feature貼合業(yè)務(wù)線。

最近在看React，要打通React的技術(shù)棧，學(xué)習(xí)Webpack是必不可少的了。

從npm上安裝很簡(jiǎn)單：

npm install webpack -g
Webpack特色： 
  • 模塊化，支持異步和同步
    • 

  • Loader，把各種文件拆分成模塊的支持
    • 

  • 更機(jī)智的編譯
    • 

  • 插件系統(tǒng)，提供各色各樣的插件，毫不遜色的其他打包工具，要什么價(jià)什么
    •
    簡(jiǎn)單demo

    先上第一個(gè)demo：

    cats.js 
    var cats = ["dave", "henry", "martha"];
module.exports = cats;
    app.js 
    var cats = require("./cats");
console.log("cats")

    webpack登場(chǎng)：

    webpack ./app.js app.bundle.js

    這命令可以cats.js打包進(jìn)app.js里面,最后生成app.bundle.js

    利用配置文件來(lái)操作webpack

    -webpack.config.js

    module.exports = {
    entry: "./src/app",
    output: {
        path: "./bin",
        filename: "app.bundle"
    }
}

    配置完后，在文件夾直接webpack即可

    使用loader

    loader應(yīng)該是webpack的預(yù)加載工具

    module.exports = {
    entry: "./src/app.js",
    output: {
        path: "./bin",
        filename: "app.bundle.js"
    },
    module: {
        loaders: [{
            test: /.js$/,
            exclude: /node_moudles/,
            loader: "babel-loader"
        }]
    }
}
    使用plugins 
    module.exports = {
    entry: "./src/app.js",
    output: {
        path: "./bin",
        filename: "app.bundle.js"
    },
    module: {
        loaders: [{
            test: /.js$/,
            exclude: /node_moudles/,
            loader: "babel-loader"
        }]
    },
    plugins: [
        new webapck.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            },
            output: {
                comments: false
            }
        })
    ]
}
    CONFIGURATION OBJECT CONTENT

    可以編寫js，不僅僅是個(gè)json對(duì)象

    entry 
    基本語(yǔ)法：
{
    context: _dirname + "/app",
    entry: "./entry",
    output: {
        path: _dirname + "/dist",
        filename: "bundle.js"
    }
}

傳入object時(shí)
{
    entry: {
        page1: "./page1",
        page2: ["./entry1", "./entry2"]
    },
    output: {
        filename: "[name].bundle.js",
        chunkFilename: "[id].bundle.js"
    }
}
    output 
    multiple entries
{
    entry: {
        app: "./src/app.js",
        search: "./src/search.js"            
    },
    output: {
        filename: "[name].js",
        path: __dirname + "/built"            
    }
}

//outpu: ./built/app.js  ./built/search.js
    output.pubicPath 
    適用于類似CDN匹配需求
可添加hash繞過(guò)緩存機(jī)制
output: {
    path: "/home/project/cdn/assets/[hash]",
    publicPath: "http://cdn.example.com/assets/[hash]/"
}
    Watch

    webpack有個(gè)很牛逼的地方，熱刷新。

    配置好文件后，下面命令可以監(jiān)聽(tīng)文件變化

    webpack --watch

    在配置文件里一樣可以實(shí)現(xiàn)：

    module.exports = {
    entry: {
        app: "./src/app.js"
    },
    output: {
        filename: "bundle.js",
    },
    watch: true
}

    在做網(wǎng)頁(yè)開(kāi)發(fā)時(shí)候，需要用到服務(wù)器，webpack提供了webpack-dev-server

    安裝很簡(jiǎn)單:

    npm install webpack-dev-server -g

    demo:

    webpack-dev-server --host 0.0.0.0 --port 8080 --inline

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

    轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/79876.html

    相關(guān)文章

    • React技術(shù)棧實(shí)現(xiàn)XXX點(diǎn)評(píng)App demo

      摘要：項(xiàng)目的架構(gòu)也是最近在各種探討研究。還求大神多指點(diǎn)項(xiàng)目技術(shù)總結(jié)技術(shù)棧項(xiàng)目結(jié)構(gòu)探究初體驗(yàn)關(guān)于項(xiàng)目中的配置說(shuō)明項(xiàng)目簡(jiǎn)單說(shuō)明開(kāi)發(fā)這一套，我個(gè)人的理解是體現(xiàn)的是代碼分層職責(zé)分離的編程思想邏輯與視圖嚴(yán)格區(qū)分。前端依舊使用技術(shù)棧完成。 項(xiàng)目地址：https://github.com/Nealyang/R...技術(shù)棧：react、react-router4.x 、 react-redux 、 webp...

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

    • webpack工程化集成React技術(shù)棧（一）

      項(xiàng)目開(kāi)始前，我們先聊一聊關(guān)于項(xiàng)目的一些說(shuō)明。該項(xiàng)目起始于2017年初，當(dāng)時(shí)公司主要技術(shù)棧為gulp+angular，鑒于react的火熱的生態(tài)，在公司決定研發(fā)bss管理系統(tǒng)時(shí)選用react開(kāi)發(fā)，目的也是為react native打下基礎(chǔ)，以解決后期公司大前端技術(shù)棧的逐步成熟。（當(dāng)時(shí)沒(méi)有選擇vue開(kāi)發(fā)的主要原因是weex生態(tài)還不夠特別成熟），既然決定換新，項(xiàng)目的構(gòu)建也跟著一起換，從gulp轉(zhuǎn)向火熱的...

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

    • React 和 ES6 工作流之 Webpack的使用（第六部分）

      摘要：在上面的列表中，是自解釋型的。我們將使用后者。調(diào)整文件的內(nèi)容到這一步，這個(gè)應(yīng)用就具備熱刷新的功能。下一步，更新文件中的到現(xiàn)在為止，如果你在控制臺(tái)運(yùn)行壓縮文件將被創(chuàng)建并且放在路徑下面。 這是React和ECMAScript2015系列文章的最后一篇，我們將繼續(xù)探索React 和 Webpack的使用。 下面是所有系列文章章節(jié)的鏈接： React 、 ES6 - 介紹（第一部分） Rea...

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

    • React 和 ES6 工作流之 Webpack的使用（第六部分）

      摘要：在上面的列表中，是自解釋型的。我們將使用后者。調(diào)整文件的內(nèi)容到這一步，這個(gè)應(yīng)用就具備熱刷新的功能。下一步，更新文件中的到現(xiàn)在為止，如果你在控制臺(tái)運(yùn)行壓縮文件將被創(chuàng)建并且放在路徑下面。 這是React和ECMAScript2015系列文章的最后一篇，我們將繼續(xù)探索React 和 Webpack的使用。 下面是所有系列文章章節(jié)的鏈接： React 、 ES6 - 介紹（第一部分） Rea...

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

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

    0條評(píng)論

    閱讀需要支付1元查看
    <