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

資訊專欄INFORMATION COLUMN

我的WebPack入門（一）

liuchengxu / 1231人閱讀

摘要：因?yàn)檫@里我的文件夾名字起的叫，所以默認(rèn)生成的中的就是，而是關(guān)鍵字會導(dǎo)致，只需要打開把隨便改一下即可。其實(shí)關(guān)于都還有很多參數(shù)配置和方法，不過對于入門，在上面這些東西搞明白后，就已經(jīng)可以跑起來一個簡單的流程了。

WebPack已經(jīng)火了好久，幾乎已經(jīng)成為一個前端的必備技能，先翻譯官網(wǎng)兩句話。

WebPack是一個靈活的、可擴(kuò)展的、公平的、可用于生產(chǎn)環(huán)境的、開源的模塊打包器。

WebPack V1版本已經(jīng)過時，請開發(fā)者們升級到V2。

這篇筆記是基于WebPack V2.2.1 開始。

安裝（Installation）

npm install webpack -g 全局安裝webpack，這樣可以在全局使用webpack命令；

新建webpack文件夾，Terminal/cmd切換到webpack文件夾下，執(zhí)行npm init -y生成package.json文件

-y: init過程中會有一堆繁瑣的問題，比如包名、作者、描述、依賴等一些東西，通過-y命令可以直接跳過，默認(rèn)全部“是”。
PS：因?yàn)檫@里我的文件夾名字起的叫webpack，所以默認(rèn)生成的package.json中的name就是webpack，而webpack是關(guān)鍵字會導(dǎo)致err，只需要打開package.json把name隨便改一下即可。

npm install webpack --save-dev 如果想要安裝特定版本的webpack可以使用 npm install webpack@ --save-dev，將version換成想要的版本號即可。

--save：save 的意思是把安裝信息保存到 package.json中，打開package.json會發(fā)現(xiàn)多了devDependencies項(xiàng)已經(jīng)把webpack添加進(jìn)去了："devDependencies": {"webpack": "^2.2.1"}；

-dev：dev的意思是當(dāng)前安裝插件是放在"devDependencies"中，表示是開發(fā)時所需依賴，正式生產(chǎn)環(huán)境所需依賴不需要添加-dev，是會放在"Dependencies"中

開始（Getting Started）

首先建好文件目錄

webpack.config.js：類似gulpfile.js，配置相關(guān)設(shè)置，我覺得放在根目錄下會合適一些，在配置path時會方便一些，執(zhí)行webpack命令時會默認(rèn)搜索webpack.config.js文件，也可以通過指定 --config指定其他文件為配置文件

app：存放項(xiàng)目文件模塊

PS：在模塊化開發(fā)中，這種文件目錄是不推薦的，需要依模塊來劃分文件目錄

dist：存放webpack處理后的文件

新建JS/css文件

hello.js

const msg = "Hello ";

export default class Hello {

        constructor() {
            this.say = this.say.bind(this);
        }

        say (word)  {
            document.write(msg + word);
        }

        ask ()  {
            document.write("Say Something Please");
            setTimeout(() => this.say("webpack"), 1000);
        }

}
- index.js

import css from "./index.css";
import Hello from "./hello.js";

new Hello().ask();
- index.css
html,body{
    margin:0;
    padding:0;
}
body{
    background:red;
    color: #fff;
    font-size: 40px;
}

3.安裝部分所需依賴

npm install --save-dev babel-core babel-loader babel-plugin-syntax-dynamic-import babel-preset-es2015：因?yàn)橛玫搅薳s6的語法，所以我們需要對es6語法進(jìn)行轉(zhuǎn)換
npm install style-loader --save-dev css-loader --save-dev： 安裝處理css的loader

4.配置webpack.config.js

const path = require("path");

module.exports = {
    entry: "./app/index.js",
    output: {
        filename: "bundle.[hash].js",
        path: path.resolve(__dirname, "dist")
    },
    module: {
        loaders: [
            {
                test: /.js$/,
                loader: "babel-loader",
                query: {
                    presets: ["es2015"]
                }
            },
            {
                test: /.css$/,
                loaders: ["style-loader", "css-loader"]
            }
        ]
    }
};

