webpack -- 第二节课：处理各种资源（css、js、html）

WaterCup
53 阅读4分钟

webpack处理样式资源

处理css资源

  • 第一步：下载css-loader，style-loader
    • npm install css-loader style-loader -D
  • 第二步：在module.rules里写入：
module: {
    rules: [
        {
            test:/\.css$/, // 只检测.css文件
            use:["style-loader","css-loader"],
        },
    ]
}

use执行顺序为从右到左，或者从下到上，即先执行css-loader，再执行style-loader

css-loader：将css资源编译成commonJS的模块到JS中

style-loader：将js中css通过创建style标签添加到html文件中生效

处理less资源

  • 第一步：下载less-loader，css-loader，style-loader
    • npm install less-loader css-loader style-loader -D
  • 第二步：在module.rules里写入：
module: {
    rules: [
        {
            test:/\.less$/,
            use:["style-loader","css-loader","less-loader"],
        },
    ]
}

less-loader：将less文件编译成css文件

处理sass资源

  • 第一步：下载sass-loader，css-loader，style-loader
    • npm install sass-loader css-loader style-loader -D
  • 第二步：在module.rules里写入：
module: {
    rules: [
        {
            test:/\.s[ac]ss$/,
            use:["style-loader","
            # 处理图片资源css-loader","sass-loader"],
        },
    ]
}

处理图片资源

webpack4处理方式：

  • 第一步：下载file-loader
    • npm install file-loader url-loader -D
      注意：url-loader包含了file-loader,可以通过限定一个图片的大小，来判断是否需要采用以编码的方式呈现
  • 第二步：在module.rules里写入：
module: {
    rules: [
        {
            test:/\.(png|jpe?g|gif|webp)$/i,
            use: [{
                  loader: 'file-loader',
                  options: {
                      name: '[path][name].[ext]',
                      // name(file) {
                      //    if (process.env.NODE_ENV === 'development') {
                      //        return '[path][name].[ext]';
                      //    }
                      //    return '[hash].[ext]';
                      // },
                      outputPath:'./asset/img', // 本地项目图片的位置
                      publicPath:'www.baidu.com/newpath/asset', //项目上线时图片的位置
                  }
            }]
        },
        {
            test: /.(png|jpg|jpeg|gif)$/,
            use: [{
                loader: 'url-loader',
                options: {
                    limit: 8192,//小于这个尺寸的文件会转成base64，大于的会自动调用file-loader
                }
            }]
        }
    ]
}

webpack5处理方式

webpack5新增资源模块(asset module)，是一种模块类型，它允许使用资源文件（字体，图标等）而无需配置额外 loader。被代替的loader有raw-loader、url-loader、file-loader。

  • asset/resource 代替 file-loader
  • asset/inline 代替 url-loader
  • asset/source 代替 raw-loader
  • asset -- 介于asset/resource和asset/inline之间，在导出一个资源data URI和发送一个单独的文件并导出URL之间做选择，之前通过url-loader+limit属性实现。
output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
    // assetModuleFilename: 'images/[hash][ext][query]' // 输出图片名字 way-2
},
module: {
    rules: [
        {
            test:/\.(png|jpe?g|gif|webp|svg)$/i,
            type:"asset",
            generator: {
                 filename: 'static/images/[hash][ext][query]' // 输出图片名字 way-1
           }
        }
    ]
}

处理iconfont资源

module: {
    rules: [
        {
            test: /\.(ttf|woff2?)$/,
            type: 'asset/resource',
            generator: {
                filename: 'static/media/[hash:10][ext][query]'  // 输出名字
            }
        }
    ]
}

处理mp3等其他资源

其他资源的文件扩展名加在test里面即可，比如mp3，mp4等

module: {
    rules: [
        { 
            test:/\.(ttf|woff2?|mp3|mp4|avi)$/,   
            type:"asset/resource",   
            generator:{
                filename:"/static/media/[hash:10][ext][query]",
            }
        }
    ]
}

