Vinson

Vinson

webpack5(一)

发表于 2023-09-12
Vinson
阅读量 88

1.webpack初体验

webpack是什么

  • webpack是一个静态的模块化打包工具,为现代的javascript应用程序
  • 我们来对上面的解释进行拆解
    • 打包bundler:webpack可以将帮助我们进行打包,所以它是一个打包工具
    • 静态的static:这样表述的原因是我们最终可以将代码打包成最终的静态资源(部署到静态服务器)
    • 模块化module:webpack默认支持各种模块化开发,ES Module、CommonJS、AMD等
    • 现代的modern:我们前端说过,正是因为现代前端开发面临各种各样的问题,才催生了webpack的出现和发 展

webpack的安装目前分为两个:webpack、webpack-cli

  • 那么它们是什么关系呢?
    • 执行webpack命令,会执行node_modules下的.bin目录下的webpack;
    • webpack在执行时是依赖webpack-cli的,如果没有安装就会报错;
    • 而webpack-cli中代码执行时,才是真正利用webpack进行编译和打包的过程;
    • 所以在安装webpack时,我们需要同时安装webpack-cli(第三方的脚手架事实上是没有使用webpack-cli的,而是类似于 自己的vue-service-cli的东西)
# 生成package.json
npm init -y

# 安装webpack webpack-cli
npm i webpack webpack-cli -D
shell
// webpack.config.js

const path = require('path')

module.exports = {
  entry: '/src/main.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, './dist')
  }
}
js
// package.json

// 1.比如我们将webpack.config.js修改成了 wk.config.js
// 2.这个时候我们可以通过 --config 来指定对应的配置文件
{
  "script": {
    "build": "webpack --config wk.config.js" // 打包
  }
}
json

2.webpack配置和css处理

loader

  1. 上面的错误信息告诉我们需要一个loader来加载这个css文件,但是loader是什么呢?
    • loader 可以用于对模块的源代码进行转换;
    • 我们可以将css文件也看成是一个模块,我们是通过import来加载这个模块的;
    • 在加载这个模块时,webpack其实并不知道如何对其进行加载,我们必须制定对应的loader来完成这个功能;
# 对于加载css文件来说,我们需要一个可以读取css文件的loader
#  css-loader 的作用是将 CSS 模块转换为一个 JS 模块,具体的实现方法是将我们的 CSS 代码 push 到一个数组中,这个数组是由 css-loader 内部的一个模块提供的,但是整个过程并没有任何地方使用到了这个数组。
# css-loader 只会把 CSS 模块加载到 JS 代码中,而并不会使用这个模块。
npm install css-loader -D

# 因为css-loader只是负责将.css文件进行解析,并不会将解析之后的css插入到页面中
# 我们还需要在 css-loader 的基础上再使用一个 style-loader,把 css-loader 转换后的结果通过 style 标签追加到页面上。
npm install style-loader -D

# 我们可以使用less工具来完成它的编译转换
# 这个时候我们就可以使用less-loader,来自动使用less工具转换less到css
npm install less less-loader -D
shell
// webpack.config.js

module.exports = {
  entry: '/src/main.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, './dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        // loader: 'css-loader', // 写法一
        // use: ['css-loader'], // 写法二
        // 注意:因为loader的执行顺序是从右向左(或者说从下到上,或者说从后到前的),
        // 所以我们需要将style- loader写到css-loader的前面;
        use: [
          { loader: 'style-loader'},
          { loader: 'css-loader' },
          { loader: 'postcss-loader' }
        ]
      }, 
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          'postcss-loader',
          'less-loader'
        ]
      }
    ]
  }
}
javascript

浏览器兼容性

  1. 兼容性是针对不同的浏览器支持的特性:比如css特性、js语法,之间的兼容性;
  2. 我们知道市面上有大量的浏览器:
    1. 有Chrome、Safari、IE、Edge、Chrome for Android、UC Browser、QQ Browser等等;
    2. 它们的市场占率是多少?我们要不要兼容它们呢?
  3. 其实在很多的脚手架配置中,都能看到类似于这样的配置信息:
    1. 这里的百分之一,就是指市场占有率
 > 1%
last 2 versions
not dead
shell
  1. 但是在哪里可以查询到浏览器的市场占有率呢?
    3. 这个最好用的网站,也是我们工具通常会查询的一个网站就是caniuse;
    4. 浏览器市场占有率

