Webpack5学习笔记（二）：Webpack开发环境基本配置

Webpack5学习笔记（二）：Webpack开发环境基本配置

Author: 哇哇小仔
Date: 2021-03-18
Webpack版本：webpack 5.24.4 webpack-cli 4.5.0
说明：尚硅谷webpack视频教程总结的原创笔记

第3章：webpack开发环境基本配置

3.1 创建配置文件

1. 创建文件 webpack.config.js
2. 配置内容如下

       const {resolve} = require('path'); // node内置核心模块，用来处理路径问题
       module.exports = {
           entry: './src/index.js', // 文件入口
           output: {                  // 输出配置
               filename: 'built.js',  // 输出文件名
               path: resolve(__dirname, 'build')  // 输出文件路径配置
           },
           mode: 'development'  // 开发环境
       }

3. 运行指令： webpack
4. 结论：此功能和上一节一样

3.2 打包样式资源

1. 创建文件：比如src中创建index.less和index.css，然后在index.js中引入：
   import './index.css;' , import './index.less'
2. 下载安装四个loader包：npm i style-loader css-loader less-loader less -D
3. 修改配置文件

       const {resolve} = require('path');
       module.exports = {
           entry: './src/index.js',
           output: {
               filename: 'built.js',
               path: resolve(__dirname, 'build')
           },
           // loader 的配置
           module:{
               rules: [
                   {
                       test: /\.css$/,
                       use: [   
                           // use中的loader从右向左，从下向上，依次执行
                           // 创建 style 标签， 将 js 中的样式资源插入进行， 添加到 head 中生效
                           'style-loader',
                           // 将 css 文件变成 commonjs 模块加载 js 中， 里面内容是样式字符串
                           'css-loader'
                       ]
                   },
                   {
                       test: /\.less$/,
                       // 将 less 文件编译成 css 文件，需要下载 less-loader 和 less
                       use: ['style-loader', 'css-loader', 'less-loader']
                   }
               ]
           },
           plugins: [ ], // 详细plugins的配置
           mode: 'development',  // 开发模式
           // mode: 'production', // 生产模式
       }

4. 运行指令 webpack
5. 结论：可以打包css和less文件

3.3 打包html资源

1. 创建文件：./src/index.html, ./src/index.js, webpack.config.js
2. 下载安装plugin包
   npm i --save-dev html-webpack-plugin
3. 修改配置文件

       const {resolve} = require('path')
       const HtmlWebpackPlugin  = require('html-webpack-plugin')
       module.exports = {
           entry: './src/index.js',
           output: {
               filename: 'built.js',
               path: resolve(__dirname, 'build')
           },
           module: {
               rules: [],
           },
           plugins: [
               new HtmlWebpackPlugin({
                   template: './src/index.html'
               })
           ],
           mode: 'development'
        }

4. 运行：webpack
5. 结论：
   1. html-webpack-plugiin默认会创建一个空的HTML，自动引入打包输出的所有资源（css/js）
   2. 如果需要生成一个有结构的html，可以定义template模板，比如复制 ‘./src/index.html’ 文件，并自动引入打包输出所有的资源

3.4 打包图片资源

1. 创建文件：./src/index.js, ./src/index.html, ./src/index.less, 三张图片（angular.jpg, react.png, vue.jpg）
2. 下载安装loader包
   • url-loader和file-loader（处理样式中引入的图片，比如background-imgage）
   • html-loader（webpack4负责处理html中的img引入的图片）
   • html-withimg-loader（webpack 5.24.4负责处理html中的img引入的图片）
3. 修改配置文件

       const {resolve} = require('path');
       const HtmlWebpackPlugin = require('html-webpack-plugin');
       module.exports = {
           entry: './src/index/js',
           output: {
               filename: 'built.js',
               path: resolve(__dirname, 'build')
           },
           module: {
               rules: [
                   {
                       test: /\.less$/,
                       use: ['style-loader', 'css-loader', 'less-loader']
                   },
                   {
                       // 处理样式中引入的图片资源
                       test: /\.(png|jpg|gif)/,
                       loader: 'url-loader',
                       options: {
                           // 当图片小于8kb时，就会被base64处理
                           limit: 8*1024,
                           esModule: false,
                           // [hash:10]取hash值的前十位，冒号后边一定不能有空格
                             // [ext]取文件原来的扩展名
                           name: "[hash:10].[ext]"
                       }
                   },
                   {
                       test: /\.html$/,
                       // 处理HTML文件的img图片，负责引入img，从而能被url-loader进行处理
                       loader: "html-withimg-loader"
                   }
               ]
           },
           plugins: [
               new HtmlWebpackPlugin({template: './src/index.html'})
           ],
           mode: 'development'
       }