处理js文件

webpack只对es的语法支持，其他的es6/es7是不支持的，比如箭头函数等

Eslint检查代码格式，无误后，由Babel做代码兼容性处理

Eslint

eslint是可以检查js和jsx(React)语法的工具

Eslint配置地址：

  • .eslintrc文件
  • .eslintrc.js文件
  • .eslintrc.json文件
  • eslintrc.config.* 文件
  • package.json文件中eslintConfig对象
// 具体配置：以.eslintrc.js文件为例
module.exports = {   
   parserOptions:{// 解析选项
      ecmaVersion: 6, // es语法版本，这里设置的是es6
      sourceType:'module', // es6 模块化
      ecmaFeatures:{ // es其他特性
        jsx: true, // 如果是react项目，需要启用jsx语法
      }
   },
   // 是否可以使用node和浏览器的全局变量，比如window/console
   env:{
      node:true,
      browser:true,
   },
   rules:{// 具体检测规则
      // 书写方式：规则名称：off/warn/error/0/1/2
      // off/0——关闭规则
      // warn/1——开启规则，使用警告级别的错误，不会导致程序退出
      // error/2 ——开启规则，使用错误级别的错误，会使程序退出
      semi:"error",//禁止使用分号
   }
   Plugins:[“import”],// 解决动态导入语法报错
   // 继承其他规则——由于规则太多，所以会继承官方规则,可以通过rules强制修改
   // eslint官方规则：eslint:recommended
   // Vue Cli官方规则：plugin:vue/essential
}

使用和配置eslint

  • 第一步：下载eslint 和 eslint-webpack-plugin
    • npm install eslint eslint-webpack-plugin -D
  • 第二步：在vue.config.js文件里引入
const ESLintPlugin = require("eslint-webpack-plugin");

module.exports = {
    plugin:[ 
        // 前提有.eslintrc.js文件
        new ESLintPlugin({
            // context:用于配置检测哪些文件
            context:path.resolve(__dirname,"../src"),
            Exclude:”node_modules”, // 默认值，不解析node_modules文件夹下的内容，会加速打包速度
        })
    ],
}
  • 第三步：创建.eslintignore文件——用于配置哪些文件不需要使用eslint检查 比如：dist
// .eslintignore文件

