作者：余云的webpack是目前前端常用的工程化工具。它可以帮助我们自动化构建和打包各种资源，大大提高了我们打包代码的效率。在webpack看来，所有的资源文件都是模块，只是处理方式不同而已。一、webpack初探1、安装webpack建议不要全局安装webpack，因为不同项目的webpack版本号不同。这样在多个项目之间来回切换非常不方便。npminstallwepackwebpack-cli-g在项目中安装webpacknpminstallwepackwebpack-cli-D注意：webpack-cli的作用是我们可以直接在命令行使用webpack查看版本npxwebpack-v来查看所有可以安装的webpack版本号npminfowebpack2，最简单的webpack.config.js配置constpath=require('path');module.exports={entry:{main:'./src/index.js'},output:{filename:'main.js',path:path.resolve(__dirname,'dist')}}这个配置告诉我们：我们需要打包的入口文件是./src/index.js，以及最终输出的包文件在当前目录下的dist/main.js中如果有bundle/index.html，可以通过脚本导入main.js文件。当然，这也可以通过webpack自动完成。3.两种打包方式1)npxnpxwebpacknpx表示会在当前目录下寻找依赖变量webpack2)script在package.json中配置"scripts":{"bundle":"webpack"},这样就可以运行npmrunbundle运行npxwebpack/npmrunbundle会先查看是否有配置文件webpack.config.js，如果没有，则转到默认配置，如果有，则转到配置文件中本次打包使用的版本.Time：表示当前打包的总耗时。Asset：表示本次出现的bundle。对于xxx，yyyEntrypointmain=bundle.js表示入口文件和依次打包的文件0[2]...2.使用Loader打包资源1.什么是loader？webpack无法识别非js模块，需要针对不同的模块提供不同的打包方案，所以向loader求助。如：css-loader、sass-loader、file-loader、vue-loader、postcss-loader等2.打包图片file-loader的实现原理：当找到导入图片模块的代码时，先搬把图片放到dist目录下保存改了名字，得到dist的相对地址，给我们引入的变量作为返回值module.exports={entry:{main:'./src/index.js'}，模块：{规则：[{测试：/\.(jpg|png)$/，使用：{加载器：'文件加载器'，选项：{名称：'[name]_[hash].[ext]',//[name][hash][ext]为占位符outputPath:'images/',//将打包后的结果放在images/目录下limit:10240}}}]},output:{filename:'main.js',path:path.resolve(__dirname,'dist')}}3.打包的CSS或SASScss-loader：帮助我们分析几个css的关系（相互引入），合并成一个cssstyle-loader：当css-loader合并成一个css时，style-loader会将内容挂载到head部分sass-loader：将sass解析成csspostcss-loader：自动添加-webkit等前缀，使用postcss-loader兼容不同的浏览器风格，需要在根目录下创建postcss.config.jsmodule.exports={plugins:[require('autoprefixer')]}moduleconfigurationmoduleinwebpack.config.js:{rules:[{test:/\.(jpg|png|gif)$/,use:{loader:'url-loader',options:{name:'[name]_[hash].[ext]',outputPath:'images/',限制:10240}}},{test:/\.(eot|ttf|svg)$/,use:{loader:'file-loader'}},{test:/\.scss$/,use:['style-loader',{loader:'css-loader',options:{importLoaders:2}},'sass-loader','postcss-loader']}]},Loader解析是顺序Sequential:从下到上，从右到左4、CSSmodules{test:/\.scss$/,use:['style-loader',{loader:'css-loader',options:{importLoaders:2,//表示scss文件导入scss文件，仍然使用postcss-loadersass-loadermodules:true//启用css模块化}},'sass-loader','postcss-loader']}模块启用后为true,它将ModularCSS互不干扰地使用否则，导入的CSS或SASS代码会造成全局污染。用法如下：importstylefrom'./index.scss';varimg=newImage();img.src=avatar;img.classList.add(style.avatar);5．在webpack.config.js中配置打包字体{test:/\.(eot|ttf|svg)$/,use:{loader:'file-loader'}},3.使用Plugins方便打包1.WhatIs它插件？plugins在某个时刻做一件事（刚打包后，打包后，打包中）2.打包结束时，html-webpack-plugin自动在dist中生成html，并自动导入打包后的main.jshtmlscript标签3.clean-webpack-plugin每次打包生成的dist文件前删除dist文件内容4.安装配置两个插件npminstallhtml-webpack-pluginclean-webpack-plugin-Dwebpack.config.jsconstHtmlWebpackPlugin=require('html-webpack-plugin');constCleanWebpackPlugin=require('clean-webpack-plugin');plugins:[newHtmlWebpackPlugin({template:'src/index.html'//参考模板是src/index.html}),newCleanWebpackPlugin(['dist'])],还有其他的插件，比如热更新HotModuleReplacementPlugin...慢慢补充介绍四个，前面的Entry和Output配置是单入口，单-退出配置。1.多入口多出口入口：{main:'./src/index.js',sub:'./src/index.js'},plugins:[newHtmlWebpackPlugin({template:'src/index.html'}),newCleanWebpackPlugin(['dist'])],output:{filename:'[name].js',path:path.resolve(__dirname,'dist')}最后的结果就是两个Ajs文件2.将打包后的JS上传到CDEntry:{main:'./src/index.js',sub:'./src/index.js'},插件:[newHtmlWebpackPlugin({template:'src/index.html'}),newCleanWebpackPlugin(['dist'])],output:{publicPath:'http://cdn.com.cn',//最后打包的是http://cdn.com.cn,main.jsfilename:'[name].js',path:path的.resolve(__dirname,'dist')}html引入的脚本会自动添加publicPath路径五、SourceMap1.什么是SourceMap举个例子：打开浏览器，发现代码报错。...现在我知道dist目录下的main.js文件的第96行有错误。使用sourceMap（是映射关系）后，我知道dist目录下的main.js文件的第96行其实对应的是src目录下的index.js文件的第一行。使用sourceMap会减慢打包速度。同时dist中多了一个xx.js.map文件，它基于一个vlq集合2.在webpack.config.jsdevtooldevtool中配置SourceMap:'cheap-module-eval-source-map',几个常用的source-mapsPrefix:inline:inline-source-map就是把xx.js.map的内容直接打包到xx.js中，以数据url的形式放在最后，会告诉你哪个row和column的问题，性能开销很大Cheap:添加cheap-inline-source-map可以精确到每一行，而不精确到每一列错误，可以减少打包时间，提高性能Module:如果你想管理第三方模块代码的映射，可以添加模块，可以添加cheap-module-inline-source-mapEval：eval是最快的打包方式。Eval是最快的执行方式和最佳执行方式。但是如果代码比较复杂，提示的内容可能不够全面。使用eval执行JS代码3.最佳实践开发环境：完整提示，快速打包速度模式：'development'，devtool：'cheap-module-eval-source-map'，生产环境：提示效果会更好mode：'production',devtool:'cheap-module-source-map',六、webpackDevServer1，如何解决每次手动打包，手动启动浏览器刷新页面更新代码？webpack--watch在package.json中的脚本中添加"watch":"webpack--watch"优点：监听源码变化，会自动打包缺点：需要手动刷新页面webpack-dev-server添加脚本在package.json"start":"webpack-dev-server",install"webpack-dev-server"indevDependencies:"^3.1.10"优点：监控源码时，会自动打包，服务器将自动启动，浏览器将自动更新。webpack-dev-server打包后，目录下不会有dist，而是放在电脑的某个内存中，可以提高效率。2.如何启动时自动打开浏览器在webpack.config.js中配置devServer:{contentBase:'./dist',open:true,//默认打开浏览器port:8080,//设置端口为8080},7.热更新HMR（HOTMODULEREPLACE）如果你只是单纯的使用webpack-dev-server，那么当代码发生变化时，浏览器会自动刷新初始化数据。有时很麻烦。有什么办法吗：修改css时，只改变css的样式，js添加的数据不变。此时，将背景颜色改为红色或者修改某个模块的数据时，另一个模块的数据不会改变。配置如下webpack.config.jsconstwebpack=require('webpack');devServer:{contentBase:'./dist',open:true,port:8080,hot:true,//开启热更新功能hotOnly:true//即使HMR不生效，浏览器也不会更新},plugins:[newHtmlWebpackPlugin({template:'src/index.html'}),newCleanWebpackPlugin(['dist']),newwebpack.HotModuleReplacementPlugin()//配置热更新插件]，必须添加模块更新的代码。比如有两个模块，当number模块发生变化时，更新数字，counter模块不发生变化index.jsimportcounterfrom'./counter';importnumberfrom'./number';counter();number();if(module.hot){module.hot.accept('./number',()=>{document.body.removeChild(document.getElementById('number'));number();})}csscannotwritemodule.hot判断是因为已经实现了css-loader。如果有一些特殊的模块，需要自己写一个module.hot来判断。八、Babel处理ES6语法1、安装依赖npminstall--save-devbabel-loader@babel/core@babel/preset-envbabel-loader：提供识别模块打包工具@babel/core：识别js代码并转换成AST抽象语法树，编译转换成新的语法@babel/preset-env：将ES6代码转换成ES5语法，提供翻译规则2，打包方式二选一1）安装@babel/profillnpminstall-save-dev@babel/profill缺点：这样会造成全局污染配置规则：[{test:/\.js$/,exclude:/node_modules/,loader:'babel-loader',options:{presets:[['@babel/preset-env',{targets:{chrome:"67",},useBuiltIns:'usage'//表示polyfill根据业务代码添加相应代码，可以减少打包体积}]]}}],注：useBuiltIns:'usage'表示按需导入2）安装@babel/plugin-transform-runtimenpminstall-save-dev@babel/plugin-transform-runtime@babel/runtime@babel/runtime-corejs2优点：但是使用闭包不影响其他环境变量配置的创建。babelrc{"plugins":[["@babel/plugin-transform-runtime",{"corejs":2,//如果使用2，需要安装@babel/runtime-corejs2"helpers":true,"regenerator":true,"useESModules":false}]]}webpack.config.js{test:/\.js$/,exclude:/node_modules/,loader:'babel-loader'}9.打包React代码1.安装依赖@babel/preset-react:可以解析JSXnpminstall--save-dev@babel/preset-reactwebpack.config.js{test:/\.js$/,exclude:/node_modules/,loader:'babel-loader',}create.babelrc{"presets":[["@babel/preset-env",{"targets":{"chrome":"67"},"useBuiltIns":"usage"}],"@babel/preset-react"]}注：先解析react的语法，再将ES6的语法解析成ES5presets是自下而上的，从右到左，我们是小黑板的前端。欢迎关注我们的知乎、Segmentfault、CSDN、简书、开源中国、博客园账号。