path: path是Node中的內(nèi)置對象，也是Node的核心模塊之一，這里引入path對象，主要是為了控制生成文件的目錄path.resolve(__dirname, "dist")這句話中，resolve會將參數(shù)中的路徑或路徑片段的序列解析為一個絕對路徑，__dirname表示當(dāng)前文件模塊所在的完整的絕對路徑，這樣即使項(xiàng)目遷移，地址變更，只要保證相對路徑正確即可。
context： 上下文，這里省略了，默認(rèn)為當(dāng)前文件模塊的絕對路徑，下面的entry和output中的路徑都是相對于context上下文的相對路徑
entry： 入口文件，如果有多個不同的入口文件，可以寫成對象的形式
output：配置webpack打包后輸出文件的參數(shù)
filename: 輸出的文件名，"bundle.[hash].js"中，hash是webpack會生成一個hash值，這里還可以有的寫法如："[name].[hash].js"指的是 入口文件的名字.hash值.js hash也可以改成chunkhash，如果entry中有多個入口文件，則每一次某個文件的改動都會引起所有輸出文件hash值得改變，而chunkhash只會影響有改動模塊文件。
path: 生成文件的輸出路徑
modules: 配置不同文件所需要的loaders以及插件配置，至于什么文件需要什么loaders，在官網(wǎng)和很多地方都可以找到說明。

其實(shí)關(guān)于output/modules都還有很多參數(shù)配置和方法，不過對于入門，在上面這些東西搞明白后，就已經(jīng)可以跑起來一個簡單的流程了。更多的知識，在后期遇到其他的痛點(diǎn)時會去搞明白的。

我的WebPack入門（二）

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

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

相關(guān)文章

  • 我的WebPack入門（二）——html-webpack-plugin

    摘要：可以根據(jù)你設(shè)置的模板，在每次運(yùn)行后生成對應(yīng)的模板文件，同時所依賴的也都會被引入，如果中含有值，則生成的模板文件也會引入正確版本的文件。 上一節(jié)的入門中，只是跑通了一個很簡單的webpack項(xiàng)目的流程，對其中的參數(shù)以及實(shí)戰(zhàn)運(yùn)用中的一些用法并不太清楚，雖然目前工作項(xiàng)目中并沒有用起webpack，不過覺得還是需要再去摸索一番，以便可以更清楚的用起這個工具。 上一節(jié)最終運(yùn)行webpack命令，...

    wmui 評論0 收藏0

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

    摘要：例如現(xiàn)在的入門學(xué)習(xí)手記系列。收到粉絲留言和打賞的喜悅。安裝上一篇入門學(xué)習(xí)手記一，主要是介紹了的核心概念，是整個學(xué)習(xí)過程的基礎(chǔ)知識。新生成的類似如下入門學(xué)習(xí)手記因?yàn)樯傻膬?nèi)容過多，我直接省略掉了。 showImg(https://segmentfault.com/img/bVbk5Nd?w=1150&h=599); 本人微信公眾號：前端修煉之路，歡迎關(guān)注。 最近開始想要維護(hù)一個個人的公眾...

    Joyven 評論0 收藏0

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

    摘要：另外需要指定這個參數(shù)，表示在配置的數(shù)值以下的圖片才進(jìn)行編碼，超過的不進(jìn)行處理。代碼如下所以過程就是引入了，然后進(jìn)行打包處理，生成和。目前這個入門學(xué)習(xí)手記到這里就結(jié)束了。完相關(guān)文章入門學(xué)習(xí)手記一入門學(xué)習(xí)手記二入門學(xué)習(xí)手記三入門學(xué)習(xí)手記四 showImg(https://segmentfault.com/img/remote/1460000019860769?w=1150&h=599); ...

    AlphaWatch 評論0 收藏0

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

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

    mengera88 評論0 收藏0

  • Webpack 4.X 從入門到精通 - devServer與mode（三）

    摘要：同時它還提供了自動刷新熱更新等功能，使開發(fā)變得非常方便。的到來減少了很多的配置，它內(nèi)置了很多的功能。 上一篇文章里詳細(xì)介紹了一下插件的用法，這一篇文章接著豐富module.exports里的屬性。如今的前端發(fā)展已經(jīng)非常迅速了，伴隨而來的是開發(fā)模式的轉(zhuǎn)變。現(xiàn)在已經(jīng)不再是寫個靜態(tài)頁面并放在瀏覽器里打開預(yù)覽一下了。在實(shí)際的開發(fā)中會經(jīng)常需要使用http服務(wù)器，比如之前的ajax，想要看到效果就...

    王偉廷 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<