webpack基础使用(一)

• 为现代JavaScript应用提供静态模块打包

Webpack 功能

• 打包：将不同类型资源按模块处理进行打包
• 静态：打包后最终产出静态资源
• 模块：webpack支持不同规范的模块化开发

一、基础配置

1. 安装webpack，yarn add webpack webpack-cli --dev
2. 默认运行webpack，会找本地文件src/index.js，然后生成dist/main.js
3. 配置输入输出文件

• 命令配置
  webpack --entry './src/main.js' --output-path 'build' --output-filename 'main.js'
• 文件配置

// webpack.config.js
const path = require('path')
module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    // path必须要绝对路径
    path: path.join(__dirname, 'output1')
  }
}

// package.json
"build": "webpack"

4. 指定配置文件

// package.json
"build": "webpack --config 'srs.config.js'"

二、CSS的使用

• Loader是必须的，主要是负责转换的
• css-loader处理能识别的模块类型
• style-loader才是真正去使用

1. 安装Loader，yarn add css-loader style-loader --dev
2. 行内使用

// webpack5 行内引用 多个css使用!分割
import 'css-loader!./main.css' 

3. 配置文件使用

import './main.css'

const path = require('path')
module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'main.js',
    path: path.join(__dirname, 'dist')
  }, 
  module: {
    rules: [
      // 还可以配置option
      {
        test: /.css$/,
        // use 从后开始执行
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader'
          }
        ]
      }

      // 被多个loader使用
      // {
      //   test: /.css$/,
      //   use: ['style-loader', 'css-loader']
      // }

      // 被一个loader使用， 而且不需要配置参数
      // {
      //   test: /.css$/,
      //   loader: 'css-loader'
      // }
    ]
  }
}

三、less的使用

1. 安装yarn add less-loader less --dev，less-loader需要依赖less
2. 使用less-loader

// webpack.config.js
module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      }
    ]
  }

四、browserslistrc

browserslistrc 用于获取兼容性的工具，本质上从caniuse上获取。webpack自带。有3种使用方式：

• 命令行

// 并且可以使用and，或者可以使用or或逗号
npx browserslist '>10% and last 2 version'

• package.json

  // 使用逗号代表或
  "browserslist": [
    ">10%",
    "last 2 version",
    "not dead"
  ]
  // 或者
  "browserslist": [
    ">10% and last 3 version and not dead"
  ]

• .browserslistrc

>10% and last 3 version and not dead

#直接换行就是或
#>10%
#last 3 version
#not dead

五、postcss

1. postcss是利用JavaScript转换样式的一个独立工具。
   yarn add postcss --dev
2. postcss不能像browserslist在终端命令行里面直接使用，但是可以通cli工具字命令行使用。
   yarn add postcss-cli --dev
3. autoprefixer自动添加样式前缀来兼容不同浏览器。
   postcss是个独立工具，需要插件才能修改。
   yarn add autoprefixer --dev
4. 转换yarn postcss --use autoprefixer -o ret.css ./src/test.css。、
   autoprefixer是根据.browserslistrc的配置来做对应前缀添加的。

// 原来
.title {
    display: grid;
    transition: all 0.5s;
    user-select: none;
  }

运行后

.title {
    display: grid;
    transition: all 0.5s;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
  }

5. postcss-loader
   yarn add postcss-loader --dev

// postcss处理css-》 css-loader导入css-》style-loader使用css
{
        test: /\.css$/,
        use: ['style-loader', 'css-loader', {
          loader: 'postcss-loader',
          options: {
            postcssOptions: {
              plugins: [
                require('autoprefixer')
              ]
            }
          }
        }]
      }

6. postcss-preset-env
   yarn add postcss-preset-env --dev
   a. 预设-插件的集合，帮助postcss找到package.json中的browserlist里面的配置，通过配置加载指定的css兼容性样式。

{
        test: /\.css$/,
        use: ['style-loader', 'css-loader', {
          loader: 'postcss-loader',
          options: {
            postcssOptions: {
              plugins: [
                require('autoprefixer'),
                require('postcss-preset-env')
              ]
            }
          }
        }]
      }

// 效果
color: #12345678
=》
color: rgba(18,52,86,0.47059)

b. 简写， postcss-preset-env包含了autoprefixer预设。

// 简写
{
        test: /\.css$/,
        use: ['style-loader', 'css-loader', {
          loader: 'postcss-loader',
          options: {
            postcssOptions: {
              plugins: [ 'postcss-preset-env' ]
            }
          }
        }]

c. 配置文件：postcss.config.js，必须这个名字。
这样多个配置的地方就可以复用了。

// postcss.config.js
module.exports = {
    plugins: [ 
        require('postcss-preset-env')
    ]
}

// webpack.config.js
const path = require('path')

module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'main.js',
    path: path.join(__dirname, 'dist')
  }, 
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader', 'postcss-loader']
      },
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader']
      }
    ]
  }
}

d. importLoaders，我们有可能会通过@import来导入其他css

@import './test.css';
.title {
  color: #87654321
}

但是postcss-loader不会处理@import里面的css， 运行到css-loader的时候才会处理，但是默认情况下css-loader处理完成后会让style-loader处理。

{
        test: /\.css$/,
        use: ['style-loader', {
          loader: 'css-loader',
          options: {
            // 代表向前找一个loader处理
            importLoaders: 1
          }
        }, 'postcss-loader']
      }