摘要：可以防止不同操作系統之間的文件路徑問題，并且可以使相對路徑按照預期工作。被用于轉換某些類型的模塊，而插件則可以用于執行范圍更廣的任務。安裝腳本配置，官方推薦的配置如下，但是需要結合自己的項目修改一下插件的套路。

webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。

當 webpack 處理應用程序時，它會遞歸地構建一個依賴關系圖(dependency graph)，其中包含應用程序需要的每個模塊，然后將所有這些模塊打包成一個或多個 bundle。

局部安裝,官方也是推薦安裝到項目目錄下

mkdir webpack-demo-1
cd webpack-demo-1
npm init -y //生成package.json,并且一路同意,如果沒啥個性化的內容則省了你一路狂按enter
npm install --save-dev webpack //安裝到開發環境里面(devDependicies)

webpack基本配置文件

touch webpack.config.js
vi webpack.config.js

配置文件內容如下

const path = require("path");

module.exports = {
  entry: "./src/index.js", // 這里應用程序開始執行,webpack 開始打包
  output: {
    // webpack 如何輸出結果的相關選項
 ?  filename: "bundle.js",//輸出資源塊的名字(asset chunk)
 ?  path: path.resolve(__dirname, "dist") // 所有輸出文件的目標路徑,我的就是./dist/bundle.js
  }
};

把當前目錄的src下的index.js打包到了dist目錄下，并且生成了(emmited)一個改頭換面的bundle.js，里面的代碼面目全非啊。

entry: {
    scss: "./src/css/main.scss",  //對象的鍵名scss 就是輸出文件的name
    bundle: "./src/js/app.js"
  },
   
  output: {
    filename: "[name].js",
    path: path.resolve(__dirname, "dist/js")
    // publicPath: "/output/"
  },

多個入口最好寫成對象的形式，官網說如果寫成了數組，輸出的內容會是數組的第一個。

上述代碼會在dist/js目錄下生成scss.js和bundle.js

其中，配置文件的第一行代碼使用了Node的內置模塊path,并且在它前面加上 __dirname這個全局變量(也就是第七行代碼)。可以防止不同操作系統之間的文件路徑問題，并且可以使相對路徑按照預期工作。
即使你的index.js內容為空，bundle.js里面也有一些基本的打包代碼。

基本的使用

//第一種方法，使用當前目錄的node_modules里面的webpack
./node_modules/.bin/webpack 
//第二種方法使用npm腳本
//首先在你的package.json里面添加下列代碼
{
  ...
  "scripts": {
    "build": "webpack"
  },
  ...
}
//然后，使用下列代碼即可
npm run bulid
//第三種方法，高版本的npm自帶了npx
npx webpack //npx會自動查找當前依賴包中的可執行文件，如果找不到，就會去 PATH 里找。如果依然找不到，就會幫你安裝！

所以說呢，我選擇了第三種使用方法。

ES6或其他版本js轉換成通用js代碼，毫無疑問應該使用babel，不過在webpack的世界里面統一使用loader，所以我們google webpack babel-loader。
loader 可以將所有類型的文件轉換為 webpack 能夠處理的有效模塊，然后你就可以利用 webpack 的打包能力，對它們進行處理。

babel-loader不同版本的安裝腳本、配置文件是不同的……

(@ο@) 哇～你搜出的最新的文檔用這么小的文字告訴你，你用webpack 3.x babel-loader 7.x | babel 6.x的去這個鏈接,webpack 3.x | babel-loader 8.x | babel 7.x的去當前的這鏈接鏈接。
好吧，我用上一版本的吧。
所以我的安裝腳本是

npm install --save-dev babel-loader babel-core babel-preset-env webpack

配置文件是

//依然屬于webpack.config.js配置的一部分，
module: {
 ?//這是關于模塊的配置
  rules: [
 ? ?//模塊規則（配置 loader、解析器等選項）
    {
 ? ?  test: /.js$/, //使用正則判斷后綴是js的文件
 ? ?  exclude: /(node_modules|bower_components)/, 
 ? ?  //除了這兩目錄下的node_modules|bower_components
      use: {
 ? ? ?  loader: "babel-loader", //用這個loader處理.js的文件
 ? ? ?  options: {
 ? ? ? ?  presets: ["env"] //選項，還記得多帶帶使用babel的時候建立的那個.babelrc嘛，就是那個作用。
 ? ? ?  }
      }
    }
  ]
}

借此可以得到loader的兩個作用：

識別出應該被對應的 loader 進行轉換的那些文件。(使用 test 屬性)

