Webpack 笔记Ⅰ

Webpack的初始化

项目目录

npm init -y

下载webpack 

npm i webpack webpack-cli -D

  以开发模式打包 main.js（production--生产模式）

npx webpack ./src/main.js --mode=development

5大核心概念

1.entry(入口)

指示Webpack在哪里开始打包。

2.output(输出)

指示Webpack打包完的文件输出到哪里去，如何命名等。

3.loader(加载器)

Webpack 本身只能处理 is、ison 等资源，其他资源需要借助 loader，Webpack 才能解析。

4.plugins(插件)

扩展 Webpack 的功能。

5.mode (模式)

开发模式: development
生产模式:production

Webpack基本配置

创建webpack配置文件

const path = require("path"); //nodejs核心模块，处理路径问题
module.exports = {
   //入口
   entry:'./src/main.js',
   //输出
   output:{
      //文件的输出路径
      path:path.resolve(__dirname,"dist"),//绝对路径
      filename:"main.js",
      clean:true, //自动清空
   },
   //加载器
   module:{
      rules:[
         //loader的配置
      ]
   },
   //插件
   plugins:[

   ],
   //模式
   mode:"development",

};

打包命令

npx webpack

处理样式资源

loader官方文档https://webpack.docschina.org/loaders/

以CSS为例：在入口文件中导入css样式文件

安装css-loader和style-loader：

npm install --save-dev css-loader

npm i style-loader -D

 在加载器的规则中配置上loader：

   //加载器
   module:{
      rules:[
         //loader的配置
         {
            test: /\.css$/i, //只检测css文件
            use: ["style-loader", "css-loader"],//use的执行顺序是从右到左
         }
      ]
   },

处理图片资源

把小于10kb的图片转成base64，配置代码如下：

module:{
      rules:[
         {
            test: /\.(png|gif|jpe?g|webp|svg)$/,
            type: 'asset',
            parser: {
             dataUrlCondition: {
               //小于10kb的图片转base64
               //优点：减少请求数量，缺点：体积更大
               maxSize: 10 * 1024 // 10kb
             }
           }
         }
      ]
   },

修改文件输出目录

需要修改的配置信息如下：

   //输出
   output:{
      //文件的输出路径
      path:path.resolve(__dirname,"dist"),//绝对路径
      //保存到static/js文件夹下，文件名为main.js
      filename:"static/js/main.js",
   },
   module:{
      rules:[
         //图片处理
         {
            test: /\.(png|gif|jpe?g|webp|svg)$/,
            type: 'asset',
            generator: {
               //输出图片名称
               filename: 'static/images/[hash][ext][query]'
            },
         }
      ]
   },

输出目录​​

 字体处理

webpack中主要配置的是字体文件的输出位置：

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

输出目录

Html处理

安装包

npm install --save-dev html-webpack-plugin

 Webpack插件配置中写入：

   //插件
   plugins:[
      new ESLintPlugin({
         context:path.resolve(__dirname,"src"),
      }),
      new HtmlWebpackPlugin({
         //模板：以public/index.html为模板创建新的html文件
         template:path.resolve(__dirname,"public/index.html"),
      })
   ],

Eslint插件

eslint是用于检查javascript语法的，帮助我们检查语法错误和纠正语法错误。

安装包

npm install eslint-webpack-plugin eslint --save-dev

初始化 

webpack配置文件的插件加上:

const ESLintPlugin = require('eslint-webpack-plugin');   
plugins:[
      new ESLintPlugin({
         context:path.resolve(__dirname,"src")
      }),
   ],

创建 .eslintrc.js文件：

module.exports = {
   // 继承 Eslint 规则
   extends:["eslint:recommended"],
   env:{
      node:true,// 启用node中全局变量
      browser:true,// 启用浏览器中全局变量
   },
   parserOptions: {
      ecmaVersion:6,
      sourceType:"module",
   },
   rules:{},
}

rules具体规则

• "off"或0关闭规则
• "warn"或1 开启规则，不会导致程序退出
• "error"或2 开启规则，触发时程序会退出

rules:{
    semi:"error",// 禁止使用分号
    'array-callback-return':'warn',

    'default-case':[
     'warn' //要求 switch 语句中有 default 分支,否则警告
     {commentPattern:'^no defaults'} // 允许在最后注释 no default，就不会有警告了
    ],

    eqeqeq:[
    'warn',// 强制使用 === 和 !==，否则警告
    'smart'// https://eslint.bootcss.com/docs/rules/
    ]
}

更多规则https://eslint.bootcss.com/docs/rules/

更多插件https://webpack.docschina.org/plugins/

开发服务器模式

在webpack配置文件中写入：

   //开发服务器
   devServer:{
      host:"localhost",//启动服务器域名
      port:"3000",//启动服务器端号
      open:true,//是否自动打开浏览器
   },

启动指令：

npx webpack serve