6.4 xxx is not a constructor，npx命令，webpack严格遵循导入导出，★★webpack学习小记，source-map无追踪

1、xxx is not a constructor 问题两种情况
1.1、在尝试es5的require方式导入模块，发现打包时出现,Vue is not a constructor
在比对大佬的代码后，发现不同就是大佬使用的是es6的import引入Vue而我是require，
故尝试安装babel最新插件让webpack支持es6语法。
安装三大核心插件

    "@babel/core": "^7.4.5",
    "babel-loader": "^8.0.6",
    "babel-preset-env": "^1.7.0",

果然，经打包，Vue运行正常。

1.2、还有可能是模块未module.export导出

2、npx命令
可以运行存在于当前目录下的安装包相关命令。 比如 npx webpack -v 查看版本号

3、webpack严格遵循导入导出模块
2019年6月4日15:57:57 下午就犯了个错，浏览器还是报 xx is not a constructor 当时就懵了，后来倒回去看视频资料，才发现我忘记将模块导出。所以 webpack根本找不到你导出的模块。但是webpack会将你导入的模块重新命名成a,b,c,d等，所以排错比较困难。好在解决了。

4、学习webpack4的配置，由浅入深。
1、面向过程
2、面向对象
3、js引入模块概念
4、webpack找到index.js入口文件进行打包
5、entry output配置出入相关,publicPath
6、module rules:[]配置相关正则test，再指定use
7、use可对象可数组，具体分析，实战得真知。
8、厂商前缀postcss.config.js看文档。
9、importLoaders无效，用postcss-import
10、自动生成html,html-webpack-plugin // 检测生成的js,并script化
11、清理dist目录，{ clean-webpack-plugin }
12、如何自动刷新webpack，–watch node端 webpack-dev-server（热加载配置）
13、hotmoudlereplacement 热加载。
14.1、babel转义,babel-loader（通信）,@babel/core（babel核心库）,@babel/preset-env（转义,再配置 .babelrc 或者options中加入"presets": ["@babel/preset-env"]即可，
14.2、为了兼容低版本浏览器对新特性api的不支持。@babel/polyfill（需import '@babel/polyfill’到入口index.js文件内）
14.3、且根据api适配打包，配置参数要变化，如下：

关于第14点的总结：

如果只是业务代码：
babel-loader @babael/core是必须的
@babel/preset-env 是转义es6语法,在loader配置项引入"@babel…,"，或文件注入都可以。

若要兼容低版本浏览器，就需要@babel/polyfill，它可以适配es6新api。
polyfill的使用需要在index.js入口文件，import ‘@babel/polyfill’，
默认是适配全部api（打包完体积非常大）。故要使用按需适配需要配置参数。主要是use里的options中的presets，或者.babelrc文件配置

useBuiltIns: ‘usage’ 开启即可

如果是第三方库项目代码
先注释掉入口文件的import “@babel/polyfill”（会污染全局变量）
需要根据以下官网安装库开发的相关插件

https://www.babeljs.cn/docs/babel-plugin-transform-runtime

且配置大概如下：

上述的所有配置过程，均可以通过创建.babelrc配置


注: .babelrc不能放注释，需要绝对干净，这点和.env.development一样

15.1、Tree Shaking按需打包导出过的方法。只支持静态引入，即esModule模块import引入，export检测是否导出。dev需配置optimization:{usedExports：true}，package.json配置sideEffects:[]
Tree Shaking开发环境的配置：

// 1、webpack.config.js 部分配置：
mode: 'development',
devtool: 'cheap-module-eval-source-map',
optimization: {
	usedExports: true
}

// 2、在package.json 部分配置
sideEffects: ["@babel/polyfill", "*.css"] // 对polyfill和css后缀文件不进行shaking
sideEffects: false, // 无第三方模块，全部文件shaking

// 注： development模式下，打包文件仅会提示哪些use（便于production之前的观察），不会改变原代码。

Tree Shaking生产环境的配置（mode: “production”）

// 1、webpack.config.js 部分配置：
	mode: 'production',
	devtool: 'cheap-module-source-map'
	
注：production模式下optimization配置项可以不需要，官方已配置好。
	
// 2、在package.json 部分配置
	sideEffects: "..."  //必须配置。

15.2、 tree Shaking和polyfill的usedBuiltIn。前者是对模块是否导出的适配，后者是es6的api转义成es5的适配。
16、publicPath是公共路径，比如域名等等。
17、webpack-merge第三方插件
18、webpack是基于node环境运行的的，所以写法采用commonjs。而入口文件的编译是webpack做的，所以支持es6写法
19.1、Code Splitting 配置项optimization:{splitChunks:{chunks:‘all’}}（这是同步模块的分割。异步模块可以无需配置,webpack自动会分割）。
19.2 注：代码分割和webpack无关。
20、解决Support for the experimental syntax ‘dynamicImport’ isn’t currently enabled问题，需要安装实验语法babel-plugin-dynamic-import-webpack第三方插件 ，在.babelrc下添加"plugins": [“dynamic-import-webpack”]
21、但 dynamic-import-webpack不支持模板注释的写法（比如/* webpackChunkName: subarea */），故删除掉该插件。取而代之找官方提供的插件。
22、为了适配异步模块的实验语法支持，官方提供了babel import dynamic插件
23、默认splitChunks默认是仅支持异步模块分割，且配置了cacheGroups参数使异步模块打包入vender组内。（默认是async，若开启同步模块分割，需要将chunks: ‘all’）
24、vendors组test的是node_module下的库，所以，它是第三方模块插件的打包组。

25、 cacheGroups: {vendors:{…}}打包的模块和cacheGroups的配置参数是配合使用的。如果未定义组的规则，那么即便检测到同步或异步模块需分割，无分割适配组，也不能分割成功、
26、js懒加载是es实验语法import的结果，异步模块均为懒加载。
27、首屏渲染利用率问题，以及preloading，prefetching，以魔法注释来写生效，后者较优。

// 当首屏渲染结束，且网络带宽闲置时，prefetch开始加载。
import(/* webpackPrefetch: true */ './click.js').then(异步代码)
// preload是和主文件一起加载。
import(/* webpackPreload: true */ './click.js').then(异步代码)

5、devtool: ‘source-map’ 文件报错时无法追踪映射地址。
经尝试，devtools: ‘eval-source-map’ 包括其他eval属性的sourceMap都可以追踪映射地址。

inline-source-map也可以，只要不生成map.js映射文件的sourceMap模式都可以。