4. 运行：webpack
5. 结论:
   1. limit 是设置图片处理成base64的图片大小上限。 通常小于8-12kb的图片都可以用base64处理。
      1. 优点：减少请求数量（减轻服务器压力）
      2. 缺点：图片体积更大（文件请求速度更慢）
   2. 课程视频中使用的是html-loader用来打包img中引入的图片，但是webpack 5.24.4中出错，使用html-withimg-loader
   3. 处理引入样式中图片资源的loader（也就是url-loader），默认使用es6模块化解析，而html-withimg-loader 引入图片是commonjs，解析时会出现
      1. 问题：img中的src会出现 一个object，例如{“default”:“c2f2c28284f319fafbe4ca4bb67b13b1.png”} 。
      2. 解决：关闭url-loader的es6模块化，使用commonjs解析

3.5 打包其他资源

1. 打包其他资源，比如字体等等，这个资源不需要webpack处理
2. 修改配置文件

       const {resolve} = require('path');
       const HtmlWebpackPlugin = require('html-webpack-plugin')
       module.exports = {
           entry: './src/index.js',
           output: {
               filename: 'built.js',
               path: resolve(__dirname, 'build')
           },
           module: {
               rules:[
                   {
                       test: /\.css$/,
                       use: ["style-loader", "css-loader"]
                   },
                   // 打包其他资源（除了html/js/css资源以外的资源）
                   {
                       // 排除 html, css, less, js资源
                       exclude: /\.(html|css|less|js)$/,
                       loader: "file-loader",
                       name: "[hash:10].[ext]"
                   }
               ]
           },
           plugins: [{
               template: "./src/index.html"
           }],
           mode: "development"
       }

3. 运行指令：webpack

3.6 devServer

1. 介绍
   1. 开发服务器 devServer: 用来自动化（自动编译，自动打开浏览器，自动刷新浏览器等功能）
   2. 特点： 只会在内存中编译打包，不会有任何输出到本地
   3. 安装： npm i webpack-dev-server -D
2. 配置

       // 除了webpack的五大元素之外，多加一个devServer属性的设置
       devServer: {
           contentBase: resolve(__dirname, 'build'),
           compress: true,
           port: 3000,
           open: true
       }

3. 运行指令：
   1. npx webpack serve (webpack@5的启动命令)
   2. npx webpack-dev-server (webpack@4的启动命令)

3.7 开发环境配置

1. 创建文件
   1. ./src
      1. ./src/css：所有css和less文件
      2. ./src/imgs：所有图片资源
      3. ./src/js：所有js文件
      4. ./src/media：其他资源
   2. ./webpack.config.js
2. 修改配置文件

       const {resolve} = require('path');
       const HtmlWebpackPlugin = require('html-webpack-plugin');

       module.exports = {
           entry: './src/js/index.js',
           output: {
               filename: './js/built.js',
               path: resolve(__dirname, 'build')
           },
           module{
               rules: [
                   {    // less资源打包
                       // 打包后，样式资源合并在js中，不再有单独的css文件，因此不需要设置输出文件路径
                       test: /\.less$/,
                       use: ["style-loader", "css-loader", "less-loader"]
                   },
                   {    // css资源打包
                       test: /\.css$/,
                       use: ["style-loader", "css-loader"]
                   },
                   {    // 图片资源打包
                       test: /\.(jpg|png|gif)$/,
                       loader: "url-loader",
                       options: {
                           limit: 8 * 1024,
                           name: "[hash:10].[ext]",
                           esModule: false,
                           outputPath: "imgs"
                       }
                   },
                   {    // img链接中的图片资源
                       test: /\.html$/,
                       loader: "html-withimg-loader"
                   },
                   {    // 其他资源
                       exclude: /\.(html|css|less|js|jpg|png|gif)$/,
                       loader: "file-loader",
                       options: {
                           name: "[hash:10].[ext]",
                           outputPath: "media"
                       }                        
                   }
               ]
           },
           plugins: [
               // 打包html资源
               new HtmlWebpackPlugin({
                   template: "./src/index.html"
               })
           ],
           mode: "development",  // 开发模式，默认的是生产模式production
           devServer: {
               contentBase: resolve(__dirname, "build"),
               compress: true,
               port: 3000,
               open: true
           }
       }

3. 运行命令：npx webpack serve