webpack学习笔记二

sourceMap

源代码与打包后的代码的映射关系。例如，在某个源文件中test.js里面有个错误，如果开启状态，那么打包后运行的报错信息就会说明是错误的具体位置，如果是关闭状态，报错后，提示的报错位置，会是打包的出口文件。

在开发模式中，默认开启，关闭的话，可以在配置文件里添加：

 devtool的常见配置：

• eval：速度最快，使用eval包裹模块代码
• source-map：产生.map文件
• cheap：较快，不用管列的信息，也不包含loader的sourcemap
• Module：第三方模块，包含loader的sourcemap
• inline：将.map作为DataURI嵌入，不单独生成.map文件

推荐配置：

 webpackDevServer

webpackDevServer是一个提升开发效率的利器。之前每次改完代码后，都需要重新打包一次，刷新一次，安装使用了webpackDevServer以后，就可以改善这一块的操作和体验了。

首先需要进行安装：npm install webpack-dev-server -D

然后修改package.json

 并且在配置文件webpack.config.js中进行相关配置：

 然后执行命令npm run server进行打包。

 解决跨域

webpackDevServer的另一重要功能就是解决跨域：

当我们在某一个页面中使用下面这种方式进行请求时，就会报跨域错误：

 此时，就可以通过配置webpackDevServer来解决跨域了：

 然后修改上面的请求就可以了：

 Hot Module Replacement(HMR：热模块替换)

 HMR是webpack自带的一个功能，使用过程中，首先需要引入：

 然后在plugins里面进行配置：

 最后开启就可以了：

 处理js模块HRM

上面的处理，对样式的更新十分有效，但是如果要处理js的话，则还需要在此基础上添加module.hot.accept来观察模块更新。

 babel处理ES6

 babel-loader是webpack与babel的通信桥梁，@babel/preset-env里包含了ES6转ES5的转换规则。

使用前首先需要安装：npm i babel-loader @babel/core @babel/preset-env -D

然后在配置文件webpack.config.js中进行配置

@babel/polyfill

 此时，只是将一些简单的ES6进行了转换了，如果要想完全能正常使用，还需要借助@babel/polyfill，把es6的新特性都装进来，弥补低版本浏览器中性能的缺失。

首先进行安装：npm install @babel/polyfill -D

然后在使用到promise等ES6语法的文件顶部进行引入：

index.js

在配置文件webpack.config.js中进行按需加载的配置。（polyfill默认会把所有特性都注入进来，如果不添加下面的配置，则会让打包体积变的非常大）

然后进行打包就可以了。

还有另外一种做法，在项目根目录下新建.babelrc的文件，然后将上面配置里面的options部分移入到这个文件中，再进行打包，也是可行的。

 

 webpack.config.js

 @babel/plugin-transform-runtime

 当我们开发的是组件库、工具库的时候，polyfill就不合适了，因为polyfill是注入到全局变量window下的，会污染全局环境。这种情况下，用@babel/plugin-transform-runtime更合适。

首先进行安装：

npm install --save-dev @babel/plugin-transform-runtime

npm install --save @babel/runtime

 然后使用前，还需要注释掉前面index.js里面polyfill的引入

再到.babelrc里面添加配置

 配置完成以后，就可以打包使用了。