国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

WEBPACK 入門

mikasa / 1116人閱讀

摘要：入門什么是官網(wǎng)介紹是一個(gè)模塊打包器。處理帶有依賴關(guān)系的模塊，生成一系列表示這些模塊的靜態(tài)資源。。我們在當(dāng)前項(xiàng)目根目錄下新建一個(gè)文件，為命令配置選項(xiàng)。引入生成的在瀏覽器中打開。我們刷新頁面，可以發(fā)現(xiàn)頁面發(fā)生了變化。

webpack 入門 1. 什么是webpack

官網(wǎng)介紹：webpack是一個(gè)模塊打包器。webpack 處理帶有依賴關(guān)系的模塊，生成一系列表示這些模塊的靜態(tài)資源。(webpack is a module bundler.webpack takes modules with dependencies and generates static assets representing those modules.)。

webpack會(huì)把各種資源(js,png,css,less,等等)都作為模塊來使用和處理,最后轉(zhuǎn)化成一系列的靜態(tài)資源。

webpack都是怎么處理這些靜態(tài)資源的呢？

webpack提供了一系列的模塊加載器（loader）來編譯這些模塊。比如處理less文件，webpack提供了less-loader將less文件處理成css，然后再通過css-loader加載成css模塊，最后由style-loader加載器對其做最后的處理,等等。當(dāng)然，你還可以定制自己的加載器處理自己的特需需求。

2. 為什么使用webpack

對于單頁應(yīng)用來說，隨著項(xiàng)目的發(fā)展，在一個(gè)頁面中的javascript代碼會(huì)越來越多，引入的js庫會(huì)越來越多，這時(shí)候就需要把javascript代碼模塊化，這樣才能便于管理和后期的維護(hù)。對于一個(gè)新項(xiàng)目來說,推薦使用Commonjs規(guī)范來編寫代碼，但是webpack為了兼容以前的舊代碼，又同時(shí)支持CMD和AMD規(guī)范。

對于使用react開發(fā)項(xiàng)目的團(tuán)隊(duì)來說，webpack是必不可少的react開發(fā)神器。webpack中的react-hot-loader插件可以輕松實(shí)現(xiàn)react中模塊組件的熱替換，無刷新頁面就可以實(shí)時(shí)查看頁面所做的修改。有這樣的功能，誰還會(huì)拒絕使用webpack呢？

3. 使用webpack 
npm install webpack -g

安裝成功后執(zhí)行webpack -V 命令行會(huì)輸出webpack的版本后和webpack全部的options（選項(xiàng)）。

我們在當(dāng)前項(xiàng)目根目錄下新建一個(gè)webpack.config.js文件，為webpack命令配置選項(xiàng)。當(dāng)然你還可以通過命令行的方式來配置，但是那樣太麻煩，每次執(zhí)行都要敲一大堆命令，想想沒人會(huì)這么干。

一個(gè)簡單的webpack配置如下所示:

    var webpack = require("webpack");
    var path = require("path");

    module.exports = {
        entry: "./src/main.js", //入口文件,webpack會(huì)從入口文件出開始查找依賴遞歸進(jìn)行打包
        output: {
            path: path.join(__dirname, "www"),　　//打包后的文件位置
            filename: "js/bundle.js",　　//打包后的文件名
        },
        module: {
        loaders: [　　//配置模塊加載器,數(shù)組形式
            { test: /.(js|jsx)$/, loaders: ["babel?presets[]=react,presets[]=es2015"] },//babel加載器用于將es6轉(zhuǎn)化成es5,使用前請先安裝babel-loader再引入加載器
            ],
        }
    };

在src下創(chuàng)建一個(gè)main.js作為入口文件：

在main.js寫入以下內(nèi)容:

    document.write("study webpack!");

保存文件，在項(xiàng)目根目錄下執(zhí)行webpack命令后就會(huì)在www/js目錄下生產(chǎn)打包后的bundle.js文件

然后我們在www目錄下的index.html文件中直接用script標(biāo)簽引入這個(gè)生成的bundle.js就ok了。




   
   Title

在瀏覽器中打開index.html。
可以看到頁面出現(xiàn)了main.js中我們要打印的內(nèi)容：

4. 安裝webpack開發(fā)服務(wù)器(webpackd-dev-server)