轉換這些文件，從而使其能夠被添加到依賴中（并且最終添加到 bundle 中）(use 屬性)
在./src/js/有module-1.js、module-2.js、app.js三個文件，都是新的語法，用的模塊化寫法，有的瀏覽器不支持，所以需要轉化。

//module-1.js代碼
function fn(){
  console.log(1)
}

export default fn
//module-2.js
function fn(){
  console.log(2)
}

export default fn
//app.js
import x from "./module-1.js"
import y from "./module-2.js"
x()
y()

最終效果，打開的我的預覽鏈接,使用ctrl+shift+J，會看到打印出1和2

如果使用了預編譯的scss語言，要把scss文件變成css并加入到html里面，思路同上，google webpack scss
得到如下代碼

npm install sass-loader node-sass webpack --save-dev

模塊配置文件

// webpack.config.js
module.exports = {
    ...
    module: {
        rules: [{
            test: /.scss$/,
            use: [{
                loader: "style-loader" // creates style nodes from JS strings
            }, {
                loader: "css-loader" // translates CSS into CommonJS
            }, {
                loader: "sass-loader" // compiles Sass to CSS
            }]
        }]
    }
};

這個官方的就比較給力了，很清楚地用法

先用sass-loader把./src/csa/main.scss編譯成main.css

再用css-loader把main.css變成符合CommonJS規范的

把main.css變成js字符串，并創建style節點，把它放進去，這樣html就可以顯示啦。

不過坑爹依舊?……用的時候報錯嘍～

第一次就說缺style-loader，好吧……自覺點把另一個一起安裝了把。

npm i --save-dev css-loader style-loader

所以，打開我的預覽鏈接，會看到我的預覽的背景是灰色的。

const path = require("path");

module.exports = {
  entry: "./src/js/app.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist/js/")
  },
  module: {
  rules: [
    {
      test: /.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: "babel-loader",
        options: {
          presets: ["env"]
        }
      }
    },
    {
        test: /.scss$/,
        use: [{
            loader: "style-loader" // creates style nodes from JS strings
        }, {
            loader: "css-loader" // translates CSS into CommonJS
        }, {
            loader: "sass-loader" // compiles Sass to CSS
        }]
        }      
  ]
}
};

所以借助webpack強大的模塊化，通過其構建的依賴關系圖(dependency graph)把js、scss都搞到了bundle.js里面，真是牛～

本來搞了一個html-loader，優化html，把空格、注釋都給壓縮掉，提高性能，可是實際使用中也沒有報錯，也沒啥效果，比較尷尬……自己埋個坑后面補一補。

目前呢，前面的loader用的都很爽。在src目錄下修改完了代碼，一個npx webpack，刷新就可以看到效果了，體驗很棒。
但是今天坐在電腦前面，回想代碼，以前在前端工程話的道路上，scss、js、html都是被監視著(wacth)，開四個命令行窗口，只要src下一有風吹草動，就會把修改后的代碼更新過去。

目前使用的webpack可以完全自動化scss、js了，可我如果修改了src/index.html，dist/也無法獲知我的修改啊

然后我google一一會，發現了這貨Copy Webpack Plugin

哎呀，是個plugin，終于webpack的四大基本概念都到齊了,前面搞了entry output loder，今天用一下plugin。

loader 被用于轉換某些類型的模塊，而插件則可以用于執行范圍更廣的任務。插件的范圍包括，從打包優化和壓縮，一直到重新定義環境中的變量。
基本安裝

npm i -D copy-webpack-plugin

Copy Webpack Plugin配置文件(plugin的和loader的配置文件可不是一個套路。loader是在module.rules數組的每一個對象里面(即rules數組的每一個value)，而plugin是在module的plugins數組里面)

//依然在webpack.config.js
const CopyWebpackPlugin = require("copy-webpack-plugin")

const config = {
  plugins: [
    new CopyWebpackPlugin([ ...patterns ], options)
  ]
}

Copy Webpack Plugin的github給的代碼，一開始把我搞蒙了，和webpack官網的代碼不大一樣啊。后來才發現原來用了module.exports = config;
在我的小demo里使用的是

plugins: [
    new CopyWebpackPlugin([ {
 ? ? ?//原來一個plugin就是一個對象啊，使用的時候實例化對象即可
 ? ? ?from: "src/index.html", //從src/index.html目錄下復制
 ? ? ?to: "../index.html", ?//到dist/index.html
 ? ? ?toType: "file" //復制類型是文件
 ? ?}], { copyUnmodified: true }) //把未修改的部分也復制過去
 ?]

這個插件可以實現很多功能，具體的細節看這里

上面代碼為什么這么寫呢?to: "../index.html", ，試了好幾遍發現沒有報錯，就是沒有結果，最后搞明白了是路徑的問題……
還記得 四大基本概念的output里面的path嗎，回頭看一開始的path

