# 指定入口文件和输出path：
## 1、执行 `npx webpack --entry ./src/main.js --output-path ./build` 命令
## 2、`package.json` 配置：`"dist": "webpack --entry ./src/main.js --output-path ./build"`,
## 3、在根目录建`webpack.config.js`进行配置：
```
const path = require('path')
module.exports = {
entry: './src/main.js',
output: {
filename: 'bundle.js', // 可以加上路径，如 js/bundle.js
path: path.resolve(__dirname, './build')
}
}
```
# `webpack.config.js`重命名问题：
## 1、在package.json配置：`"dist": "webpack --config ./wk.config.js"`
# css-loader和style-loader的使用方案：
## 1、内联方式
引入css的地方：
`import '../css/index.css'`
改成
`import 'css-loader!../css/index.css'`
用几个loader，就写几个
## 2、CLI方式（webpack5不支持了）
## 3、配置方式
在webpack.config.js的module.rules中配置
```
module.exports = {
...
module: {
rules: [
{
// 官网：https://webpack.docschina.org/concepts/loaders/#using-loaders
test: /\.css$/, // 匹配规则，正则表达式
// use属性，非常重要，表示解析test匹配的内容
use: [
{
loader: 'css-loader',
options: { modules: true } // 给loader传参
},
'less-loader' // use的一种简写
],
// 规则对应的loader，use的另一种简写，当只有一个loader，并且不需要传参，可以用这种,不需要use数组括起来
loader: 'style-loader'
}
]
}
}
```
*注意：处理css，应该先用css-loader处理文件，再用style-loader将样式解析到页面中，而webpack在use中有多个loader时，是从下往上，从右往左使用不同的loader，所以应该这么配置：*
```
module: {
rules: [
{
test: /\.css$/, // 匹配规则
use: [
'style-loader',
'css-loader'
]
},
]
}
```
# less的解析：
## 1、安装less将less转成css
`npm install less -D` 安装完后，会在node_modules多个lessc文件夹
执行`npx less ./src/css/component.less`，可以看到 TERMINAL 输出的解析的结果；
执行`npx less ./src/css/component.less > ./src/css/component.css`，可以将less转成对应的css文件；
当然，在开发过程中，不会这么使用，而是通过配置webpack来批量解析
## 2、安装less-loader文件加载less文件
安装：`npm install less-loader -D`
webpack配置：
```
module: {
rules: [
{
test: /\.less$/,
use: [
'style-loader', // 第三，用style-loader将css代码插入到页面中
'css-loader', // 其次，用css-loader批量解析刚才less-loader生成的css文件
'less-loader' // 首先，less-loader会借助刚才安装less，进行批量less文件解析
]
}
]
}
```
# 浏览器兼容性，browserslist工具
## browserslist 是一个在不同的前端工具之间，共享目标浏览器和Node.js版本的配置：`autoprefixer`、`babel`、`postcss-preset-env`等等
## 在vue项目中，根目录的`.browserslistrc`文件、在react的package.json文件中的`browserslis`配置，都是配置项目需要支持的浏览器，内容如下：
```
> 1% // 浏览器的市场占有率，https://caniuse.com/usage-table
last 2 version
not dead
```
这些条件主要提供给`autoprefixer`、`babel`、`postcss-preset-env`等工具，适配浏览器的程度
## browserslist 编写规则：
1. defaults // browserslist的默认浏览器（>0.5%, last 2 versions, Firefox ESR, not dead)
2. > 1%
3. not dead // 24个月内官方支持或有更新
4. last 2 version // 或者类似 `last 2 chrome version` 最后两个chrome版本
5. iOS 7 // 针对某个平台打包，如 `Firefox >20`、`ie 6-8`等
6. current node // 针对node版本支持等...
## browserslist 的安装和在命令行使用：
在安装webpack的时候，默认会自动安装，在node_modules 的 .bin 中也有可执行的 browserslist 文件，所以可以直接用 `npx browserslist ">0.5%, last 2 versions, Firefox ESR, not dead"` 命令直接查看支持的浏览器
## browserslist 在webpack配置的两种方案：
1. 在`package.json`中配置：
在跟节点增加 browserslist 字段：
```
{
...
"browserslist": [
">1%",
"last 2 version",
"not dead"
]
}
```
2. 在项目根目录新建`.browserslistrc`，在里面写：
```
> 1%
last 2 version
not dead
```