认识browserslist工具

  1. Browserslist是一个在不同的前端工具之间,共享目标浏览器和Node.js版本的配置:
    1. Autoprefixer
    2. Babel
    3. postcss-preset-env
    4. eslint-plugin-compat
    5. stylelint-no-unsupported-browser-features p postcss-normalize
    6. obsolete-webpack-plugin
  2. 编写规则一:
    • 那么在开发中,我们可以编写的条件都有哪些呢?(加粗部分是最常用的)
    • defaults:Browserslist的默认浏览器(> 0.5%, last 2 versions, Firefox ESR, not dead)。
    • 5%:通过全局使用情况统计信息选择的浏览器版本。 >=,<和<=工作过。
      • 5% in US:使用美国使用情况统计信息。它接受两个字母的国家/地区代码。
      • 5% in alt-AS:使用亚洲地区使用情况统计信息。有关所有区域代码的列表,请参见caniuse-lite/data/regions
      • 5% in my stats:使用自定义用法数据。
      • 5% in browserslist-config-mycompany stats:使用 来自的自定义使用情况数据browserslist-config-mycompany/browserslist-stats.json。 p cover 99.5%:提供覆盖率的最受欢迎的浏览器。
      • cover 99.5% in US:与上述相同,但国家/地区代码由两个字母组成。
      • cover 99.5% in my stats:使用自定义用法数据。
    • dead:24个月内没有官方支持或更新的浏览器。现在是IE 10,IE_Mob 11,BlackBerry 10,BlackBerry 7, Samsung 4和OperaMobile 12.1。
    • last 2 versions:每个浏览器的最后2个版本。
      • last 2 Chrome versions:最近2个版本的Chrome浏览器。
      • last 2 major versions或last 2 iOS major versions:最近2个主要版本的所有次要/补丁版本。
  3. 编写规则二
  • node 10和node 10.4:选择最新的Node.js10.x.x 或10.4.x版本。
    • current node:Browserslist现在使用的Node.js版本。
    • maintained node versions:所有Node.js版本,仍由 Node.js Foundation维护。
  • iOS 7:直接使用iOS浏览器版本7。
    • Firefox > 20:Firefox的版本高于20 >=,<并且<=也可以使用。它也可以与Node.js一起使用。
    • ie 6-8:选择一个包含范围的版本。
    • Firefox ESR:最新的[Firefox ESR]版本。
    • PhantomJS 2.1和PhantomJS 1.9:选择类似于PhantomJS运行时的Safari版本。
  • extends browserslist-config-mycompany:从browserslist-config-mycompanynpm包中查询 。
  • supports es6-module:支持特定功能的浏览器。 es6-module这是“我可以使用” 页面feat的URL上的参数。有关所有可用功能的列表,请参见 。caniuse-lite/data/features
  • browserslist config:在Browserslist配置中定义的浏览器。在差异服务中很有用,可用于修改用户的配置,例如 browserslist config and supports es6-module。
  • since 2015或last 2 years:自2015年以来发布的所有版本(since 2015-03以及since 2015-03-10)。
  • unreleased versions或unreleased Chrome versions:Alpha和Beta版本。
  • not ie <= 8:排除先前查询选择的浏览器。

命令行使用browserslist

  • 我们可以直接通过命令来查询某些条件所匹配到的浏览器:

npx browserslist '>1%, last 2 version, not dead'

配置browserslist

  • 方案一
// package.json
"borwserslist": [
  "> 0.2%",
  "last 2 version",
  "not dead"
]
json
  • 方案二: 根目录下创建.browserslistrc文件
// .browserslistrc
> 1%
last 2 version
not dead
shell
  • 没有配置,也会有一个默认配置:

  • 多个条件之间的关系

认识postcss工具

PostCSS是一个通过JavaScript来转换样式的工具;
这个工具可以帮助我们进行一些CSS的转换和适配,比如自动添加浏览器前缀、css样式的重置;
但是实现这些工具,我们需要借助于PostCSS对应的插件;

# 安装postcss-loader
# autoprefixer 插件 添加前缀
npm i postcss-loader autoprefixer -D
shell
// webpack.config.js

{
  loader: 'postcss-loader',
  options: {
    postcssOptions: {
      plugins: [
        require('autoprefixer')
      ]
    }
  }
}
javascript
  • 我们也可以将这些配置信息放到一个单独的文件中进行管理:
    • 在根目录下创建postcss.config.js
// postcss.config.js
module.exports = {
  plugins: [
    // require('autoprefixer')
    'autoprefixer'
  ]
}
javascript
  • 事实上,在配置postcss-loader时,我们配置插件并不需要使用autoprefixer。
  • 我们可以使用另外一个插件:postcss-preset-env
    • ppostcss-preset-env也是一个postcss的插件;
    • 它可以帮助我们将一些现代的CSS特性,转成大多数浏览器认识的CSS,并且会根据目标浏览器或者运行时环 境添加所需的polyfill;
    • 也包括会自动帮助我们添加autoprefixer(所以相当于已经内置了autoprefixer);
# 安装
npm i postcss-preset-env -D
shell
// postcss.config.js
module.exports = {
  plugins: [
    // require('postcss-preset-env')
    'postcss-preset-env'
  ]
}
javascript
  • 我们举一个例子:
    • 我们这里在使用十六进制的颜色时设置了8位; p但是某些浏览器可能不认识这种语法,我们最好可以转成RGBA的形式;
    • 但是autoprefixer是不会帮助我们转换的;
    • 而postcss-preset-env就可以完成这样的功能;
评论
来发一针见血的评论吧!
表情

快来发表评论吧~

推荐文章
  • 测试文章

    20点赞10评论

  • webpack5(一)

    20点赞10评论