webpack系列一:基础配置

前言:

最近闲来无事,想着详细了解一下webpack这个打包工具,于是乎就在哔站上找了下尚硅谷的课程,跟着去搞了一下,所写的这些文章也是自己学习的一些心得,与大家分享,如有不恰当的地方,欢迎大家及时指出,我定会加以改正。前端的更新迭代很快,希望大家要不断学习新的技术来武装自己。
首先我们是来介绍webpack的,那肯定是要先放上webpack的官网地址:webpack中文网
然后,我说了,我使用的尚硅谷教程,下面是课程链接地址:webpack5从入门到精通------webpack4教程

介绍

  • 构建工具:我们前端在编写代码时,总是会或多或少的用到一些ES6,less,sass等浏览器无法识别的技术,这个时候,我们就需要借助一些编译工具对代码进行编译,构建工具就是整合了这些编译工具的一个产物。
  • webpack打包步骤:
    – ① 首先,会找到一个入口文件,以此为起点开始打包
    – ② 然后,解析出所需依赖,形成依赖关系图
    – ③ 根据依赖关系图把所需资源分别引进来形成chunk(代码块)
    – ④ 再对chunk(代码块)进行处理(编译打包),例如:less=>css,js(ES6)=>js
    – ⑤ 打包完成以后,输出bundle
  • 指令
    初始化包-package.json文件:npm init
    安装webpack:npm i webpack webpack-cli
    打包指令:webpack 入口文件路径 -o 出口文件路径 --mode=development/production
    node环境运行:node 文件路径
  • 五大核心概念
    Entry:指定入口
    Output:指示打包后的资源bundle输出到哪,以及如何命名
    Loader(翻译官):将非JS文件处理成webpack能识别的文件
    Plugins(插件):可以做一些Loader做不到的事情,eg:打包,压缩,重新定义变量等
    Mode:指定环境,默认有两个:dev,production
  • webpack.config.js文件基础配置
// resolve用来拼接绝对路径的方法
const { resolve } = require("path");

module.exports = {
    // 入口文件
    entry: './src/index.js',
    // 出口
    output: {
        // 输出文件名,这里要注意一定要带后缀
        // 入口文件的输出路径可以在这里进行配置:eg: "js/dist.js"
        filename: 'dist.js',
        // __dirname为nodejs的变量,代表当前文件的绝对路径
        // 这是所有文件的输出路径
        path: resolve(__dirname, 'build')
    },
    // loader配置
    module: {
        rules: [
            // 详细的loader配置
        ]
    },
    // plugins配置
    plugins: [
        // 详细的plugins配置
    ],
    // 模式
    mode: 'development'
    // mode: 'production'
}
  • 注意事项:
    – 1、webpack能处理js/json文件,不能处理其他文件
    – 2、生产环境和开发环境会将ES6模块化转换成浏览器能识别模块化
    – 3、生产环境会对打包生成的js文件进行压缩
    – 4、打包完成会生成一个唯一的哈希值,可用于对文件的命名

1 处理样式资源

  • 所需Loader
    – style-loader:创建style标签,将js中的样式资源插入进去,添加到head中生效
    – css-loader:主要是把css文件转换成commonjs模块加载到js文件中,内容是一个样式字符串
    – less-loader/sass-loader/stylus-loader:将对应的预处理样式文件转换成css文件
  • 配置代码
// loader配置
module: {
    rules: [
        // 详细的loader配置
        {
            test: /\.css$/,
            use: [
                // use数组中loader执行顺序,从右到左,从上到下依次执行
                // 创建style标签,将js中的样式资源插入进来,添加到head中
                'style-loader',
                // 将css文件转换成一个commonjs模块,内容是样式字符串
                'css-loader'
            ]
        },
        {
            test: /\.less$/,
            use: [
                'style-loader',
                'css-loader',
                // 将less文件转换成css文件
                'less-loader'
            ]
        }
    ]
},
  • 注意:
    1:在use中的执行顺序是从右到左,从下到上依次执行
    2:预处理的loader使用时还需要下载预处理样式包
    3:还要注意版本匹配问题

2 处理图片资源

  • 所需loader(webpack4.x)
    – url-loader:
    ------ 只能处理css样式文件中引入的图片资源,无法处理img标签的图片
    ------ 默认使用ES6模块化进行解析
    ------ 依赖于file-loader
    – file-loader: url-loader依赖于它,它可以用来处理其他资源
    – html-loader:
    ------ 处理html中img标签中引入的图片资源
    ------ 使用commonjs模块化进行解析
  • 配置代码(webpack4.x)
{
    test: /\.(jpeg|jpg|png|gif)$/,
    // 使用单个loader
    loader: 'url-loader',
    options: {
	   // 这个是用来关闭es6模块化解析
       esModule: false,
       /**
         * 图片大小小于8kb,就会被base64处理
         * 优点:减少请求数量(减轻服务器负担)
         * 缺点:图片体积会增大(文件请求速度更慢)
        */
         limit: 8 * 1024,
        /**
          * 给图片进行重命名
          * [hash:10]:取图片的哈希值前十位	
          * [ext]:取文件原来的扩展名
         */
         name: '[hash:10].[ext]'
     },
    type: 'javascript/auto'//这个属性如果没有设置,则会生成两张图片(如果你的页面只引入了一张图片)
},
{
     // 处理html的img标签引入的图片资源
     test: /.html$/,
     loader: 'html-loader'
}
  • 配置代码(webpack5.x已经将url-loader和file-loader内置了)
{
     // 处理图片资源
      test: /\.(jpeg|jpg|png|gif)$/,
      type: 'asset',
      parser: {
      	// 处理小图片,下面是指小于10kb的图片将被转换成base64的格式
         dataUrlcondition: {
             maxSize:  10 * 1024    // 10kb
         }
      },
      generator: {
         filename: "images/[hash:10][ext][query]"
      }
}

