本系列文章是我在学习webpack时的总结与播种，心愿我的一些学习内容能够帮忙到一些正在学习 webpack 的敌人。本片文章为系列文章的第二篇，蕴含 webpack 根底配置与 css 相干 loader
webpack的应用（01篇内容补充）
webpack装置形式：
# 全局装置npm install webpack webpack-cli -g# 本地我的项目装置npm install webpack webpack-cli如果咱们间接在命令行中执行 webpack ，此时，它默认应用的全局装置的webpack以及webpack-cli，如果没有全局装置这两个货色，则就会报错如下：
$ webpack --config wk.config.jsbash: webpack: command not found如果在全局也装置了雷同的依赖，那么咱们是能够间接执行该命令的
若想要应用本地我的项目中的 webpack、webpack-cli，有两种形式：
npx webpack --config wk.config.js：该命令能够间接应用 node_modules/.bin/ 下的可执行文件，应用的就是本地装置的依赖npm run build：该命令会执行 package.json 文件中 scripts 下的 build 命令，此时会优先应用本地依赖，如果本地依赖不存在，则会应用全局依赖
这一点也解释了很常见的一个面试题：为什么要运行 npm run xxx，而不间接运行其对应的指令
webpack 配置
webpack 配置文件
webpack 的默认配置文件为：webpack.config.js ，放在我的项目的根目录下。但其实，webpack（我应用的webpack5的版本）提供了三种默认配置文件的写法，均位于我的项目根目录下，自上而下优先级递加，如下所示：
- webpack.config.js
- .webpack/webpack.config.js
- .webpack/webpackfile.js
如果不想应用默认配置文件，能够自定义配置文件，在package.json中，增加--config 自定义配置文件门路
"scripts": { "build": "webpack --config path"}在 webpack-cli/lib/webpack-cli.js 中能够查看到相应代码：
if (options.config && options.config.length > 0) { // 读取自定义配置文件 // options.config 中蕴含自定义配置文件的门路 const loadedConfigs = await Promise.all( options.config.map((configPath) => { return loadConfigByPath(path.resolve(configPath), options.argv) } ), );} else { // 默认配置文件门路 // Order defines the priority, in decreasing order const defaultConfigFiles = [ "webpack.config", ".webpack/webpack.config", ".webpack/webpackfile" ]}自定义配置文件
webpack 根底配置
这部分内容蕴含entry、output以及module的简略配置，更为简单的配置例如多入口、hashname等将在后续文章中逐渐解说
entry：示意打包文件的入口，用相对路径示意
module.exports = { // 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: [ ] }}rules 当中寄存的是 Rule 对象，Rule 对象能够分为三个局部：
- Rule Conditions: 用来匹配对应的文件。例如，应用test、include、exclude等联合正则表达式匹配 css、less、jpg文件
- Rule results: 应用的loader，罕用的属性有loader、options、use。use 属性对应一个数组，数组中寄存一个个对象，这些对象就是具体应用的loader。其中，loader属性为字符串，options 属性为字符串或对象，其会被传入到 loader 中
- Nested rules: 在属性规定下指定嵌套规定
具体写法有三种：
第一种写法：最残缺的写法
module.exports = { module: { rules: [ { test: /\.css$/, // 应用正则表达式进行匹配 use: [ {loader: 'css-loader'， options: {}} ] } ] }}第二种写法：当只有一个loader时，能够采取这种简写形式
module.exports = { module: { rules: [ { test: /\.css$/, // 应用正则表达式进行匹配 loader: 'css-loader' } ] }}第三种写法：省略 loader 属性，间接写 loader 的名称，能够在不配置 options 属性的状况下应用这种简写形式
module.exports = { module: { rules: [ { test: /\.css$/, // 应用正则表达式进行匹配 use: [ 'css-loader' ] } ] }}css 相干 loader 配置
css-loader
css-loader 只用来加载css文件，并不会将解析之后的css插入到页面，因而，打包之后的HTML中款式并不会发生变化
此时，能够看到并没有以style标签或行内款式的形式插入CSS，所以，CSS不会失效
style-loader
若想要 css-loader 解决后的款式插入到页面中，还须要另外一个loader, style-loader。style-loader 负责在页面中创立一个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 文件
less
npm install less less-loader --save-devsass
npm install sass-loader sass webpack --save-dev留神，真正将 less 文件转为 css 文件的是咱们装置的 less 工具，这个工具与 webpack 没有关系，而less-loader 会主动调用 less 包，对 less 文件进行解决
执行 npx less ./src/css/component.less > component.css 能够将less 文件转为 css 文件
less 文件解决配置
module.exports = { rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader', 'less-loader' ] } ]}