webpack 知识点

1.webpack 模块化实现

项目里面引入了moment

import moment from 'moment'

在非debug状态下，尝试输入moment是拿不到moment这个模块的，但是debug代码的时候不能直接拿到moment这个模块，而是通过__WEBPACK_IMPORTED_MODULE_18_moment___default可以拿到
按理说moment()调用一次就拿到了moment对象，然而并不可以

moment

__WEBPACK_IMPORTED_MODULE_18_moment___default()()调用了两次才拿到

  onTimeChange = val => {
    const mon = moment //这边通过
    console.info(val)
  }

debug

从上图可知 debug 状态还是无法再控制台输出moment(),而赋值给变量mon就可以执行mon()拿到moment对象，而__WEBPACK_IMPORTED_MODULE_18_moment___default()()还是要执行两次才能拿到moment对象

webpack务虚扫盲
从 Bundle 文件看 Webpack 模块机制
webpack模块加载原理

2. require.context

官网的解释：

require.context(directory:String, includeSubdirs:Boolean /* optional, default true */, filter:RegExp /* optional */)

Specify a whole group of dependencies using a path to the directory
, an option to includeSubdirs
, and a filter
for more fine grained control of the modules included. These can then be easily resolved later on:

var context = require.context('components', true, /\.html$/);//获取components目录下所有以.html结尾的文件（包括其子目录）
var componentA = context.resolve('componentA');

使用webpack的require.context实现路由“去中心化”管理
webpack require context 说明

3. 使用ejs作为HtmlWebpackPlugin的模板

通常情况下我们使用HTML作为单页面的模板，

  new HtmlWebpackPlugin({  // Also generate a test.html
      filename: 'test.html',
      template: 'src/assets/test.html'
    })

但是有时候我们需要在页面用到变量或者遍历数组，那么就需要使用模板引擎，比如ejs，

  <script src="<%= htmlWebpackPlugin.options.devServer %>/webpack-dev-server.js" type="text/javascript"></script>

上面的htmlWebpackPlugin.options.devServer变量 来自于webpack.config.js

 new HtmlWebpackPlugin({
      inject: false,
      template: '../index.ejs',
      appMountId: 'app',
      devServer: 'http://localhost:3001', // 看这里
      mobile: true,
      lang: 'en-US',
      title: 'My App',
      window: {
        env: {
          apiHost: 'http://myapi.com/api/v1'
        }
      }
    })
  ]

具体配置参考jaketrent/html-webpack-template
小白学react之EJS模版实战

4. vscode debug webpack

我们在启动项目的时候都是使用npm script启动的，那么怎么用vscode启动项目并debug webpack的打包呢？

首先配置vscode launch.json

    {
      "type": "node",
      "request": "launch",
      "name": "Launch via NPM with dll",
      "runtimeExecutable": "npm",
      "runtimeArgs": ["run-script", "dll"],
      "port": 9229
    },

一开始做的尝试node --inspect-brk ./node_modules/.bin/webpack --config config/webpack.config.dll.js但是报错

basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")           ^^^^^^^  SyntaxError: missing ) after argument list

看了这篇issue node --inspect-brk ./node_modules/.bin/webpack --config config/webpack.config.dll.js 报错解决办法 修改为node --inspect-brk ./node_modules/webpack/bin/webpack --config config/webpack.config.dll.js
这样就可以调试了，哈哈哈

报错的原因好像是操作系统的问题，.bin目录下是shell和cmd文件，直接node --inspect-brk ./node_modules/.bin/webpack就执行shell，而在Windows上执行node --inspect-brk ./node_modules/.bin/webpack.cmd也会报错

SyntaxError: missing ) after argument list