Webpack 浅析webpack基础

webpack基础

1 打包CSS

1.1 打包逻辑

• 非JS的文件打包，需要对应的loader。

  • css-loader将CSS转化为JS（将CSS输出到打包后的JS文件中）
  • style-loader把包含CSS内容的JS代码，挂载到页面的<style>标签中。

• 步骤

  1. 引入CSS（import “./css/main.css”）

  2. 安装（npm install css-loader style-loader -D）

  3. 配置

     • 匹配后缀名：test:/.css$/i
     • 指定加载器：use:[‘style-loader’,‘css-loader’]
       • loader执行顺序：先右后左（先下后上）

     module:{
         rules:[
             // 指定多个配置规则
             { 
                 test:/\.css$/i,
                 // loader执行顺序：先右后左（先下后上）
                 use:[
                     // 将JS中的样式，挂载到<style>标签中
                     'style-loader',
                     // 将css-loader按照CommonJS规范，将样式文件输出到JS中
                     'css-loader'
                 ] 
             }
         ]
     },
     

1.2 打包LESS

• 步骤
  1. 引入CSS（import “./css/main.less”）
  2. 安装（npm install less less-loader -D）
  3. 配置
     • 匹配后缀名：test:/.less$/i
     • 指定加载器：use:[‘style-loader’,‘css-loader’,‘less-loader’]

1.3 打包成独立的CSS文件

• 步骤
  1. 安装（npm install mini-css-extract-plugin -D）
  2. 引入插件（webpack.config.js）
     • const MiniCssExtractPlugin = require(‘mini-css-extract-plugin’);
  3. 替换style-loader
     • 指定加载器：use:[‘MiniCssExtractPlugin .loader’,‘css-loader’,‘less-loader’]
       • MiniCssExtractPlugin .loader：将CSS打包到独立文件中。
  4. 配置插件
     • （new MiniCssExtractPlugin ({})）

1.4 添加样式前缀

• 步骤
  1. 安装（npm install postcss-loader autoprefixer -D）
  2. 配置webpack.config.js
     • 指定加载器：use:[‘MiniCssExtractPlugin .loader’,‘css-loader’,‘postcss-loader’]
  3. 新建postcss.config.js
     • plugins:[require(‘autoprefixer’)]
  4. 配置需要兼容的浏览器
     • package.json中指定browserslist
     • 详情参考：https://www.npmjs.com/package/browserlist

1.5 格式校验

• 步骤
  1. 安装（npm install stylelint stylelint-config-standard stylelint-webpack-plugin -D）
     • stylelint：指定校验规则。
     • stylelint-config-standard：提供了具体的规则集。
     • stylelint-webpack-plugin：把webpack与stylelint结合起来，允许在webpack中使用stylelint对代码进行格式校验。
  2. 引入
     • const StylelintPlugin = require(‘stylelint-webpack-plugin’);
  3. 配置
     • new StylelintPlugin({})
  4. 指定校验规则
     • 在package.json中指定stylelint
     • “stylelint”:{“extends”:“stylelint-config-standard”}
  5. 指定规则配置
     1. 在package.json中的stylelint属性指定规则
     2. 在.stylelintrc中指定规则
     3. 在stylelint.config.js中指定规则

1.6 压缩CSS

• 步骤
  1. 安装（npm install optimize-css-assets-webpack-plugin -D）
  2. 引入
     • const OptimizeCssAssetsPlugin = require(‘optimize-css-assets-webpack-plugin’);
  3. 配置
     • new OptimizeCssAssetsPlugin ({})

2 打包HTML

• html-webpack-plugin
  • 生成HTML文件（用于服务器访问），并在HTML中家在所有的打包资源。
  • 指定HTML模板、设置HTML变量，压缩HTML。
• 步骤
  1. 安装（npm install html-webpack-plugin -D）
  2. 引入
     • const HtmlWebpackPlugin = require(‘html-webpack-plugin’);
  3. 配置
     • new HtmlWebpackPlugin ({})

3 打包JS

3.1 打包

• 目的

  • 将ES6+转成ES5，保证js在低版本浏览器的兼容性体验。

• 步骤

  1. 安装（npm install babel-loader @babel/core @babel/preset-env -D）

     • @babel/preset-env模块包括了所有最新的js转换规则。但是并不能把所有的高级语法都转译，有其他可以替代的相关模块，如@babel/polyfill、core-js

     • 区别

       1. @babel/preset-env：只能转译基本语法（Promise就不能转译）

       2. @babel/polyfill：转译所有的JS语法。

          • 安装（npm install @babel/polyfill -D）

          • import ‘@babel/polyfill’（在入口文件中引用）

       3. core-js：（按需转译js新语法）

          • 安装（npm install core-js -D）
          • 配置
            • 按需加载useBuiltIns:‘usage’
            • 指定版本corejs:3

       4. 三者打包完成后的的js文件大小排序为：@babel/polyfill > core-js > @babel/preset-env

  2. 引入

     • const HtmlWebpackPlugin = require(‘html-webpack-plugin’);

  3. 配置

     • new HtmlWebpackPlugin ({})

3.2 JS格式校验

• 步骤
  1. 安装（npm install eslint eslint-config-airbnb-base eslint-webpack-plugin eslint-plugin-import -D）
     • eslint ：校验JS代码格式的工具。
     • eslint-config-airbnb-base：最流行的JS代码格式规范。
     • eslint-webpack-plugin：webpack的eslint插件。
     • eslint-plugin-import：用于在package.json中读取eslintConfig配置项。
  2. 引入
     • const OptimizeCssAssetsPlugin = require(‘optimize-css-assets-webpack-plugin’);
  3. 配置
     • eslint-webpack-plugin
       • const ESLintPlugin = require(‘eslint-webpack-plugin’);
       • plugins:[new ESLintPlugin()],
     • eslintConfig(package.json)
       • “eslintConfig”:{“extends”:“airbnb-base”}

4 打包图片

1. file-loader

   • 将用到的图片复制到输出目录，过滤掉不用的图片。

   • 步骤

     1. 安装（npm install file-loader -D）

     2. 引入

        • const OptimizeCssAssetsPlugin = require(‘optimize-css-assets-webpack-plugin’);

     3. 配置

        • 修改css与less的配置MiniCssExtractPlugin.loader为：

          {
              loader:MiniCssExtractPlugin.loader,
                  options:{
                      publicPath:'../'
                  }
          },
          

2. url-loader

   • 是file-loader的升级版，若图片小于配置大小，会转成base64字符串。
   • 转成base64字符串之后，图片会跟js一起加载，减少图片的请求次数，优化效率。

3. html-loader

   • 将HTML导出为字符串。负责引入img，从而能够被url-loader进行处理。
   • html-loader与html-webpack-plugin的冲突
     • 原因：htmlWebpackPlugin会检查目标文件是否已经有loader处理，若有其他loader处理，则htmlWebpackPlugin不再使用lodash.template去处理ejs语法。
     • 解决：将htmlWebpackPlugin中模板文件的后缀名改为.ejs（非.html）。

5 打包字体

6 资源模块（Assent Modules）

7 开发服务器（Dev Server）

mlWebpackPlugin会检查目标文件是否已经有loader处理，若有其他loader处理，则htmlWebpackPlugin不再使用lodash.template去处理ejs语法。
- 解决：将htmlWebpackPlugin中模板文件的后缀名改为.ejs（非.html）。

5 打包字体

6 资源模块（Assent Modules）

7 开发服务器（Dev Server）