webpack安装npm初始化，控制台输入npminit-ywebpack安装npmiwebpackwebpack-cli-Dnewwebpack.config.jsconstpath=require('path')module.exports={entry:'./src/index.js',output:{filename:'bundle.js',path:path.resolve(__dirname,"dist")}}mode:mode(optional:development,production)entry:入口文件output:package输出文件（打包到哪里）createanewsrc/index.jsmodule.exports=function(){return2}package.json配置在根目录下启动，因为没有全局安装webpack，所以不能执行webpack命令用来打包。"build":"webpack"可以在package.json中配置:{"name":"webpackBabel","version":"1.0.0","description":"","main":"index.js","scripts":{"build":"webpack"},"keywords":[],"author":"","license":"ISC","devDependencies":{"webpack":"^5.59.1","webpack-cli":"^4.9.1"}}到这里简单的webpack已经配置好了，在终端输入npmrunbuild你会发现多了一个dist/bundle.js文件/**注意：“eval”devtool已被使用（可能默认模式为：“development”）。*这个devtool既不是为生产而设计的，也不是为可读的输出文件而设计的。*它使用“eval()”调用在浏览器开发工具中创建一个单独的源文件。*如果您尝试读取输出文件，请选择不同的开发工具(https://webpack.js.org/configuration/devtool/)*或使用“devtool:false”禁用默认的开发工具。*如果您正在寻找生产就绪的输出文件，请参阅模式：“生产”(https://webpack.js.org/configuration/mode/)。*//******/(()=>{//webpackBootstrap/******/var__webpack_modules__=({/***/"./src/index.js":/*!***************************!*\!***./src/index.js***!\**********************//***/((模块)=>{eval("module.exports=function(){\r\nreturn2\r\n}\n\n//#sourceURL=webpack://webpackBabel/./src/index.js?");/***/})/******/});/***************************************************************************//******///模块缓存/******/var__webpack_module_cache__={};/******//******///require函数/******/function__webpack_require__(moduleId){/******///检查模块是否在缓存中/******/varcachedModule=__webpack_module_cache__[moduleId];/******/if(cachedModule!==undefined){/******/returncachedModule.exports;/******/}/******///创建一个新模块（并放入缓存）/******/varmodule=__webpack_module_cache__[moduleId]={/******///没有module.idneeded/******///不需要module.loaded/******/exports:{}/******/};/******//******///执行模块函数/******/__webpack_modules__[moduleId](module,module.exports,__webpack_require__);/******//******///返回模块/******/returnmodule的导出。出口;/******/}/******//******************************************************************************//******//******///startup/******///加载入口模块并返回exports/******///这个入口模块被其他模块引用所以它不能内联/******/var__webpack_exports__=__webpack_require__("./src/index.js");/*******//******/})();这是打包后的文件，webpack默认自带common.js解析，可以直接打包loader配置webpack如果需要打包css、img等文件，需要使用loader配置，在module参数中配置，下面使用几个常用的加载器配置：constpath=require('path')module.exports={mode:"development",entry:'./src/index.js',output:{文件名：'bundle.js'，路径：path.resolve(__dirname,"dist")},模块：{规则：[{测试：/\.css$/，使用：[//[style-loader](/loaders/style-loader){loader:'style-loader'},//[css-loader](/loaders/css-loader){loader:'css-loader',options:{modules:true}}]},{测试:/\.(jpg|png|gif)$/,使用:{loader:'url-loader',options:{name:'[name]_[hash].[ext]',outputPath:'images/',limit:10240//如果图片大小小于10240，使用base64}}},{test:/\.(eot|ttf|svg)$/,use:{loader:'file-loader'}}]}}loader需要安装：npmiurl-loaderfile-loaderurl-loadercss-loaderstyle-loader-DHtmlWebpackPlugin插件安装安装html-webpack-pluginnpmihtml-webpack-plugin-Dhtml-webpack-plugin插件可以在dist文件夹下生成一个index.html文件并导入打包好的js插件中配置文件html-webpack-plugin:...constHtmlWebpackPlugin=require("html-webpack-plugin")...plugins:[newHtmlWebpackPlugin()]执行npmrunbuild后，会发现有有很多dist文件创建了一个index.html引入了bundle.jsbabel的配置安装babelnpminstall--save-devbabel-loader@babel/preset-env@babel/core配置babel-loader:module:{rules:[{test:/\.js$/,exclude:/node_modules/,//不转换文件use:[{loader:'babel-loader'}]},{test:/\.css$/,use:[//[style-loader](/loaders/style-loader){loader:'style-loader'},//[css-loader](/loaders/css-loader){loader:'css-loader',options:{modules:true}}]}...]}...new.babelrcfile{"presets":["@babel/preset-env"]}src/index.js写一个es6语法：module.exports=function(){consta=1returna}然后执行npmrunbuild，你会发现dist/bundle.js中的const已经转换成了var，虽然有些语法可以转换，但是当遇到诸如promise打包的Promise不会被转换，所以这时候需要polyfill(polyfill)@babel/polyfill来处理assign,includes,map,includes,promiseinstallnpmi@babel/polyfill-sbabelrcconfiguration{"presets":[["@babel/preset-env",{"debug":true,"useBuiltIns":"usage"//usage表示按需导入polyfill，导入所有条目，false不导入}]]}tothisbabelBasically，可以实现到es5的转换运行时生成用于开发组件的polyfill。问题已经解决了，但是如果你是开发npm组件，此时不能使用polyfills，因为polyfills会污染全局变量。这时候需要用到一个插件@babel/plugin-transform-runtimeinstallnpminstall--save@babel/runtimenpminstall--save-dev@babel/plugin-transform-runtimenpminstall--save@babel/runtime-corejs2--save.babelrc{"presets":[["@babel/preset-env",{"debug":true,"useBuiltIns":"false"}]],"plugins":[["@babel/plugin-transform-runtime",{"corejs":2//参考官方文档}]],}gitee地址https://gitee.com/cat-ui
