webpack 祕技跟坑

webpack 的打開方式

1. 通常編譯 webpack
2. 實時編譯 webpack -w
3. 打包（會對 css 和 js 進行壓縮） webpack -p
4. 帶上進度條（項目比較大的時候，這個很友好）webpack [-w, -p] --colors --progress

5. 支持 Es6 語法。
   如今 webpack 自己對 Es6 的語法支持度已經很高。但仍是可能遇到不支持的，要完整支持的話，須要：

   • webpack.config.js 更名成 webpack.config.babel.js
   • npm 安裝 babel-core, babel-preset-es2015 包。（固然，若是你要支持更多，還能夠安裝 babel-preset-stage-0 等包。）babel 全部插件

   • 配置 babel 具體支持狀況，能夠在 package.json 裏面配置，示例：

     {
       "name": "my-package",
       "version": "1.0.0",
       "devDependencies": {
             "babel-core": "^6.8.0",
             "babel-plugin-transform-object-assign": "^6.8.0",
             "babel-plugin-transform-runtime": "^6.8.0",
             "babel-preset-es2015": "^6.6.0",
             "babel-preset-stage-0": "^6.5.0",
             "babel-runtime": "^6.0.0"
        },
        // your babel config here
       "babel": {
             "presets": [
                 "es2015",
                 "stage-0"
             ],
             "plugins": [
                 "transform-object-assign"
             ]
       }
     }

resolve 的配置

可省略的拓展名

resolve.extensions 這裏能夠配置拓展名，有什麼用呢？ 答案：這個數組裏面的拓展名，require() 時能夠省略。

// before
require('./js/test.vue');
// after
resolve: {
    extensions: ['.jsx', '.js', '.vue'] // 包含 .vue
} 
require('./js/test') 等價於 require('./js/test.vue')
require('./plugin/swipe') 等價於 require('./plugins/swipe/index.vue')

別名、模塊管理

resolve.alias 都知道這裏是配置別名。但須要知道的是，這裏的別名只是 簡單字符串替換。

1. 通常用法

   resolve: {
       alias: {
           relativePlugins:  '../plugins',
           absolutePlugins: 'D:/your/workspack/plugins'
       }
   }
   
   // then
   
   require('relatievPlugins/swipe') === require('../plugins/swipe') 
   require('absolutePlugins/swipe') === require('D:/your/workspack/plugins/swipe')

   因此，通常用 使用絕對路徑。這樣，無論文件的引用者在哪一個位置，均可以正確引用到你須要的插件。

2. 強制使用
   在使用 sass 的時候，咱們但願保存一些公共配置和屬性。因此，項目當中，你會用不少 sass 文件要引用這個配置文件。那麼，你會怎麼作呢？是這樣 ../../base/config.scss 嗎？ No! No! 你有更好的選擇。你只須要知道怎麼引用絕對路徑。

   resolve: {
       alias: {
           sassConfig: 'D:/your/workspace/config.scss'
       }
   }
   // 也許你試過這樣作，然而，收穫了報錯，說找不到文件。
   @import 'sassConfig';
   // 其實，它的正確打開方式，是這樣的
   @import '~sassConfig';

   沒錯，只是在前面 加一根波浪線，好神奇。事實是這樣的，若是你在最前面加入了波浪線，它會強制認爲，你就是想引入模塊。就必定會來 alias 這裏找。具體，看這裏 https://github.com/webpack/loader-utils#module-urls。補充一下，這個方法一樣適用於css文件中的 background: url(~imgModule/xxx.png') 中的 url.

3. 版本管理
   其實，對於一個組件，咱們還常常會想到一件事，就是版本管理。假如咱們如今須要引入一個組件 plugins/test-plugin。那麼，想給它帶上版本管理的完整配置是這樣：

// test-plugin 所處位置
    plugins
    |----test-plugin
    |    |----v1.0.0
    |    |----v2.0.0
    |    |    |----test-plugin.js
    |    |----package.json
    
    // plugins/test-plugin/package.json
    {
      "name": "test-plugin",
      "version": "2.0.0",
      "description": "",
      "main": "./v2.0.0/test-plugin.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "author": "",
      "license": "ISC"
    }
    
    // webpack.config.json
    resolve: {
        alias: {
            plugins: 'D:/your/workspack/plugins'
        }
    }
    
    // page.js
    import TestPlugin from 'plugins/test-plugin'; // 此時，引入的是 plugins/test-plugin/v2.0.0/test-plugin.js

關鍵點是： package.json 下的 main 參數。

webpack-dev-server 不完美的瀏覽器同步刷新

咱們都有一個美好的願望，但願，咱們修改代碼的時候，能夠實時編譯，並瀏覽器同步刷新。因而，咱們選擇了 webpack-dev-server, 它都作到了。不過，有點遺憾，對於 .html 文件，它的修改，就不會觸發 webpack-dev-server 的同步刷新（由於它沒被引用，或者說它的修改不會觸發 webpack 編譯）。

但，我但願，它能同步刷新的。因而，我看到了 html-webpack-plugin 它是能夠經過模板的方式，生成 .html 文件的。換句話說，它是能夠觸發 webpack 刷新的。 因而，我把它們用在一塊兒，發現，它確實是能夠同步刷新，可是，修改新的 .html 內容，並無被展示出來。

因此，使用建議是：

1. 用在 mvvm 框架中，好比： Vue, React. 這樣，你的大部分代碼邏輯，是寫在 js 裏面，能夠觸發 webpack 編譯。
2. 改用 browser-sync 這個瀏覽器同步專業戶來作。 https://www.browsersync.io/