webpack学习

webpack 基础配置：学习版本，4+。4点版本，内置了代码自动压缩功能

entry:入口文件。可以设置多个入口，设置name属性

output:出口文件。

mode: development | production  ，// 模式配置，生产和开发模式，自动配置了，代码压缩等一系列功能，自动去除没有使用到的代码

tree shaking ：移除上下文未使用到的代码，配置了 production模式，自动拥有这些功能

module loader 模块：

    1.如何处理css文件：需要在module配置style-loader和css-loader 。默认编译出来的css是和js混在一快的。

    2.处理图片：在module.rules中配置file-loader，会生成单独的图像文件。

    3.字体图库的处理，也采用 file-loader来处理，生成独立文件。

plugins:插件模块

    1.HtmlWebpackPlugin插件，自动生成html文件，并且把输出的文件都自动添加到html上。

    2.clear-webpack-plugin插件，清理dist文件，2.0以上版本，只接收对象作为参数，不传也能完成任务，搬用官网案例会报错。

    3.webpack-merge 插件：提供代码合并功能。

    4.webpack-bundle-analyzer 插件：分析每个包的大小，和来源

生产环境使用的：

    1.devtool: 'inline-source-map', 这样配置在生产环境能够追踪到错误根源 ，api源自 source map。

    2.监听代码热更新的3种方法：a. 在命令行中配置 "watch": "webpack --watch", 开启自动监听脚本模式，缺点是需要自己刷新浏览器。

                                                 b.使用webpack-dev-server 插件即模块热替换，配置参数，然后在命令行中配置启动命令。最常用，会自动刷新页面。

                                                 c.webpack-dev-middleware 插件 ，要开启Node 服务，来运行，不会自动刷新页面

 

$(function () { var objId = $('val[data-name="objId"]').data('value'); $.get('https://www.oschina.net/action/apiv2/get_article_recommends_test?key=osc_3_' + objId); });