3 处理其他资源(字体图标、音视频等)

  • webpack4.x
    – 上面说过了,webpack4.x是使用file-loader来处理其他资源的
{
     // 处理其他资源
	 // exclude是用来排除其他的文件资源
     exclude: /.(css|less|js|html|jpeg|jpg|png|gif)$/,
     loader: 'file-loader',
     options: {
        name: '[hash:10].[ext]'
     }
}
  • webpack5.x
{
     // 处理其他资源
      test: /\.(ttf|woff2?|mp3|mp4)$/,
      type: 'asset/resource',
      generator: {
         filename: "midia/[hash:10][ext][query]"
      }
}

4 自动清空上次打包内容

  • 原理:在打包前将output.path整个目录内容清空,再进行打包
  • webpack4.x:需要借助clear-webpack-plugin
  • webpack5.x:只需要output.clean = true 即可
    output: {
        // 输出文件名,这里要注意一定要带后缀
        filename: 'dist.js',
        // __dirname为nodejs的变量,代表当前文件的绝对路径
        path: resolve(__dirname, 'build'),
        // 自动清空上次打包内容
        clean: true
    }

5 处理html资源

  • 所需Plugins
    – html-webpack-plugin
    ------ 功能:默认会创建一个空的HTML,自动引入打包输出的所有资源
    ------ 需求:一个有结构的HTML文件
    ------ 注意:loader只需要加载,然后直接使用,而Plugins需要加载,引入再去使用
  • 配置代码
    – 下载指令:npm i html-webpack-plugin
    – 引入插件:const HtmlWebpackPlugin = require(‘html-webpack-plugin’)
    – 使用插件:
    plugins: [
        // 详细的plugins配置
        // 功能:默认会创建一个空的HTML,自动引入打包输出的所有资源
        // 需求:一个有结构的HTML文件
        new HtmlWebpackPlugin({
            // 复制'./src/index.html'文件,自动引入打包输出的所有资源(css/js)
            template: './src/index.html'
        })
    ]

6 eslint语法检查

6.1 webpack4.x

  • 所需第三方库和loader
    – eslint:Eslint中文网
    – eslint-loader
    – eslint-config-airbnb-base/eslint-config-airbnb:这是npm上的一个比较成熟的js规范库
    – eslint-plugin-import:上面的库依赖于此
  • 代码配置
{
   test: /$\.js/,
   exclude: /node_modules/,
   loader: 'eslint-loader',
   options: {
      // 自动修复
      fix: true
   }
}
  • 注意事项:
    [email protected]版本用的是eslint-loader
    [email protected]版本是在package.json文件中添加"eslintConfig": {}配置
    – eslint-config-airbnb包含react.js的一一些插件,eslint-config-airbnb-base不包含
    – airbnb规范的路径,github官网->Open Source ->Repositories-Topics->javascript->airbnb
  • package.json文件代码增加
"eslintConfig": {
	"extends": "airbnb-base"
}

6.2 webpack5.x

  • 所需第三方库和loader
    – eslint:Eslint中文网
    – eslint-webpack-plugin
  • 代码配置
plugins: [
    // 我这是webpack5的写法,插件要引用
    new EslintWebpackPlugin({
    	// 这里是因为我把resolve解构出来了
        context: resolve(__dirname, 'src'),
        fix: true
    })
],
"eslintConfig": {
	"extends": "airbnb-base"
}
  • .eslintrc.js
module.exports = {
    // 解析选项
    parserOptions: {
    	// js版本
    	esmaVersion: 6,
    	sourceType: "module"
    },
    env: {
    	node: true, // 启用node全局变量
    	browser: true // 启用浏览器中全局变量
    },
    // 具体检查规则,优先于我们继承的规则
    rules: {
    	"no-var": 2
    },
    extends: "eslint:recommended"
}
  • 注意事项:
    [email protected]版本用的是eslint-webpack-plugin
    [email protected]版本我这里是在.eslintrc.js中进行相关配置,有很多种写法,可以参考官网

7 devServer

  • webpack4.x
// 与五大核心同级
devServer:{
     // 项目构建后的路径
     contentBase: resolve(__dirname, 'build'),
     // 启动gzip压缩
     compress: true,
     // 端口号
     port: 3000,
     // 自动打开浏览器
     open: true
}
  • webpack5.x
// 与五大核心同级
devServer:{
     // 启动服务器域名
     host: localhost
     // 端口号
     port: 3000,
     // 自动打开浏览器
     open: true
}

写在最后

创作不易
大家转载时劳烦注一下出处
雲墨·款哥,进阶的程序猿,永远在路上

你可能感兴趣的:(webpack,webpack,前端,javascript)