likes
comments
collection
share

Webpack 基础配置 & 常用插件配置

作者站长头像
站长
· 阅读数 59

我们成功安装了 webpack 并配置了自定义打包命令后，在项目中使用 webpack 前，当然需要对基础配置进行修改，并安装一些便于文件处理的插件，本篇主要对常用的简单配置进行描述，其他配置及插件安装见 webpack 官方文档。 webpack.docschina.org/concepts/

1、基础配置修改

使用 webpack 进行打包时，会根据项目根路径中的 webpack.config.js 文件中设置的配置参数，找到默认入口 （根路径中的 src/index.js），根据其中的依赖关系进行打包，并输出在默认出口（根路径中生成 dist/main.js）。

而在正式项目中，如果需要对入口、出口路径进行修改：

//在根路径中的 webpack.config.js 中书写
const path = require("path")

module.exports = {
    entry: " 入口文件路径 ", 
    output: { 
        path: " 出口文件夹路径 "
        filename:" 出口文件名 "
    }
}

我们在项目开发过程中分为不同环境：开发环境、线上环境。

不同需求下打包生成的文件不同，需要在 package.json 中添加属性。

{
    "mode": "development"（开发环境）/ "production" （线上环境）
}

2、常用插件配置

2.1 自动生成html文件 —— html-webpack-plugin

webpack 打包只会在出口处打包 js 文件，而使用时还需要将 html 文件手动复制到出口文件夹出，并手动对该 js 进行引用，html-webpack-plugin 插件正是用于解决这一问题。在完成配置后，打包时可将 html 文件复制到出口文件夹，并自动引入打包完成的 js 文件。

  1. 下载插件
 yarn add html-webpack-plugin  -D

  1. 在 webpack.config.js 中配置


// 引入自动生成 html 的插件
const HtmlWebpackPlugin = require('html-webpack-plugin') 

module.exports = {
    plugins: [
        new HtmlWebpackPlugin({
            // 以此为基准生成打包后html文件
            template: './public/index.html' 
        })
    ]
}

2.2 处理css文件 —— css-loader & style-loader

webpack 只能识别 js 文件，无法识别 css 文件，但在项目书写时，css 又是我们必要的文件，因此 css-loader & style-loader 应运而生，它可以将 css 文件打包进 js 文件中，通过在 head 标签中生成 style 标签对页面样式进行渲染。

  1. 下载插件
yarn add css-loader style-loader -D

  1. 在 webpack.config.js 中配置


// 引入自动生成 html 的插件
const HtmlWebpackPlugin = require('html-webpack-plugin') 

module.exports = {
     module: { // 如何处理项目中不同模块文件
        rules: [ // 规则
          {
            test: /\.css$/, // 匹配所有的css文件
            // use数组里从右向左运行
            // 先用 css-loader 让webpack能够识别 css 文件的内容并打包
            // 再用 style-loader 将样式, 把css插入到dom中
            use: [ "style-loader", "css-loader"]
          }
        ]
    }
}

虽然这种方法可以帮助 webpack 识别打包 css 文件，但是最终是将 css 文件打包进 js 中，可阅读性较差，那有没有办法可以将我们需要打包的 css 文件打包成一个独立的 css 文件呢？

处理css文件（将 CSS 提取到单独的文件中）—— mini-css-extract-plugin

1.下载插件

yarn add mini-css-extract-plugin -D
  1. 在 webpack.config.js 中配置
// 引入生成 css 文件的插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  plugins: [new MiniCssExtractPlugin()],
  module: {
    rules: [
      {
        test: /.css$/i, // 匹配所有的css文件
        / 先用 css-loader 让webpack能够识别 css 文件的内容并打包 
        // 再用 mini-css-extract-plugin 在出口文件夹生成一个独立的 css 文件
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
};

2.3 处理less文件 —— less-loader

  1. 将需要打包的 less 文件引入到 main.js 中
import "文件路径/文件名.less"
  1. 下载依赖包
yarn add less less-loader@5.0.0 -D
  1. 在 webpack.config.js 中配置

module: {
  rules: [
    {
        test: /.less$/, // 匹配.less结尾文件
        // 使用less-loader, 让webpack处理less文件, 内置还会用less模块, 翻译less代码成css代码
        use: [ "style-loader", "css-loader", 'less-loader']
    }
  ]
}

2.4 处理图片文件

webpack5 内置处理方案, 只需要填入配置即可

在 webpack.config.js 中配置

module: {
    rules: [ 
        {
            test: /.(png|jpg|gif|jpeg)$/i, // 匹配图片文件
            type: 'asset' // 在导出一个 data URI 和一个单独的文件之间自动选择
            // 小于8kb的, 转成data URI(图片转成base64字符串打包进js中)
            // 大于8kb的, 直接复制文件到dist目录下(因为转base64会体积增30%)
        }
    ]
}

2.5 处理字体文件

同处理图片方法，webpack5 内置处理方案, 只需要填入配置即可

在 webpack.config.js 中配置

{ 
    test: /\.(eot|svg|ttf|woff|woff2)$/,
    type: 'asset/resource',  // 当做静态资源直接复制文件
    generator: {
    	filename: 'font/[name].[hash:6][ext]' // 放到dist/font文件夹, 文件名格式如左
    }
}

2.6 处理高版本 js 语法 —— babel 编译器

我们在编写 js 代码时，会使用到 es6 及更高版本中最新的语法来简化代码，但部分浏览器无法正确解析高版本语法，导致我们编写的代码在浏览器中无法显示目标效果，这个就是我们所说的兼容性问题，为了解决这一问题，我们使用 babel 编译器，在使用 webpack 打包代码的同时，对高版本 js 语法进行降级处理，大大提高了兼容性。

  1. 安装依赖包
yarn add babel-loader @babel/core @babel/preset-env -D
  1. 在 webpack.config.js 中配置
module: {
    rules: [
        {
            test: /.js$/, // 匹配js结尾文件
            exclude: /(node_modules|bower_components)/, // 不转换这2个文件夹里的js
            use: { 
                loader: 'babel-loader', // 使用加载器-处理
                options: {
                    presets: ['@babel/preset-env'] // 预设:转码规则(用bable开发环境本来预设的)
                }
            }
        }
    ]
}

注意：合理地利用官方文档中提供的不同插件可以解决许多我们使用时所遇到的问题！

3、启动本地服务器 —— webpack-dev-server

webpack-dev-server 是一个静态的小型的 node.js Express 服务器,使用 webpack-dev-middleware 中间件来为通过 webpack 打包生成的资源文件提供 Web 服务。为什么要使用它呢？

3.1 优点

运行 yarn serve 命令进行打包时，webpack 会将整个项目从0开始重新打包，如果代码变动较少，为了调试，仍需要频繁的进行打包，极大地影响了开发效率。

如果使用本地服务器，当代码变动的时，无需重新整个刷新页面，服务器会自动将变化的部分替换掉，且重新刷新浏览器，展现代码变化后的效果。在实际工作中可以大大提高开发效率，避免将时间花在无用功的重复打包上，节省时间。

3.2 使用方法

  1. 安装
yarn add webpack-dev-server --dev
  1. 设置常用配置项
module.exports = {
    devServer: {
      port: 3000, // 端口号(如果不设置，默认端口为 8080 )
      open: true // 启动后自动打开浏览器
    }
}

更多服务器配置项请查看官方文档。 webpack.docschina.org/configurati…

转载自:https://juejin.cn/post/7031207691787698189
评论
请登录