美文网首页
webpack基础使用(一)

webpack基础使用(一)

作者: JerrySi | 来源:发表于2022-01-04 23:22 被阅读0次
  • 为现代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"
  1. 指定配置文件
// 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' 
  1. 配置文件使用
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;
  }
  1. 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')
              ]
            }
          }
        }]
      }
  1. 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']
      }

相关文章

网友评论

      本文标题:webpack基础使用(一)

      本文链接:https://www.haomeiwen.com/subject/mpdwqrtx.html