output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist/js/")
},

項目的path是dist/js下，所以應該復制到上一級目錄下../也就是dist/目錄下了。

動態效果可以看下圖

上述代碼有個小問題使用了display： flex把ul>li變成了橫排，但是這玩意有兼容性。當初我的一篇文章唯一的一個評論就是這么說我的……

檢查兼容性(雖然這是嚴謹要求，我還是老忘)，可以去caniuse 看一下,(@ο@) 哇～IE沒有綠的哎，支持太差了。( ⊙ o ⊙ )！萬一以后我項目搞大了，IE的用戶、老安卓的用戶想看我項目咋辦呢，只能加一下前綴優化一下啦。
有個挺牛的在線的autoprefixer，也可以去在線轉換。
既然使用了webpack就Google webpack autoprefixer，遺憾的發現autoprefixer官方推薦使用postcss-loader

先吐槽一下，這貨的文檔也是稀爛……

官方安裝腳本

npm i -D postcss-loader

需要多帶帶配置文件postcss.config.js，官方的寫法是下面這個（最無語的就是這個……，下面的必錯，寫出來就是警告大家，官方的也不一定對）

module.exports = {
 ?parser: "sugarss", // 鉿？？？？解析器是sugarss???
 ?plugins: {
    "postcss-import": {},
    "postcss-cssnext": {},
    "cssnano": {}
  }
}

在webpack.config.js的添加時還要注意下面的幾點

After setting up your postcss.config.js, add postcss-loader to your webpack.config.js. You can use it standalone or in conjunction with css-loader (recommended). Use it after css-loader and style-loader, but before other preprocessor loaders like e.g sass|less|stylus-loader, if you use any.

這段文檔的要點就是讓你注意postcss-loader應該在css-loader style-loader之后，但是一定要在其他的預處理器preprocessor loaders之前，例如
sass|less|stylus-loader。

官方給了一個推薦的配置代碼

//依然是webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /.css$/,
        use: [
          "style-loader",
          { loader: "css-loader", options: { importLoaders: 1 } },
          "postcss-loader"
        ]
      }
    ]
  }
}

本項目用的是.src/css/main.scss,只能嘗試著將上述代碼加到相應的位置

rules: [
    ...
    {
        test: /.scss$/,
        use: [{
            loader: "style-loader" // creates style nodes from JS strings
        }, {
            loader: "css-loader", options: { importLoaders: 1 }// translates CSS into CommonJS
        }, {
            loader: "postcss-loader"
        }, {
            loader: "sass-loader" // compiles Sass to CSS
        }]
    },
   ...
 ? ]

下面的幾點可都是官網文檔沒寫的，只能自己踩一踩的坑……

運行npx webpack,連續報錯，不過是缺必備的module的錯誤,也就是缺postcss.config.js里面的postcss-import postcss-cssnext cssnano sugarss 。
沒辦法，先npm i -D 上面的四個模塊名字，依然報錯，這次是語法錯誤

(⊙v⊙)嗯？？？它說我不必要的大括號？？？我這標準的scss語法啊，又不是sass的語法(它省略了大括號和分號)，先Google一波這個錯誤。
終于在在postcss的issue里面發現了蛛絲馬跡,問題果然出在那個令我疑惑的postcss.config.js里面

錯誤的使用了sugarss的解析器(這貨和sass類似，沒有大括號，所以它說我大括號錯了，它的特點是Indent-based CSS syntax for PostCSS.SugarSS MIME-type is text/x-sugarss with .sss file extension.)，而我寫的是scss語法。

postcss-loader哪來的勇氣確定大家都是用的.sss后綴的sugarss語法呢，還敢直接在文檔的醒目位置推薦稀爛的postcss.config.js，O__O "…

那么多的預編譯的css語法，果然需要webpack打包工具啊，找到合適的loader去解析啊。

注釋掉parser: "sugarss",這句代碼，可以使用默認的解析器去解析了，正常運行了。
不過查看代碼，發現好像轉換后的css有點小丑

仔細觀察命令行，發現有線索，一個警告

警告信息提示我說：postcss-cssnext發現有個冗余的autoprefixer插件在我的postcss插件里面，這個可能有不良影響，我應該移除它，因為它已經包括在了postcss-cssnext里面。

webpack的警告說的很明白，postcss-cssnext是無辜的，而且我確定按照官網代碼走的，沒有安裝autoprefixer插件，錯誤必然在剩下的兩個插件里面了。

