【Webpack】 #1

zh-rocco · 2018-06-07T01:44:00Z

`webpack.config.js` Hot Reload

package.json

{
  "scripts": {
    "dev": "nodemon --watch webpack.config.js --exec webpack-dev-server --hot"
  }
}

参考：

Restart webpack on configuration change

Proxy Hot Reload

思路

fs.watch(): 监听 file
require.resolve('filePath'): 获取 module 的 key
delete require.cache['cacheKey']: 删除 cache

webpack-proxy.config.js

module.exports = {
  target: 'http://localhost:3000/',
};

webpack.config.js

const fs = require('fs');
const proxyConfig = require('./webpack-proxy.config');

let proxyOptions = {
  context: '/api',
  target: proxyConfig.target,
  pathRewrite: proxyConfig.pathRewrite,
  changeOrigin: true,
};

fs.watch('./proxy-config.js', () => {
  delete require.cache[require.resolve('./webpack-proxy.config')];
  try {
    const newProxyConfig = require('./webpack-proxy.config');
    if (proxyOptions.target !== newProxyConfig.target) {
      console.log('Proxy target changed:', newProxyConfig.target);
      proxyOptions = {
        context: '/api',
        target: newProxyConfig.target,
        pathRewrite: newProxyConfig.pathRewrite,
        changeOrigin: true,
      };
    }
  } catch (e) {
    // eslint-disable-line
  }
});

module.exports = {
  // ...
  devServer: {
    proxy: [
      function proxy() {
        return proxyOptions;
      },
    ],
  }
}

参考：

Proxy Hot Reload

在同一个页面中加载多个 webpack 实例

方式一

webpack.config.js

module.exports = {
  output: {
    jsonpFunction: 'webpackJsonp' + Date.now(),
  },
};

方式二

安装依赖

npm i modify-chunk-id-webpack-plugin -D

webpack.config.js

const ModifyChunkIdPlugin = require('modify-chunk-id-webpack-plugin');

module.exports = {
  plugins: [
    // ...
    new ModifyChunkIdPlugin({ random: process.env.NODE_ENV === 'development' }),
  ],
};

参考：

CSS 打包顺序

注意 CSS 的引用顺序, 一定要将外部依赖的 CSS 库先于项目 CSS 引用

以 Vue 为例

main.js

import Vue from 'vue';
// 第三方 CSS 库
import 'path/to/thirdparty.css';

import App from './App';

App.vue

<style lang="less">
  // 项目CSS
  @import 'path/to/index.less';

  .ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
</style>

模块上下文 `require.context`

3 个参数：要搜索的文件夹目录，是否还应该搜索它的子目录，以及一个匹配文件的正则表达式

require.context(directory, useSubdirectories = false, regExp = /^\.\//);

示例：

require.context('./test', false, /\.test\.js$/);
//（创建了）一个包含了 test 文件夹（不包含子目录）下面的、所有文件名以 `.test.js` 结尾的、能被 require 请求到的文件的上下文。

加载所有的图片

const imageContext = require.context('@/assets/kittens/', false, /\.jpg$/);

const img = imageContext('./name.jpg');

提取公共依赖

webpack 配置：

module.exports = {
  // ...
  externals: {
    vue: 'Vue',
    'element-ui': 'ELEMENT',
  },
};

HTML 单独引入：

<head>
  <script src="path/to/vue.js"></script>
  <script src="path/to/element-ui.js"></script>
</head>

模块分包 `/* webpackChunkName: name */`

export default [
  {
    path: '/',
    component: () => import(/* webpackChunkName: "index" */ '@/views/Index.vue'),
    children: [
      {
        path: 'page-a',
        component: () => import(/* webpackChunkName: "page" */ '@/views/PageA.vue'),
      },
      {
        path: 'page-b',
        component: () => import(/* webpackChunkName: "page" */ '@/views/PageB.vue'),
      },
    ],
  },
];

打包后输出 index 和 page 两个 chunk

lodash 按需加载

1. 安装依赖

yarn add babel-plugin-lodash -D

2. 配置 babel

babel.config.js

module.exports = {
  plugins: ['lodash'],
};

3. 使用

Transforms

import _ from 'lodash';
import { add } from 'lodash/fp';

const addOne = add(1);
_.map([1, 2, 3], addOne);

roughly to

import _add from 'lodash/fp/add';
import _map from 'lodash/map';

const addOne = _add(1);
_map([1, 2, 3], addOne);

参考： babel-plugin-lodash

使用 optional chaining 语法（ `obj?.prop` ）

1. 安装依赖

yarn add @babel/plugin-proposal-optional-chaining -D

2. 配置 babel

babel.config.js

module.exports = {
  plugins: ["@babel/plugin-proposal-optional-chaining"]
};

3. 使用

Transforms

a?.b

roughly to

a == null ? undefined : a.b

参考： Optional Chaining for JavaScript

图解 webpack

webpack 编译流程

webpack 进阶

The text was updated successfully, but these errors were encountered:

zh-rocco self-assigned this Jul 5, 2018

Repository owner locked as off-topic and limited conversation to collaborators Jul 5, 2018

Repository owner unlocked this conversation Aug 17, 2018

Repository owner locked as resolved and limited conversation to collaborators Aug 17, 2018

zh-rocco added the Webpack label Sep 3, 2018

zh-rocco changed the title ~~Webpack~~ 【Webpack】 Sep 3, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

【Webpack】 #1

【Webpack】 #1

zh-rocco commented Jun 7, 2018 •

edited

Loading

【Webpack】 #1

【Webpack】 #1

Comments

zh-rocco commented Jun 7, 2018 • edited Loading

webpack.config.js Hot Reload

Proxy Hot Reload

思路

在同一个页面中加载多个 webpack 实例

方式一

方式二

CSS 打包顺序

模块上下文 require.context

提取公共依赖

模块分包 /* webpackChunkName: name */

lodash 按需加载

1. 安装依赖

2. 配置 babel

3. 使用

使用 optional chaining 语法（ obj?.prop ）

1. 安装依赖

2. 配置 babel

3. 使用

图解 webpack

webpack 进阶

zh-rocco commented Jun 7, 2018 •

edited

Loading

`webpack.config.js` Hot Reload

模块上下文 `require.context`

模块分包 `/* webpackChunkName: name */`

使用 optional chaining 语法（ `obj?.prop` ）