因?yàn)閞eact接觸webpack犹撒，一直用react腳手架里面現(xiàn)成的配置文件跋选，使用webpack進(jìn)行開(kāi)發(fā)锁孟，最近研究一下webpack的API，做下學(xué)習(xí)筆記

概念

本質(zhì)上仿贬，webpack 是一個(gè)現(xiàn)代 JavaScript 應(yīng)用程序的靜態(tài)模塊打包器(module bundler)早芭。當(dāng) webpack 處理應(yīng)用程序時(shí)，它會(huì)遞歸地構(gòu)建一個(gè)依賴(lài)關(guān)系圖(dependency graph)诅蝶，其中包含應(yīng)用程序需要的每個(gè)模塊退个，然后將所有這些模塊打包成一個(gè)或多個(gè) bundle。

實(shí)現(xiàn)功能：

• 壓縮CSS和JS文件

• 壓縮IMG等圖片資源

• 項(xiàng)目中直接使用LESS

• 直接使用ES6

Webpack支持Node.js模塊格式的配置文件调炬，默認(rèn)使用當(dāng)前目錄下的webpack.config.js语盈，配置文件為module.exports；其相關(guān)配置如下：

• entry 為項(xiàng)目入口文件
• output為構(gòu)建文件的輸出配置缰泡，其中publicPath表示構(gòu)建結(jié)果最終被真正訪問(wèn)時(shí)的路徑刀荒。線上項(xiàng)目為線上路徑。
• loader 值為一個(gè)數(shù)組棘钞，每一項(xiàng)指定一個(gè)規(guī)則缠借，其test字段則是規(guī)則的正則表達(dá)式，若被依賴(lài)模塊的ID符合該正則表達(dá)式宜猜，則對(duì)依賴(lài)模塊依次使用規(guī)則中l(wèi)oaders字段所指定的loader進(jìn)行轉(zhuǎn)換
• plugin 值為一個(gè)數(shù)組泼返，每一項(xiàng)為一個(gè)plugin實(shí)例

1. entry

• 寫(xiě)單頁(yè)面應(yīng)用的時(shí)候 就一個(gè)入口 index.js

entry: {
   app: './src/app.js',
   vendors: './src/vendors.js'
 }

字符串形式;
數(shù)組形式，把數(shù)組中多個(gè)文件打包成一個(gè)文件 ;
對(duì)象形式姨拥，配置多頁(yè)應(yīng)用時(shí)需要采用绅喉，或者抽離指定模塊做公共模塊

• 多頁(yè)面應(yīng)用程序

入口文件有幾個(gè)就會(huì)生成幾個(gè)獨(dú)立的依賴(lài)圖譜。
entry: {
   pageOne: './src/pageOne/index.js',
   pageTwo: './src/pageTwo/index.js',
   pageThree: './src/pageThree/index.js'
 }

2. output

將所有的模塊和資源打包完成后叫乌，總需要一個(gè)地方來(lái)放置它柴罐，output 就是做這個(gè)事情的，它指定了打包后的文件放置的位置憨奸，以及命名等信息革屠。
其最基本配置包括filename和path兩項(xiàng)。這兩項(xiàng)用以決定上述主js文件的存儲(chǔ)行為排宰。

{
 entry: {
   app: './src/app.js',
   search: './src/search.js'
 },
 output: {
   filename: '[name].js',
   path: __dirname + '/dist'
 }
}
如果配置創(chuàng)建了多個(gè)單獨(dú)的 "chunk"（例如似芝，使用多個(gè)入口起點(diǎn)或使用像 CommonsChunkPlugin 這樣的插件），則應(yīng)該使用占位符([name])來(lái)確保
每個(gè)文件具有唯一的名稱(chēng)额各，此時(shí)輸出的文件名是app和search国觉。

3. module

首先webpack是一個(gè)JS模塊打包器，基于NodeJS環(huán)境虾啦，本身只理解JS文件麻诀。在webpack的世界里，一切文件都是模塊傲醉。如果要處理非JS文件蝇闭，就需配置module。

概念：在模塊化編程中硬毕，開(kāi)發(fā)者將程序分解成離散功能塊(discrete chunks of functionality)呻引，并稱(chēng)之為模塊。每個(gè)模塊具有比完整程序更小的接觸面吐咳，使得校驗(yàn)逻悠、調(diào)試元践、測(cè)試輕而易舉。 精心編寫(xiě)的模塊提供了可靠的抽象和封裝界限童谒，使得應(yīng)用程序中每個(gè)模塊都具有條理清楚的設(shè)計(jì)和明確的目的单旁。

webpack 將一切資源看做是一個(gè)個(gè)模塊，然后將其加入依賴(lài)樹(shù)中饥伊。任何類(lèi)型的模塊或者說(shuō)資源文件象浑，理論上都可以通過(guò)被轉(zhuǎn)化為JavaScript代碼實(shí)現(xiàn)與其他模塊的合并與加載

webpack中的模塊：ES2015 import；commonjs require()琅豆；AMD define 與 require愉豺；css/scss/less 中的 @import；存在于樣式表中的 url() 或 html 中的 <img src=...> 的圖片

4. loader

loader 用于對(duì)模塊的源代碼進(jìn)行轉(zhuǎn)換茫因。loader 可以將文件從不同的語(yǔ)言（如 TypeScript）轉(zhuǎn)換為 JavaScript蚪拦，或?qū)?nèi)聯(lián)圖像轉(zhuǎn)換為 data URL。loader 甚至允許你直接在 JavaScript 模塊中 import CSS文件

