浏览器望能更快的解析代码，而不是更好的看懂代码。所以Webpack的次要作用就是压缩、优化咱们写的代码，把多余的货色去掉，而后依照浏览器喜爱的格调来编排代码！

webpack3降级4 Cannot read property ‘Consumer’ of undefined

loader官网上的定义：loader 是一个转换器，用于对源代码进行转换。例如 babel-loader 能够将 ES6 代码转换为 ES5 代码；sass-loader 将 sass 代码转换为 css 代码。个别 loader 的配置代码如下： {代码…} rules 数组蕴含了一个个匹配规定和具体的 loader 文件。上述代码中的 test: /\.js$/ 就是匹配规定，示意对 js …

1.babel-core当咱们在webpack中应用babel的时候，首先要装置babel-core，这是babel编译库的外围包 {代码…} 2.babel-loader之后，webpack中对js文件，咱们要进行编译，就须要配置，在webpack中，须要用到babel-loader来应用bebel {代码…} 所以，在webpack.config.js代码中，要这样写： {代码…} 3.babel-preset-xxx(…

写我的项目的源代码，源文件左侧有一个入口，最下面的.js一个一个的方格能够了解成一个一个的模块，因为webpack是基于node的，所以能够用模块的概念来辨别文件。箭头的示意➡️一个模块能够依赖多个模块箭头➡️示意他们之间的依赖关系左侧会有很多，后缀的文件是浏览器无奈辨认的。例如：.sass .hbs .cjs所以须要通过webpack 来…

放大文件的搜寻范畴（loader配置includeexclude、module.noParse疏忽对局部没有采纳的模块话的文件递归解析，resolve modules间接指定第三方模块的门路）

简略来说，就是不须要运行代码；所以es6的import/export只能作为模块顶层的语句呈现，模块名称不能够有字符串拼接，不能呈现在条件判断中。。。

当 webpack 打包源代码时，可能会很难追踪到谬误和正告在源代码中的原始地位。例如，如果将三个源文件（a.js, b.js 和 c.js）打包到一个 bundle（bundle.js）中，而其中一个源文件蕴含一个谬误，那么堆栈跟踪就会简略地指向到 bundle.js。这并通常没有太多帮忙，因为你可能须要精确地晓得谬误来自于哪个源文件。

有一些第三方模块会针对不同环境提供几分代码。 例如别离提供采纳 ES5 和 ES6 的2份代码，这2份代码的地位写在  package.json  文件里，如下：

{代码…} {代码…} {代码…} {代码…} {代码…} {代码…} {代码…} {代码…} {代码…} {代码…} {代码…}