webpack 秘技跟坑

时间 2019-11-06

标签 webpack 秘技繁體版

原文原文链接

webpack 的打开方式

通常编译 webpack
实时编译 webpack -w
打包（会对 css 和 js 进行压缩） webpack -p
带上进度条（项目比较大的时候，这个很友好）webpack [-w, -p] --colors --progress

支持 Es6 语法。
如今 webpack 自己对 Es6 的语法支持度已经很高。但仍是可能遇到不支持的，要完整支持的话，须要：css

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

配置 babel 具体支持状况，能够在 package.json 里面配置，示例：html

{
  "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() 时能够省略。vue

// 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 都知道这里是配置别名。但须要知道的是，这里的别名只是 简单字符串替换。webpack

通常用法git

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')

因此，通常用 使用绝对路径。这样，无论文件的引用者在哪一个位置，均可以正确引用到你须要的插件。github

强制使用
在使用 sass 的时候，咱们但愿保存一些公共配置和属性。因此，项目当中，你会用不少 sass 文件要引用这个配置文件。那么，你会怎么作呢？是这样 ../../base/config.scss 吗？ No! No! 你有更好的选择。你只须要知道怎么引用绝对路径。web
```
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.npm
版本管理
其实，对于一个组件，咱们还常常会想到一件事，就是版本管理。假如咱们如今须要引入一个组件 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 参数。json

webpack-dev-server 不完美的浏览器同步刷新

咱们都有一个美好的愿望，但愿，咱们修改代码的时候，能够实时编译，并浏览器同步刷新。因而，咱们选择了 webpack-dev-server, 它都作到了。不过，有点遗憾，对于 .html 文件，它的修改，就不会触发 webpack-dev-server 的同步刷新（由于它没被引用，或者说它的修改不会触发 webpack 编译）。数组

但，我但愿，它能同步刷新的。因而，我看到了 html-webpack-plugin 它是能够经过模板的方式，生成 .html 文件的。换句话说，它是能够触发 webpack 刷新的。因而，我把它们用在一块儿，发现，它确实是能够同步刷新，可是，修改新的 .html 内容，并无被展示出来。

因此，使用建议是：

用在 mvvm 框架中，好比： Vue, React. 这样，你的大部分代码逻辑，是写在 js 里面，能够触发 webpack 编译。
改用 browser-sync 这个浏览器同步专业户来作。 https://www.browsersync.io/