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

浏览器兼容性

2. 兼容性是针对不同的浏览器支持的特性:比如css特性、js语法，之间的兼容性；
3. 我们知道市面上有大量的浏览器:
   1. 有Chrome、Safari、IE、Edge、Chrome for Android、UC Browser、QQ Browser等等;
   2. 它们的市场占率是多少?我们要不要兼容它们呢?
4. 其实在很多的脚手架配置中，都能看到类似于这样的配置信息:
   1. 这里的百分之一，就是指市场占有率

复制 > 1%
last 2 versions
not dead
shell

2. 但是在哪里可以查询到浏览器的市场占有率呢?
   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就可以完成这样的功能;