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/