//表示忽略build目录下类型为js的文件的语法检查  
build/ *.js   
//表示忽略config目录下类型为js的文件语法检查
config/* .js 
// 表示忽略dist文件的语法检查
dist

Babel

babel可以将复杂的es6/es7语法转换成javascript语法，以便能够在当前浏览器和旧的浏览器（向下兼容）中使用。

babel配置地址：

  • .babelrc文件
  • .babelrc.js文件
  • .babelrc.json文件
  • babel.config.* 文件
  • package.json文件中babel对象
// 具体配置：以babel.config.js文件为例
module.exports = {
    // 预设，用于配置插件，插件可以处理不同类型的语法
    // @babel/preset-env 将es6/es7转化成javascript语法
    // @babel/preset-react 转化jsx语法
    // @babel/preset-typescript 转化typescript语法
    presets: ["@babel/preset-env"],
}

使用和配置Babel

  • 第一步：下载babel-loader @babel/core @babel/preset-env
    • npm babel-loader @babel/core @babel/preset-env -D
  • 第二步：module.rules里写入
// 前提：配置babel.config.js文件
module: {
   rules: [
       {	
           test:/\.js$/,   
           // exclude 和 include 只能配置一个
           exclude:"/node-modules/", // 排除node-modules里的js文件不用处理
           // include:path.resolve(__dirname,”../src”), // 只处理src下的文件，其他文件不处理
           loader:“babel-loader”
       }
   ]
}

处理html文件

在Webpack构建的前端项目时，用于简化index.html文件的创建，以免除项目打包之后手动创建或拷贝index.html到打包目录下的繁琐步骤。

  • 第一步：下载html-webpack-plugin
    • npm install html-webpack-plugin
  • 第二步：module.plugins里写入
const HtmlWebpackPlugin = require('html-webpack-plugin');
plugins:[
    new HtmlWebpackPlugin({
        // 模板：以public/index.html文件新建的html文件
        // 新建的html文件特点：1.结构和index.html的一样，2.自动引入打包输出/的资源
        template:path.reoolve(__dirname,"../public/index.html"),
    })
]

自动编译——监测src

  • 第一步：下载dev-server
  • 第二步：在vue.config.js里写入：
devSever:{ // 开发服务器
    host:'localhost', // 启动服务器域名
    port:'3000',// 启动服务器端口号
    open:true // 是否自动打开浏览器
}

注意：在开发模式(mode:'development'）下是不会输出dist打包文件的，只是在浏览器上展示而已

//webpack.dev.js 配置
const path = require("path"); // nodejs核心模块，专门用来处理路径问题
const ESLintPlugin = require("eslint-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  // 入口
  entry: "./src/main.js", // 相对路径
  // 输出
  output: {
    // 所有文件的输出路径
    // __dirname nodejs的变量，代表当前文件的文件夹目录
    path: path.resolve(__dirname, "../dist"), // 绝对路径
    // 入口文件打包输出文件名
    filename: "static/js/main.js",
  },
  // 加载器
  module: {
    rules: [
      // loader的配置
      {
        // 每个文件只能被其中一个loader配置处理
        oneOf: [
          {
            test: /\.css$/, // 只检测.css文件
            use: [
              // 执行顺序：从右到左（从下到上）
              "style-loader", // 将js中css通过创建style标签添加html文件中生效
              "css-loader", // 将css资源编译成commonjs的模块到js中
            ],
          },
          {
            test: /\.less$/,
            // loader: 'xxx', // 只能使用1个loader
            use: [
              // 使用多个loader
              "style-loader",
              "css-loader",
              "less-loader", // 将less编译成css文件
            ],
          },
          {
            test: /\.s[ac]ss$/,
            use: [
              "style-loader",
              "css-loader",
              "sass-loader", // 将sass编译成css文件
            ],
          },
          {
            test: /\.styl$/,
            use: [
              "style-loader",
              "css-loader",
              "stylus-loader", // 将stylus编译成css文件
            ],
          },
          {
            test: /\.(png|jpe?g|gif|webp|svg)$/,
            type: "asset",
            parser: {
              dataUrlCondition: {
                // 小于10kb的图片转base64
                // 优点：减少请求数量  缺点：体积会更大
                maxSize: 10 * 1024, // 10kb
              },
            },
            generator: {
              // 输出图片名称
              // [hash:10] hash值取前10位
              filename: "static/images/[hash:10][ext][query]",
            },
          },
          {
            test: /\.(ttf|woff2?|map3|map4|avi)$/,
            type: "asset/resource",
            generator: {
              // 输出名称
              filename: "static/media/[hash:10][ext][query]",
            },
          },
          {
            test: /\.js$/,
            exclude: /node_modules/, // 排除node_modules下的文件，其他文件都处理
            loader: "babel-loader",
          },
        ],
      },
    ],
  },
  // 插件
  plugins: [
    // plugin的配置
    new ESLintPlugin({
      // 检测哪些文件
      context: path.resolve(__dirname, "../src"),
    }),
    new HtmlWebpackPlugin({
      // 模板：以public/index.html文件创建新的html文件
      // 新的html文件特点：1. 结构和原来一致 2. 自动引入打包输出的资源
      template: path.resolve(__dirname, "../public/index.html"),
    }),
  ],
  // 开发服务器: 不会输出资源，在内存中编译打包的
  devServer: {
    host: "localhost", // 启动服务器域名
    port: "3000", // 启动服务器端口号
    open: true, // 是否自动打开浏览器
  },
  // 模式
  mode: "development",
};
avatar
文章
阅读
粉丝