webpack不僅提供了模塊打包功能,還為開發(fā)者提供了一個(gè)開發(fā)服務(wù)器,這個(gè)開發(fā)服務(wù)器會(huì)監(jiān)聽文件中的每一個(gè)改動(dòng),文件改動(dòng)會(huì)觸發(fā)瀏覽器自動(dòng)刷新頁面,實(shí)時(shí)查看自己代碼中的修改。執(zhí)行下面命令作為依賴安裝webpack-dev-server:

npm install webpack-dev-server --save-dev

在webpack.config.js同級(jí)目錄下,新建一個(gè)server.js,配置webpack-dev-server參數(shù)。為了使熱替換生效必須在以下三個(gè)位置配置信息：

在server.js中設(shè)置hot:true參數(shù)

在webpack.config.js的entry中加入"webpack/hot/dev-server

在webpack.config.js的plugins中加入HotModuleReplacementPlugin

具體配置信息如下：

server.js配置:

var webpack = require("webpack");
var WebpackDevServer = require("webpack-dev-server");
var config = require("./webpack.config.js");
new WebpackDevServer(webpack(config), {
    publicPath: config.output.publicPath,
    hot: true,　　//開啟熱調(diào)試
    historyApiFallback: true
}).listen(3000, "127.0.0.1", function (err, result) {
    if (err) {
        console.log(err);
    }
    console.log("server start");
});

webpack.config.js也要做修改:

var path = require("path");
var webpack = require("webpack");

module.exports = (function( ) {
    var config = {
        entry: [
            "webpack-dev-server/client?http://127.0.0.1:8000",
            "webpack/hot/dev-server",
            "./src/main.js"
        ],
        output: {
            path: path.join(__dirname, "www"),
            filename: "js/bundle.js",
            publicPath: "/www/"
        },
        module: {
            loaders: [
            ],
        }
    };

    config.plugins = [
        new webpack.NoErrorsPlugin(), //允許錯(cuò)誤不打斷程序
        new webpack.HotModuleReplacementPlugin(),　　//webpack熱替換插件
    ];


    return config;

})();

修改main.js中的內(nèi)容:

document.write("study webpack by webpack-dev-server);

修改過后執(zhí)行如下命令:

node server.js

當(dāng)在命令行看到

webpack: bundle is now VALID.

說明打包成功。我們刷新頁面，可以發(fā)現(xiàn)頁面發(fā)生了變化。

并且控制臺(tái)出現(xiàn)了兩條語句

HMR前綴的信息由webpack/hot/dev-server模塊產(chǎn)生，WDS前綴的信息由webpack-dev-server客戶端產(chǎn)生。（Messages prefixed with [HMR] originate from the webpack/hot/dev-server module. Messages prefixed with [WDS] originate from the webpack-dev-server client.）

我們可以發(fā)現(xiàn)在www/js/目錄下并沒有產(chǎn)生bundle.js,因?yàn)橥ㄟ^webpack-dev-server打包出來的文件并沒有實(shí)質(zhì)性的生成存儲(chǔ)在磁盤中,而是生成保存在內(nèi)存中。每次執(zhí)行node server.js 太繁瑣,我們可以在package.json中為這條命令另起別名:

這樣我們每次只要執(zhí)行npm start就可以啟動(dòng)webpack-dev-server了。

原文作者來自MaxLeap 團(tuán)隊(duì)_cloud成員：zhiyingzzhou
原文鏈接：https://blog.maxleap.cn/archives/727

歡迎關(guān)注微信訂閱號(hào)：從移動(dòng)到云端
歡迎加入我們的MaxLeap活動(dòng)qq群：555973817，我們將不定期做技術(shù)分享活動(dòng)。

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/79423.html