module: {
//識(shí)別文件類(lèi)型节腐，使用對(duì)應(yīng)loader處理文件
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader',
            options: {
              modules: true//使用options等命令對(duì)loader進(jìn)行進(jìn)一步的配置外盯。
            }
          }
        ]
      }
    ]
  }

關(guān)于loader能夠做的事情：
轉(zhuǎn)換編譯：script-loader/babel-loader/ts-loader/coffee-loader等。
處理樣式：style-loader/css-loader/less-loader/sass-loader/postcss-loader等翼雀。
處理文件：raw-loader/url-loader/file-loader/等饱苟。
處理數(shù)據(jù)：csv-loader/xml-loader等。
處理模板語(yǔ)言：html-loader/pug-loader/jade-loader/markdown-loader等狼渊。
清理和測(cè)試：mocha-loader/eslint-loader箱熬。

5. plugins

插件是webpack的支柱功能，許多功能都靠插件來(lái)實(shí)現(xiàn)：
抽離公共代碼狈邑；
統(tǒng)一修改所有代碼中的某些值城须；
對(duì)代碼進(jìn)行壓縮；
去除所有的console
并且webpack內(nèi)置了很多插件和第三方插件米苹；

Babel 是一個(gè) JavaScript 編譯器

首先要下載babel相關(guān)插件糕伐，核心插件如下：

• 安裝babel-loader

npm install babel-loader --save-dev

• 安裝轉(zhuǎn)碼規(guī)則

npm install babel-preset-es2015 --save-dev

• 創(chuàng)建一個(gè).babelrc文件

{
  "presets": [
    "es2015"http://這里是轉(zhuǎn)碼規(guī)則 想要什么樣的轉(zhuǎn)碼規(guī)則可以自行下載插件 然后將規(guī)則加到這里
  ],
  "plugins": []
}

• 在webpack配置文件中添加babel-loader配置

module.exports = {
  module: {
    rules: [
          {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['env']
                    }
                }
          },
     ]
  }
};

https://www.cnblogs.com/old-street-hehe/p/7116215.html

webpack樣式編譯器

css-loader與style-loader和autoprefixer(postcss-loader)

js文件中import了css文件，并且想要把css文件作為<style>的內(nèi)容插入到模版文件蘸嘶，這時(shí)候我們要用到webpack的css-loader和style-loader良瞧，前者用于在js中加載css，后者把加載的css作為style標(biāo)簽內(nèi)容插入到html中训唱。另外褥蚯，如果某些css要考慮到瀏覽器的兼容性(比如css3中的flex)，我們要webpack在打包的過(guò)程中自動(dòng)為這些css屬性加上瀏覽器前綴况增，這時(shí)就用到了postcss-loader和它對(duì)應(yīng)的插件autoprefixer赞庶。
css-loader使你能夠使用類(lèi)似@import 和 url(...)的方法實(shí)現(xiàn) require()的功能,style-loader將所有的計(jì)算后的樣式加入頁(yè)面中，二者組合在一起使你能夠把樣式表嵌入webpack打包后的JS文件中。

• 在webpack配置文件中添加css的loader配置

配置一：css會(huì)和js打包到同一個(gè)文件中歧强，并不會(huì)打包為一個(gè)單獨(dú)的css文件

module.exports = {

   ...
    module: {
        rules: [
             {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader"
                    }
                ]
            }
        ]
    }
}

配置二：將CSS文件打包為單獨(dú)文件

const ExtractTextPlugin = require("extract-text-webpack-plugin");
//extract-text-webpack-plugin該插件的主要是為了抽離css樣式,防止將樣式打包在js中引起頁(yè)面樣式加載錯(cuò)亂的現(xiàn)象
module.exports = {
   ...
    module: {
       rules: [
            {
                test:/\.css$/,
                exclude: /node_modules/,
                // 抽取 css 文件到單獨(dú)的文件夾
                //use:指需要什么樣的loader去編譯文件,這里由于源文件是.css所以選擇css-loader
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    //fallback:編譯后用什么loader來(lái)提取css文件
                    publicPath: config.cssPublicPath,
                    // 設(shè)置 css 的 publicPath
                    use: [{
                        loader:"css-loader",
                        options:{
                            // 開(kāi)啟 css 壓縮
                            minimize:true,
                        }
                    },
                        {
                            loader:"postcss-loader",
                        }
                    ]
                })
            }
        ]
    }
}

一點(diǎn)node的知識(shí)：

全局變量

__dirname：node中的全局變量澜薄，存儲(chǔ)的是文件所在的文件目錄
__filename：node中的全局變量，存儲(chǔ)的是文件名

占位符

[id]:webpack給塊分配的內(nèi)部chunk id誊锭，如果你沒(méi)有隱藏表悬，你能在打包后的命令行中看到；
[hash]：每次構(gòu)建過(guò)程中丧靡，生成的唯一 hash 值;
[chunkhash]: 依據(jù)于打包生成文件內(nèi)容的 hash 值,內(nèi)容不變，值不變籽暇；
[ext]: 資源擴(kuò)展名,如js,jsx,png等等;
[name]:代表打包后文件的名稱(chēng)温治，在entry或代碼中(之后會(huì)看到)確定；
requiare.resolve戒悠，讀取文件絕對(duì)路徑
參考文章
http://blog.csdn.net/meinanqihao/article/details/78217918
https://www.cnblogs.com/senjougahara/p/5350196.html