[JavaScript知识库]Webpack初识--常用loader

Webpack初识–常用loader

1、背景

开发中存在的问题

• 开发过程中需要通过模块化开发
• 部分高级特性，比如ES6，less、scss等
• 开发过程中，希望监听文件实时变化并反应到浏览器中
• 开发完成后需要对代码进行压缩合并等优化操作

webpack是一个静态的模块化打包工具，为现代的JavaScript应用程序

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

2、webpack与cli

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

• 执行webpack命令，会执行node_modules下的.bin目录下的webpack；
• webpack在执行时是依赖webpack-cli的，如果没有安装就会报错；
• 而webpack-cli中代码执行时，才是真正利用webpack进行编译和打包的过程；
• 所以在安装webpack时，我们需要同时安装webpack-cli（第三方的脚手架事实上是没有使用webpack-cli的，而是类似于自己的vue-service-cli的东西）

执行局部webpack命令：

• npx执行局部（.bin）webpack命令
• 在script中添加执行脚本，优先执行.bin里面的，.bin不存在再使用全局

3、webpack

1、webpack依赖

• webpack在处理应用程序时，它会根据命令或者配置文件找到入口文件；
• 从入口开始，会生成一个依赖关系图，这个依赖关系图会包含应用程序中所需的所有模块（比如.js文件、css文件、图片、字体等）；
• 然后遍历图结构，打包一个个模块（根据文件的不同使用不同的loader来解析）；

2、配置入口和出口

// 配置入口和出口
const path = require('path');

module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    // 获取当前文件的绝对路径，必须是一个绝对路径，所以采用路径拼接
    path: path.resolve(__dirname, './build'),
  },
}

4、loader

1、概念

loader作用：

• loader 可以用于对模块的源代码进行转换；
• 将css文件也看成是一个模块，我们是通过import来加载这个模块的；
• 在加载这个模块时，webpack其实并不知道如何对其进行加载，我们必须制定对应的loader

2、css-loader

1、安装

• 加载css文件来说，我们需要一个可以读取css文件的loader；
• 最常用的是css-loader；
• npm install css-loader -D

2、使用方案

最常用：配置方式

• 配置方式表示的意思是在我们的webpack.config.js文件中写明配置信息：
  • module.rules中允许我们配置多个loader（因为我们也会继续使用其他的loader，来完成其他文件的加载）；
  • 这种方式可以更好的表示loader的配置，也方便后期的维护，同时也让你对各个Loader有一个全局的概览；

使用步骤：

• css-loader负责将.css文件进行解析
• style-loader负责将style插入到页面中
• npm install style-loader -D
• ‘style-loader’,‘css-loader’ loader处理顺序从后往前

3、处理less

less-loader进行代码处理，将less转化为css

less对less代码进行编译，转成css

安装less loader之前需要安装less，less loader会自动使用less

npm install less -D

const path = require('path');

module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    // 获取当前文件的绝对路径，必须是一个绝对路径，所以采用路径拼接
    path: path.resolve(__dirname, './build'),
  },
  module: {
    // rules是一个数组，里面存放一个个规则对象
    rules: [
      {
        // 规则使用正则表达式
        test: /\.css$/, // 匹配资源
        // 当匹配到.css使用css-loader
         // use是一个数组，里面存放一个个规则对象
        use: [
          // 简写1 loader: "css-loader"    简写2"css-loader"
          // 如果不需要做options配置的话就可以采用字符串简写
          // 注意: 编写顺序(从下往上, 从右往左, 从后往前)
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
            },
          },
          'postcss-loader',
        ],
      },
      {
        test: /\.less$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 2,
            },
          },
          'postcss-loader',
          'less-loader',
        ],
      },
    ],
  },
};

4、处理scss

5、postcss

浏览器兼容性：包括屏幕大小变化的适配和不同浏览器之间所支持的特性：css特性、js特性以及之间的兼容性。

1、postcss的作用：

• postcss是一个通过JavaScript来转化样式的工具
• 帮助我们进行一些css的转化的适配，比如自动添加前缀，css样式重置
• 实现功能需要借助postcss对应的插件

2、使用postcss

第一步找到扩展，第二步找到插件

1、查找postcss再构建工具中的扩展，比如webpack中的postcss-loader

2、选择需要的postcss相关插件

直接在终端使用postcss，需要借助工具postcss-cli

借助工具对css进行处理

• npm install postcss-loader -D

// 配置添加前缀功能
{
  loader:"postcss-loader",
  options:{ 
    postcssOptions:{
      plugins:[
        require("autoprefixer")
      ]
    }
  }
}

6、browserslist

browserslist：不同的前端工具之间，共享目标浏览器和nodejs版本的配置

当设置 >1%即css兼容市场占有率大于1%的浏览器，js同理

• Autoprefixer
• Babel
• postcss-preset-env
• eslint-plugin-compat
• stylelint-no-unsupported-browser-features
• postcss-normalize
• obsolete-webpack-plugin

// .browserslistrc
>1%
last 2 version
not dead