相關(guān)文章

  • webpack -> vue Component 從入門到放棄（一）

    摘要：本身也是運(yùn)行在環(huán)境中的模塊，它通常會(huì)返回一個(gè)函數(shù)。這個(gè)命名規(guī)則和搜索優(yōu)先級(jí)順序在的中定義。那就等下一篇介紹吧，一篇文章有太多內(nèi)容，會(huì)讓人很乏的從入門到放棄四從入門到放棄二從入門到放棄三源代碼 此篇文章僅僅是整理自己接觸webpack的入門過程，可能有很多不正確的地方，希望大家諒解，并指出錯(cuò)誤幫助改進(jìn)。 對于webpack的介紹和前期對他的入門使用，我覺得官方（中文網(wǎng)）已經(jīng)介紹的很簡單了...

    Ashin 評論0 收藏0

  • webpack入門學(xué)習(xí)手記（一）

    摘要：爭取早日能完全拋棄掉中文文檔，最終可以翻譯英文文檔，輸出英文文檔。待續(xù)相關(guān)文章入門學(xué)習(xí)手記一入門學(xué)習(xí)手記二入門學(xué)習(xí)手記三入門學(xué)習(xí)手記四 本人微信公眾號(hào)：前端修煉之路，歡迎關(guān)注。 showImg(https://segmentfault.com/img/bVbk0kO?w=1150&h=599); 之前用過gulp、grunt，但是一直沒有學(xué)習(xí)過webpack。這兩天剛好有時(shí)間，學(xué)習(xí)了下...

    mengera88 評論0 收藏0

  • webpack -> vue Component 從入門到放棄（三）

    摘要：離上一篇已經(jīng)一個(gè)星期了，人的拖延癥是沒法救的，今晚趁著蒙蒙春雨，來抒發(fā)抒發(fā)情感。插件的使用一般是在的配置信息選項(xiàng)中指定。本身內(nèi)置了一些常用的插件，還可以通過安裝第三方插件。從入門到放棄四從入門到放棄二從入門到放棄一源代碼 離上一篇已經(jīng)一個(gè)星期了，人的拖延癥是沒法救的，今晚趁著蒙蒙春雨，來抒發(fā)抒發(fā)情感。上一篇簡單介紹了webpack的配置，這里稍微再做一一下延伸 插件 插件可以完成更多 ...

    array_huang 評論0 收藏0

  • webpack 實(shí)踐筆記（一）--- 入門

    摘要：實(shí)踐筆記入門一官網(wǎng)文檔地址實(shí)踐工程地址本篇文章可切換到分支查看源代碼。簡單分步實(shí)踐創(chuàng)建一個(gè)空文件夾，進(jìn)入全局安裝創(chuàng)建文件創(chuàng)建執(zhí)行命令這個(gè)時(shí)候項(xiàng)目中多了一個(gè)文件，使用標(biāo)簽將其引入到中在瀏覽器中打開文件，頁面出現(xiàn)文字。 webpack 實(shí)踐筆記入門（一） [webpack官網(wǎng)文檔地址]:（http://webpack.github.io/docs...） [實(shí)踐工程地址]: (https:...

    bergwhite 評論0 收藏0

  • webpack -> vue Component 從入門到放棄（二）

    摘要：我們可以根據(jù)模塊類型擴(kuò)展名來自動(dòng)綁定需要的。當(dāng)需要加載的文件匹配的正則時(shí)，就會(huì)調(diào)用后面的對文件進(jìn)行處理，這正是強(qiáng)大的原因。這篇就這樣吧，感覺進(jìn)度有點(diǎn)慢從入門到放棄四從入門到放棄一從入門到放棄三源代碼 Foreword 上一篇簡單介紹了webpack的打包功能，應(yīng)該說是比較無意義的打包，對于開發(fā)人員來說，這種效率是非常低的。所以我們來點(diǎn)升華。 First Step 我們給第一篇例子中加個(gè)...

    DobbyKim 評論0 收藏0

  • webpack -> vue Component 從入門到放棄（二）

    摘要：我們可以根據(jù)模塊類型擴(kuò)展名來自動(dòng)綁定需要的。當(dāng)需要加載的文件匹配的正則時(shí)，就會(huì)調(diào)用后面的對文件進(jìn)行處理，這正是強(qiáng)大的原因。這篇就這樣吧，感覺進(jìn)度有點(diǎn)慢從入門到放棄四從入門到放棄一從入門到放棄三源代碼 Foreword 上一篇簡單介紹了webpack的打包功能，應(yīng)該說是比較無意義的打包，對于開發(fā)人員來說，這種效率是非常低的。所以我們來點(diǎn)升華。 First Step 我們給第一篇例子中加個(gè)...

    xiaochao 評論0 收藏0

發(fā)表評論

0條評論

mikasa

男|高級(jí)講師

TA的文章

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