我的WebPack入門（一）

liuchengxu 發布于2019-08-21 15:20 / 1225人閱讀

摘要：因為這里我的文件夾名字起的叫，所以默認生成的中的就是，而是關鍵字會導致，只需要打開把隨便改一下即可。其實關于都還有很多參數配置和方法，不過對于入門，在上面這些東西搞明白后，就已經可以跑起來一個簡單的流程了。

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

WebPack是一個靈活的、可擴展的、公平的、可用于生產環境的、開源的模塊打包器。

WebPack V1版本已經過時，請開發者們升級到V2。

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

安裝（Installation）

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

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

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

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

--save：save 的意思是把安裝信息保存到 package.json中，打開package.json會發現多了devDependencies項已經把webpack添加進去了："devDependencies": {"webpack": "^2.2.1"}；

-dev：dev的意思是當前安裝插件是放在"devDependencies"中，表示是開發時所需依賴，正式生產環境所需依賴不需要添加-dev，是會放在"Dependencies"中

開始（Getting Started）

首先建好文件目錄

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

app：存放項目文件模塊

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

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

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

我的WebPack入門（二）

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

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

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

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

wmui 2019-08-20 14:50 評論0 收藏0
webpack入門學習手記（二）

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

Joyven 2019-08-23 14:05 評論0 收藏0
webpack入門學習手記（五）

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

AlphaWatch 2019-08-26 10:13 評論0 收藏0
webpack入門學習手記（一）

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

mengera88 2019-08-23 14:01 評論0 收藏0
Webpack 4.X 從入門到精通 - devServer與mode（三）

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

王偉廷 2019-08-23 10:47 評論0 收藏0