越努力,越幸运~~

webpack开发全家桶开发环境配置webpack-dev-server配置 devServer 指定静态资源服务器路径配置代理服务，解决开发环境接口跨域问题配置 Source MapHMR — Hot Module Replacement使用方式HMR 注意事项多环境配置根据环境不同导出不同配置一个环境对应一个配置文件DefinePlugin示例webpack优化Tree ShakingconcatenateModulessideEffects代码分割多入口打包动态导入MiniCssExtractPlug

为什么要用插件？loader 和plugin的区别loaderplugin常见的pluginclean-webpack-pluginhtml-webpack-plugincopy-webpack-plugin自定义plugin开发----- loader 和plugin的区别 loader loader：主要用于对模块源码的转换，因为webpack本身只支持js处理，loader描述了webpack如何处理非javascript模块，并且在build中引入这些依赖。loader可以将文件从不同css预处理转

webpack 编译 ES2015 webpack 默认只是对 js 模块的打包，并不会对 ES 新特性进行转化。import和export 默认能被打包，是因为这是eamodule的语法，但是其他es新特性语法并不会被转化，比如箭头函数并不会被编译成普通函数 使用 babel-loader 转化 ES 新特性 npm install babel @babel/core @bable/preset-env module.rules 中使用 babel module: { ..

为什么要模块化？ ES Modules 存在环境兼容问题 模块文件过多，网络请求频繁 所有的前端资源都需要模块化 主流模块打包工具：webpack（适用于大型应用）、parcel(小型应用，快速开发测试demo)、rollup（适用于单模块开发） webpack 配置文件 webpack.config.js module.exports = { entry: './src/index.js', // 入口文件：相对路径不能省略 ./ output: { // 输出配置 filename: