React技術棧——webpack

YorkChen 發布于2019-08-19 18:41 / 2716人閱讀

摘要：一直在用，也能完美滿足目前業務需求。我廠的也有大量的貼合業務線。最近在看，要打通的技術棧，學習是必不可少的了。配置好文件后，下面命令可以監聽文件變化在配置文件里一樣可以實現在做網頁開發時候，需要用到服務器，提供了安裝很簡單

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

最近在看React，要打通React的技術棧，學習Webpack是必不可少的了。

從npm上安裝很簡單：

npm install webpack -g

Webpack特色：

模塊化，支持異步和同步
Loader，把各種文件拆分成模塊的支持
更機智的編譯
插件系統，提供各色各樣的插件，毫不遜色的其他打包工具，要什么價什么

簡單demo

先上第一個demo：

cats.js

var cats = ["dave", "henry", "martha"];
module.exports = cats;

app.js

var cats = require("./cats");
console.log("cats")

webpack登場：

webpack ./app.js app.bundle.js

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

利用配置文件來操作webpack

-webpack.config.js

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

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

使用loader

loader應該是webpack的預加載工具

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，不僅僅是個json對象

entry

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

傳入object時
{
    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繞過緩存機制
output: {
    path: "/home/project/cdn/assets/[hash]",
    publicPath: "http://cdn.example.com/assets/[hash]/"
}

Watch

webpack有個很牛逼的地方，熱刷新。

配置好文件后，下面命令可以監聽文件變化

webpack --watch

在配置文件里一樣可以實現：

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

在做網頁開發時候，需要用到服務器，webpack提供了webpack-dev-server

安裝很簡單:

npm install webpack-dev-server -g

demo:

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

GPU云服務器云服務器技術棧全棧技術 js技術棧 webpack

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/79876.html

React技術棧實現XXX點評App demo

摘要：項目的架構也是最近在各種探討研究。還求大神多指點項目技術總結技術棧項目結構探究初體驗關于項目中的配置說明項目簡單說明開發這一套，我個人的理解是體現的是代碼分層職責分離的編程思想邏輯與視圖嚴格區分。前端依舊使用技術棧完成。項目地址：https://github.com/Nealyang/R...技術棧：react、react-router4.x 、 react-redux 、 webp...

wslongchen 2019-08-21 16:24 評論0 收藏0
webpack工程化集成React技術棧（一）

項目開始前，我們先聊一聊關于項目的一些說明。該項目起始于2017年初，當時公司主要技術棧為gulp+angular，鑒于react的火熱的生態，在公司決定研發bss管理系統時選用react開發，目的也是為react native打下基礎，以解決后期公司大前端技術棧的逐步成熟。（當時沒有選擇vue開發的主要原因是weex生態還不夠特別成熟），既然決定換新，項目的構建也跟著一起換，從gulp轉向火熱的...

tianhang 2019-08-22 14:47 評論0 收藏0
React 和 ES6 工作流之 Webpack的使用（第六部分）

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

Mr_houzi 2019-08-20 17:59 評論0 收藏0
React 和 ES6 工作流之 Webpack的使用（第六部分）

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

yunhao 2019-08-01 17:10 評論0 收藏0