1.了解Webpack什么是webpack？Webpack是一个模块打包器（bundler）。从Webpack的角度来看，所有的前端资源文件（js/json/css/img/less/...）都会被当作模块来处理。它会根据模块依赖进行静态分析，生成相应的静态资源。五个核心概念Entry：入口点表示webpack应该使用哪个模块作为构建其内部依赖图的起点。输出：输出属性告诉webpack在哪里输出它创建的包，以及如何命名这些文件。默认值为./dist。Loader：loader使webpack能够处理那些非JavaScript文件（webpack本身只能解析JavaScript）。插件：插件可用于执行更广泛的任务。插件的范围从打包优化和压缩，一直到重新定义环境中的变量。mode：模式，有production模式production和development模式development理解LoaderWebpack本身只能加载JS/JSON模块，如果要加载其他类型的文件（模块），需要使用相应的loader转换/加载Loader本身也是运行在node.js环境下的JavaScript模块，本身就是一个接受源文件作为参数并返回转换后结果的函数。加载器一般以xxx-loader的形式命名，其中xxx表示加载器要执行的转换函数，比如json-loader。了解Plugins可以完成一些loader不能完成的功能。插件的使用一般在webpack的配置信息的plugins选项中指定。配置文件（默认）webpack.config.js：是一个node模块，返回一个json格式的配置信息对象2.打开项目初始化工程：生成package.json文件{"name":"webpack_test","version":"1.0.0"}installwebpacknpminstallwebpackwebpack-cli-g//全局安装npminstallwebpackwebpack-cli-D//本地安装3.编译打包应用，创建一个js文件src/js/app。js源代码/js/module1.jssrc/js/module2.jssrc/js/module3.js创建json文件src/json/data.json创建主页面：src/index.html运行命令开发配置命令：webpacksrc/js/app.js-odist/js/app.js--mode=development功能：webpack可以编译打包js和json文件，可以将es6的模块化语法转换成浏览器可以识别的语法生产配置指令：webpacksrc/js/app.js-odist/js/app.js--mode=productionfunction:在开发配置函数中添加一个压缩代码结论：webpack可以编译打包js和json文件，将es6的模块化语法转换成浏览器可以识别的语法即可压缩代码缺点：不能编译打包css、img等文件不能将js的es6基本语法转成es5及以下语法改进：使用webpack配置文件解决，自定义函数4.使用webpack配置文件目的：定义配置在项目根目录下的文件，通过自定义配置文件，恢复上面的函数文件名：webpack.config.js文件内容：const{resolve}=require('path');//node内置的核心模块用于设置路径。module.exports={entry:'./src/js/app.js',//入口文件output:{//输出配置文件名:'./js/bundle.js',//输出文件名path:resolve(__dirname,'dist')//输出文件路径配置},mode:'development'//开发环境（任选其一）mode:'production'//生产环境（任选其一）};运行命令：webpack5，js语法检查installloadernpminstalleslint-loadereslint--save-devconfigureloadermodule:{rules:[{test:/\.js$/,//只检测js文件exclude:/node_modules/,//excludenode_modulesfolderenforce:"pre",//使用提前加载use:{//使用eslint-loader解析loader:"eslint-loader"}}]}修改package.json（需要删除注释才能生效）"eslintConfig":{//eslint配置"parserOptions":{"ecmaVersion":8,//es8"sourceType":"module",//ECMAScriptmodule}}运行说明：webpack6、js语法转换安装loadernpminstallbabel-loader@babel/core@babel/preset-env--save-devconfigurationloadermodule:{rules:[{oneOf:[//数组中只有一个配置生效，后面的配置会放在当前数组{测试：/\.js$/，排除：/node_modules/,use:{loader:"babel-loader",options:{presets:['@babel/preset-env']}}}]}]}运行命令：webpack7，打包更少的资源，创建更少的文件src/less/test1.lesssrc/less/test2.less入口app.js文件导入less资源安装loadernpminstallcss-loaderstyle-loaderless-loaderless--save-dev配置loaderoneOf:[{test:/\.less$/,use:[{loader:"style-loader"},{loader:"css-loader"},{loader:"less-loader"}]}]运行命令：webpack在index.html中引入打包的dist/js/bundle.js文件，观察效果8.在打包样式文件的图片资源中添加2张图片：小图，小于8kb：src/images/1.png大图，大于8kb：src/images/2.jpg在通过背景图引入less文件中的图片来安装loadernpminstallfile-loaderurl-loader--save-dev补充：url-loader是objectfile-loader的上层包，需要配合使用文件加载器配置loader{test:/\.(png|jpg|gif|svg)$/,use:[{loader:'url-loader',options:{outputPath:'images/',//在输出的基础上，modify输出图片文件的位置publicPath:'../dist/images/',//修改背景图片的路径importurllimit:8*1024,//8kb以下图片文件用base64处理name:'[hash:8].[ext]'//hash值为7位，ext自动补全文件扩展名}}]}运行命令：webpack将打包后的dist/js/bundle.js文件导入index.html，并观察效果9.打包html文件，添加html文件src/index.html。注意不要在html中引入任何css和js文件。安装插件Pluginsnpminstallclean-webpack-plugin--save-dev在webpack中引入插件。需要手动引入，但是loader会自动加载)constCleanWebpackPlugin=require('clean-webpack-plugin')配置插件Pluginsplugins:[newHtmlWebpackPlugin({template:'./src/index.html'}),]运行命令：webpack10，在html中打包图片资源添加图片在src/index.html中添加两个img标签installloadernpminstallhtml-loader--save-devmodifyentryentry:['./src/js/app.js','./src/index.html']配置loader{test:/\.(html)$/,use:{loader:'html-loader'}}运行指令：webpack11，打包其他资源，添加字体文件src/媒体/iconfont。eotsrc/媒体/iconfont.svgsrc/media/iconfont.ttfsrc/media/iconfont.woffsrc/media/iconfont.woff2修改样式@font-face{font-family:'iconfont';src:url('../media/iconfont.eot');src:url('../media/iconfont.eot?#iefix')format('embedded-opentype'),url('../media/iconfont.woff2')format('woff2'),url('../media/iconfont.woff')format('woff'),url('../media/iconfont.ttf')format('truetype'),url('../media/iconfont.svg#iconfont')format('svg');}.iconfont{font-family:"iconfont"!important;字体大小：16px；字体样式：正常；-webkit-font-smoothing：抗锯齿；-font-smoothing:grayscale;}修改html，添加字体配置loader{loader:'file-loader',exclude:[/\.js$/,/\.html$/,/\.json$/],options:{outputPath:'media/',publicPath:'../dist/media/',name:'[hash:8].[ext]',},}运行说明：webpack12，自动编译，打包，运行和安装loadernpminstallwebpack-dev-server--save-dev引入webpackconstwebpack=require('webpack');修改webpack配置对象（不在加载器中）devtool:'inline-source-map',//willcompile代码映射回原始源码，更容易跟踪错误和警告devServer:{contentBase:'./dist',//项目根路径hot:true,//启用热模型替换功能open:true//automaticallyopenthebrowsertool},plugins:[newwebpack.NamedModulesPlugin(),newwebpack.HotModuleReplacementPlugin()]修改loader部分的配置，因为构建工具使用dist作为根目录，所以不需要再次找到distpublicPath:'../dist/images/'->publicPath:'images/'publicPath:'../dist/media/'-->publicPath:'media/'修改package.json中的scripts命令。json"start":"webpack-dev-server","dev":"webpack-dev-server"运行命令：npmstart/npmrundev以上是webpack开发环境的配置，可以自动打包所有类型文件在内存中，具有自动编译运行、热更新等功能。13.准备生产环境，创建文件夹config，复制webpack.config.js到两个webpack.dev.jswebpack.prod.js修改webpack.prod.js配置，删除webpack-dev-server配置module.exports={output:{filename:'js/[name].[hash:8].js',//添加hash值实现静态资源的长期缓存publicPath:'/'//所有输出资源的公共路径},module:{//loader没有其他变化，只有变化的部分，只有路径部分需要修改rules:[{oneOf:[{test:/\.(png|jpg|gif|svg)$/,use:[{loader:'url-loader',options:{limit:8*1024,//8kb以下的图片文件用base64处理name:'images/[name].[hash:8].[ext]'}}]},{loader:'file-loader',exclude:[/\.js$/,/\.html$/,/\.json$/],options:{name:'media/[name].[hash:8].[ext]',},}]}]},mode:'production',//修改为生产环境}修改package.json命令"start":"webpack-dev-server--config./缺点fig/webpack.dev.js""dev":"webpack-dev-server--config./config/webpack.dev.js""build":"webpack--config./config/webpack.prod.js"开发环境命令npmstartnpmrundev生产环境命令npmrunbuild注意：生产环境代码需要部署到服务器运行npmiserve-gserve-sdist14，清空包文件目录安装插件npminstallclean-webpack-plugin--save-devimportpluginconstCleanWebpackPlugin=require('clean-webpack-plugin');configurepluginnewCleanWebpackPlugin()runcommand:npmrunbuild15,extractcssintoaseparatefile安装插件npminstallmini-css-extract-plugin--save-devimportpluginconstMiniCssExtractPlugin=require("mini-css-extract-plugin");配置加载器{test:/\.less$/,use:[MiniCssExtractPlugin.loader,'css-loader','less-loader',]}配置插件newMiniCssExtractPlugin({filename:"css/[name].[hash:8].css",chunkFilename:"css/[id].[hash:8].css"})运行命令npmrunbuildserve-sdist16，添加css兼容安装loadernpminstallpostcss-loaderautoprefixer--save-devconfigureloader{test:/\.less$/,use:[MiniCssExtractPlugin.loader,'css-loader','postcss-loader','less-loader',]}在项目根目录添加postcss配置文件：postcss.config.jsmodule.exports={"plugins":{"autoprefixer":{"browsers":["ie>=8","ff>=30","chrome>=34","safari>=8","opera>=23"]}}}运行命令：npmrunbuildserve-sdist17,compresscssinstallationpluginnpminstalloptimize-css-assets-webpack-plugin--save-devimportpluginconstOptimizeCssAssetsPlugin=require('optimize-css-assets-webpack-plugin');配置插件newOptimizeCssAssetsPlugin({cssProcessorPluginOptions:{preset:['default',{discardComments:{removeAll:true}}],},})运行命令：npmrunbuildserve-sdist18，图片压缩安装loadernpminstallimg-loaderimagemin-gifsicleimagemin-mozjpegimagemin-pngquantimagemin-svgoimagemin--save-dev配置加载器{测试:/\.(png|jpg|gif|svg)$/,使用:[{loader:'url-loader',options:{limit:8*1024,//8kb以下的图片文件用base64处理name:'images/[name].[hash:8].[ext]'}},{loader:'img-loader',选项：{plugins:[require('imagemin-gifsicle')({interlaced:false}),require('imagemin-mozjpeg')({progressive:true,arithmetic:false}),require('imagemin-pngquant')({floyd:0.5,speed:2}),require('imagemin-svgo')({plugins:[{removeTitle:true},{convertPathData:false}]})]}}]}运行命令：npmrunbuildserve-sdist19,compresshtml修改插件配置newHtmlWebpackPlugin({template:'./src/index.html',minify:{removeComments:true,collapseWhitespace:true,removeRedundantAttributes:true,useShortDoctype:true,removeEmptyAttributes:true,removeStyleLinkTypeAttributes:true,keepClosingSlash:true,minifyJS:true,minifyCSS:true,minifyURLs:true,}})运行命令：npmrunbuildserve-sdist以上是webpack生产环境的配置，可以生成打包文件基本的配置到这里就告一段落了，我把所有的配置都放到了仓库里。Webpack4优化教程第二期出炉啦~欢迎关注和提问~
