本系列文章是我在学习webpack时的总结和收获。希望我的一些学习内容可以帮助到一些正在学习webpack的朋友。本文为系列文章的第二篇，包括webpack的基本配置和css相关loaderwebpack的使用（01内容补充）webpack安装方法：#全局安装npminstallwebpackwebpack-cli-g#本地项目安装npminstallwebpackwebpack-cli如果我们直接在命令行执行webpack，此时默认使用全局安装的webpack和webpack-cli。如果这两个东西没有全局安装，会报错如下：$webpack--configwk.config.jsbash:webpack:commandnotfound如果全局安装了同样的依赖，那我们直接执行命令即可。如果想在本地项目中使用webpack和webpack-cli，有两种方式：npxwebpack--configwk.config.js：该命令可以直接使用node_modules/.bin/下的可执行文件，使用本地安装的dependencynpmrunbuild：这个命令会执行package.json文件中scripts下的build命令，这个Localdependencies会优先使用。如果本地依赖不存在，将使用全局依赖。这也解释了一个很常见的面试问题：为什么运行npmrunxxx而不是直接运行它对应的命令webpack配置webpack配置文件webpack默认的配置文件是：webpack.config.js，放在项目的根目录下。但实际上，webpack（我使用的webpack5版本）提供了三种写默认配置文件的方式，都位于项目的根目录下，从上到下优先级递减，如下：webpack.config.js.webpack/webpack.config.js.webpack/webpackfile.js如果不想使用默认的配置文件，可以自定义配置文件。在package.json中添加--config自定义配置文件路径"scripts":{"build":"webpack--configpath"}可以在webpack-cli/lib/webpack-cli.js中查看对应代码：if(options.config&&options.config.length>0){//读取自定义配置文件//options.config包含自定义配置文件的路径constloadedConfigs=awaitPromise.all(options.config.map((configPath)=>{returnloadConfigByPath(path.resolve(configPath),options.argv)}),);}else{//默认配置文件路径//顺序定义优先级，递减顺序constdefaultConfigFiles=["webpack.config",".webpack/webpack.config",".webpack/webpackfile"]}自定义配置文件webpack这部分基础配置包括入口、输出、模块的简单配置。multi-entry、hashname等更复杂的配置在后续文章中会逐步讲解：entry表示打包文件的入口，使用相对路径表示module。//src下的index.js文件为打包入口文件entry:'./src/index.js'}outptut:打包文件输出配置输出文件路径path为绝对路径module.exports={output:{filename:'bundle.js',path:path.resolve(__dirname,'./build')}}module:主要用来配置loader选项，写法结构如下：module.exports={module:{rules:[]}}规则存储Rule对象，Rule对象可以分为三部分：RuleConditions：用于匹配对应的文件。比如结合正则表达式使用test、include、exclude等来匹配css、less、jpg文件。规则结果：使用的加载器。常用的属性有loader、options和use。use属性对应一个数组，每个对象都存储在数组中，这些对象就是具体使用的loader。其中loader属性是一个字符串，options属性是一个字符串或者一个对象，会传入loader中。嵌套规则：属性rules下指定嵌套规则具体有三种写法：第一种写法：最全的写法module.exports={module:{rules:[{test:/\.css$/,//使用正则表达式匹配use:[{loader:'css-loader',options:{}}]}]}}第二种写法：当只有一个loader时，可以使用这种简写module.exports={module:{rules:[{test:/\.css$/,//使用正则表达式匹配loader:'css-loader'}]}}第三种写法：省略loader属性，直接写name装载机。这种简写方式可以不用配置options属性module.exports={module:{rules:[{test:/\.css$/,//使用正则表达式匹配use:['css-loader']}]}}css相关loader配置css-loadercss-loader只是用来加载css文件，不会解析css插入到页面中，所以打包后的HTML中的样式不会改变。这时可以看到style标签或内联样式中并没有插入css，所以css不会生效。style-loader如果你想在css-loader处理后插入样式到页面上，还需要另外一个loader，style-loaderstyle-loader负责在页面中创建一个style标签，并将处理后的style插入其中，这样我们就可以在页面上看到style的变化。需要注意的是loader的执行顺序是有问题的。在webpack中，当需要多个loader时，css-loader是按自下而上的顺序执行加载css文件，style-loader将处理后的css插入到页面中，所以css-loader是在style-loader之前执行module.exports={rules:[{test:/\.css$/,use:['style-loader','css-loader']}]}如何处理less等css预处理文件？开发中经常会用到less、sass、stylus预处理器来编写css样式，那么如何支持这些预处理器呢？因此，需要将预处理器样式文件转换成css文件，然后对css文件进行处理lessnpminstalllessless-loader--save-devsassnpminstallsass-loadersasswebpack--save-dev注意真正的less文件是转换成css文件我们安装的是less工具。该工具与webpack无关，less-loader会自动调用less包处理less文件。执行npxless./src/css/component.less>component.css将less文件转换成css文件less文件处理配置module.exports={rules:[{test:/\.css$/,use:['style-loader','css-loader','less-loader']}]}
