學點Webpack吧

開始 webpack 之旅

npm install webpack --save-dev

這裏若是沒有指定 -g全局安裝，那麼須要調用 node_modules 下的 webpack.js 來執行，由於非全局安裝沒有添加環境變量

嚐嚐鮮，作點 webpack

必須的第一步：編寫 webpack.config.js

// webpack.config.js
module.exports = {
  // 兩個必須參數：
  entry: '', // 入口文件，寫路徑便可
  output: {  // 打包後文件，有兩個參數：
    filename: '',   // 文件名，'[name]'表示使用原名，'[hash]'使用哈希值
    path: '',       // 文件夾路徑，對着官方敲,path.resolve(__dirname, '文件夾名'),需先導入
    publicPath: '', // 上線地址，例如 http://ningtaostudy.cn
  },
};

如今碗和米飯有了，怎麼端起來吃呢

直接在命令行運行 webpack，再加點料：

webpack \
    --display-reasons \
    --progress \
    --colors \
    --display-modules \
    --config # webpack 配置文件名（換個碗吃飯）

在 npm 腳本里寫指令（偷懶讓別人幫你盛飯），接着命令行裏運行 npm run webpack：

{
    "scripts": {
        "webpack": "webapck --progress --colors"
    }
}

飯吃到了，沒有菜（webpack 插件）怎麼行呢

打包 html 的插件 html-webpack-plugin。慣例第一步 npm install，接着在 webpack.config.js 裏配置插件，有了 entry 和 output 出頭鳥，咱們知道該寫一個 plugin 了：

// webpack.config.js
const htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  plugins: [
    new htmlWebpackPlugin({
      filename: '[name]-[hash].html',
      template: 'index.html',
      inject: 'head',
      kill: 'bill',
    }),
  ],
};

讓咱們來品品小當家的菜：

• filename 很好，不就入口文件嗎
• template 你不用說，我知道是模板，相對於配置文件的路徑
• inject 我就不聽從開發最佳實踐，就要在head里加載js文件，打我呀

• kill 殺死比爾，純屬虛構。這是自定義的模板，模板裏調用，下面舉個栗子：

  <!-- index.html -->
  <!-- template 裏的文件是 index.html，使用自定義模板來肯定標題 -->
  <title><%= htmlWebpackPlugin.options.kill %><title>
  
  <!-- 轉化後 -->
  <title>bill</title>

上面代碼同樣同樣的。老夫斗膽說一句，這裏模板引擎相似 jsp，但仍是 js 語法

去官網看看 小當家

來瓶酒（loaders）吧，生活美滋滋

loader 用來加載資源文件，諸如圖片、css之類的，這樣咱們就能夠在 .js 裏導入 css，你沒聽錯，用起來我也沒有在蒙你

最簡單經常使用來加載 css 的兩個 loader:

npm install style-loader css-loader --save-dev
# style-loader 用來插入 style 標籤
# css-loader 用來加載 css 代碼，此 loader 居下

話很少說，開車：

// webpack.config.js
module.exports = {
  modules: {
    rules: [
      {
        test: /.css$/,
        use: [
          'style-loader',
          'css-loader',
        ],
      },
    ],
  },
};

看起來嵌套挺多的哈，不過很簡單。modules 下的 rules 包含不少匹配規則（正則表達式），每一條表明加載什麼類型的資源文件，上面寫的就是加載 .css 樣式文件，並使用 style-loader 和 css-loader 加載。

如今問題來了，我想喝瓶茅臺（自動添加瀏覽器產商前綴）。沒問題，強大的 webpack 生態圈給你提供了 postcss-loader，一個更高大上的 loader。這個時候咱們都知道只須要改一下 use 數組：

[
  'style-loader',
  {
    loader: 'css-loader',
    options: {
      importLoaders: 1
    },
  },
  'postcss-loader'
]

數組的項能夠是對象，這樣咱們的 loader 就能帶 options 裏的參數，等同於：

use: 'style-loader!css-loader?importLoaders=1!postcss-loader'

至於爲何要帶這樣的參數，這是由於一個 @import 引起的血案

webpack-dev-server 大廚來也

我是誰，我從哪裏來，我又該到哪裏去

日益繁重的前端工做下，沒有人能阻擋咱們偷懶的步伐。。webpack 只是一個打包工具，即便咱們能帶 --watch 自動編譯，但瀏覽器還得手動刷新（心中一個臥槽，尼瑪還有這種操做，曾經學習的一年裏本身起碼動手刷新瀏覽器點了 10000 次，忍不住吐槽瀏覽器刷新按鈕就不能作一個浮動的嗎，還得移動大半個屏幕，我鼠標少說走了 1000m 了）。很好，在靈長類動物面前都不是問題：

npm install webpack-dev-server -D # 這個不是重點，縮寫而已

接下來配置 webpack，其實官網很詳細了，還帶中文的，比個贊

// webpack.config.js
module.exports = {
  devServer: {
    contentBase: './dist', // 根目錄，就像 apache 的 www 文件夾
  },
};

而後呢臥槽？沒錯，好了，輸入吧腫瘤君：

webpack-dev-server --open

偷懶神（package.json）在此：

{
    "scripts": {
        "start": "webpack-dev-server --open --color"
    }
}

再運行 npm start，此次連 run 都省了，，，

好了，以上就是初步瞭解 webpack 了，再總結一下吧

配置項一覽：

// webpack.config.js
module.exports = {
  entry: '',
  output: {},
  module: {
    rules: [],
  },
  plugins: [],
  devServer: {},
  devtool: 'inline-source-map', // 開發環境下調試專用，快速定位錯誤文件位置
};

經常使用 loader：

• 加載 html：html-webpack-plugin、html-loader
• 加載 css：style-loader、css-loader、sass/less-loader
• 加載 es6：babel-loader
• 加載圖片、json 等文件：file-loader、url-loader（轉base64）、image-loader（壓縮）、json-loader

上面的這些 loader 均可以去 npmjs 官網 上查看詳細的配置

-loader 在 webpack 2+ 不能省略；html 插件和 loader（加載模板）不能混着用