個人WebPack入門（一）

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

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

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

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

安裝（Installation）

1. npm install webpack -g 全局安裝webpack，這樣能夠在全局使用webpack命令；

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

   -y: init過程當中會有一堆繁瑣的問題，好比包名、做者、描述、依賴等一些東西，經過-y命令能夠直接跳過，默認所有「是」。
   PS：由於這裏個人文件夾名字起的叫webpack，因此默認生成的package.json中的name就是webpack，而webpack是關鍵字會致使err，只須要打開package.json把name隨便改一下便可。

3. npm install webpack --save-dev 若是想要安裝特定版本的webpack可使用 npm install webpack@<version> --save-dev，將version換成想要的版本號便可。

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

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

開始（Getting Started）

1. 首先建好文件目錄

   • webpack.config.js：相似gulpfile.js，配置相關設置，我以爲放在根目錄下會合適一些，在配置path時會方便一些，執行webpack命令時會默認搜索webpack.config.js文件，也能夠經過指定 --config指定其餘文件爲配置文件

   • app：存放項目文件模塊

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

   • dist：存放webpack處理後的文件

2. 新建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入門（二）