//修改后的postcss.config.js只剩下這些了
module.exports = {
 ?plugins: {
 ? ?"postcss-import": {}, //1.它錯了？
 ? ?"postcss-cssnext": {}, //webpack告訴我它是清白的
 ? ?"cssnano": {} //2.它錯了？
 ?}
}

我選擇了排除法：

先注釋"postcss-import": {},，發現無法轉換后的css代碼不對，說明它是無辜的。

那么問題必然是最后一個插件，注釋掉"cssnano": {}，終于完美了，而且代碼很優美。

本著打破砂鍋問到底的精神，我搜了一下cssnano,在其官網看到了真實的錯誤原因，webpack很明智啊，誠不欺我，果然冗余插件了。

cssnano里面有autoprefixer導致了冗余。

webpack 把所有的資源都當成了一個模塊, CSS、JS 文件 都是資源, 都可以打包到一個 bundle.js 文件中.
但是有時候需要把樣式 多帶帶的打包成一個文件需要抽離出css文件到多帶帶的css/下。

使用extract-text-webpack-plugin插件可以做到。

安裝腳本

npm install extract-text-webpack-plugin --save-dev

配置webpack.config.js，官方推薦的配置如下，但是需要結合自己的項目修改一下……

const ExtractTextPlugin = require("extract-text-webpack-plugin"); //插件的套路。都要require進來
module.exports = {
  module: {
    rules: [
      {
        test: /.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader", //失敗了就用它解析
          use: "css-loader" //是css文件，就用這個處理
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("styles.css"),
  ]
}

我如果使用的是scss，就很尷尬了

最開始由一個錯誤引起

Google一下，解決掉error，fallbak里面使用了style-loader，use里面不應該使用了，那么問題又來了

問題一：無法使用style-loader把我的main.scss轉化后的css代碼插入到style標簽里面。

詳見代碼注釋部分

{
        test: /.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          //如果在use里面寫上style-loader，就報錯window未被定義，可是不寫的話，我的bundle.js里面就無法把css放到style標簽里面，只能手動把分離的css加到index.html，很無語。
          use: [{
              loader: "css-loader", options: { importLoaders: 1 }// translates CSS into CommonJS
          }, {
              loader: "postcss-loader"
          }, {
              loader: "sass-loader" // compiles Sass to CSS
          }]
        })
      }

問題2：可以提取出多帶帶的css文件，但是沒想到如何放到多帶帶的css/下，很尷尬，代碼未提交，還在摸索中。

問題大約知道應該出現在下面這個函數里面

 new ExtractTextPlugin({
      filename:  (getPath) => {
        return getPath("../main.css").replace("../js", "../css"); // 本意是生成在dist/css/main.css,結果只是在dist/main.css目錄下，沒有css/
      },
      allChunks: true
 })

所有的代碼都在我的demo里面。

算……是……搞定了webpack的基本使用了……吧，最簡單的符合我目前技術棧的各種loader,plugin都會安裝了。
當然，還有無數的webpack的loader、plugin在前方等著我去探索……各種稀奇古怪的配置文件……痛并快樂著?

五花八門的配置文件挺讓我糟心的……幸虧有了node爸爸幫我啊，webpack爸爸雖然也是比較嚴厲的，但是省了你用四個命令行窗口的啊，還是很感人的啊。

工具這個東西嘛

配置出錯了怎么辦，默念三句

如果真的搞蹦了怎么辦。熊得，送你一句名言

沒有什么bug不是一遍webpack解決不了額，如果有的話，那就來三遍webpaack。總有一天讓webpack叫你爸爸！！！

現在的吐槽大概是沒有經歷過以前更蛋疼的日子吧，幸好有了新的后起之秀---parcel，它的官網老厲害了，智能提示我用了中文，真是貼心。

回顧一下webpack的首頁

在對比一下parcel的首頁

兩者的目的是一樣的，不過parcel不需要插件，而且速度快。

快速開始

沒有配置，最好以html或者js為入口，直接npm init -y , parcel index.html，可以實現index.js。

它會自動幫你打包到dist目錄下的一個js文件里面，并復制index.html過去，而這一切只需要上面的一行代碼。

一開始我的項目的目錄結構

執行parcel index.html的目錄結構

而我當時搞webpack的時候的快速開始至少需要安裝webpack、webpack.config.js、修改配置內容、安裝插件才能實現上述的功能。

當我在parcel-demo目錄下使用parcel index.html的時候，它自動發現我引入了index.js。

里面的內容是模塊化的內容，它自動幫我轉成了dist/parcel-demo.js，我在webpack的時候需要babel-loader

我用的是scss,它也會自動發現，并且竟然

還幫我自動下載了node-sass

其他的特點都在官網去發掘吧～希望日后parcel快速崛起吧

而現在我還是要用webpack的……