webpack配置文件

安装webpack

使用命令npm install webpack webpack-cli -D来进行本地安装，不建议全局安装webpack，其中webpack为主包，webpack-cli为命令行包其安装的意义就是可以在命令行通过命令控制webpacj，就比如说在终端工具中使用webpack --help

运行webpack 

 由于不是全局安装的webpack，所以不能直接使用webpack --help，需要使用npx，npx是依托于npm的，即使用npx搭配命令可以查询将要执行的命令是否存在，如果存在则会实行，npx webpack就会开始编译，

自定义webpack配置 

可以在项目中创建一个webpack.config.js，webpack就会自动读取 

module.exports = {}

什么是插件 

常用的插件比如说，html-webpack-plugin(可以在html文件中引入js文件)，插件都是先require进来，const HtmlWebpackPlugin = require('html-webpack-plugin');就代表引入了插件html-webpack-plugin，在module.exports中添加plugins对象，

module.exports = {
  plugins:{
  new HtmlWebpackPlugin({
  fileName:'app.html', //打包好的html文件名称
  template:'./index,html', //使用的html模板
  inject: 'body', // script标签插入位置 ,这个script标签里面带一个defer属性
})
}
}

 清理dist

顾名思义就是清除上一次打包好的dist目录，在output对象中添加键值对clear:true即可

mode选择 

1. development
2. production
3. none 

 source map

就是在module.exports = {}中添加键值对，键名为devtool，值为inline-source-map.

其意义在于，当打包好的代码报错的时候，可以准确定位到当初未编译问题代码 

 devtool: "inline-source-map",

使用watch mode

npx webpack  --watch， 它可以检测代码的改变，当发生改变时，随之编译。

使用webpack-dev-server

虽然说webpack --watch 可以随着代码的改变而自动编译，但是打开浏览器还需要人工刷新浏览器，极其麻烦。即可以使用webpack-dev-server从而使的浏览器自动刷新，但是需要

 dist目录就是打包好的目录，启动服务则使用npx webpack-dev-serve --open后面跟上--open则可以直接打开浏览器，第一次打开可能会被拦截，点击允许就好了。

 资源模块

资源模块就是module

 

 因为这个asset是根据资源大小来选择的，如果说资源大小超过了8k则使用resource，反之使用inline，这个8k是默认值，修改则使用parser对象中的dataUrlCondition对象中的maxSize来设置新的临界值，其中parser取解析器的意思，dataurlcondition条件的意思，maxsize就是最大值，如果maxsize最大值为4kb，意思就是当资源大小超过了4kb，则使用resource资源类型。小于则使用inline。

什么是loader

loader就是资源加载器，用来加载资源文件。

加载css和less

 loader按照逆序的顺序执行，从右到左，如果是less文件则需要使用less-loader，如果是css文件则需要使用css-loader，style-loader起到的是配合作用，辅助和adc的关系

 

 抽离压缩css 

使用到啦mini-css-extract-plugin插件，需要先在plugins里面进行实例化的

 extract就是抽离的意思

压缩的话使用

 minimizerwebpackplugin直接在oprimizatioin里面的minimizer数组中进行实例化，minimizer即压缩的意思。

css加载images图形 

 

 

源代码

webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin"); // 创建html模板，并注入js文件
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // 加载css文件,其作用取代style-loader
const MiniMinimizerWebpackPlugin = require("css-minimizer-webpack-plugin");

module.exports = {
  // entry入口文件
  entry: "./src/index.js",
  // 打包模式
  mode: "development",
  // output出口文件
  output: {
    // 文件名
    filename: "bundle.js",
    // 打包路径
    path: path.resolve(__dirname, "./dist"),
    // 清楚上一次打包结果
    clean: true,
    // 资源模块文件名
    assetModuleFilename: "./images/[contenthash][ext]",
  },
  // 可以使用webpack --watch开启观察模式，实时编译打包文件x
  // 通过source-map精准定位代码行数，devtool属性，inline-source-map属性值
  devtool: "inline-source-map",
  // 插件 html-webpack-plugin插件，自动引入外部文件
  plugins: [
    new HtmlWebpackPlugin({
      // filename 打包的文件名，template使用的模板路径，inject外部文件插入文档的位置
      filename: "app.html",
      template: "./src/index.html",
      inject: "body",
    }),
    new MiniCssExtractPlugin({
      filename: "./styles/[contenthash].css",
    }),
  ],
  // 配合使用webpack-dev-server，设置webpack-dev-server打开文件的路径
  devServer: {
    static: "./dist",
  },
  // 资源模块
  module: {
    //引入规则，跟数组
    rules: [
      {
        test: /\.png$/,
        type: "asset/resource",
        // :   asset/resource 发送一个单独的文件并导出 URL
        generator: {
          filename: "./images/[contenthash][ext]",
        },
      },
      {
        test: /\.ttf$/,
        type: "asset/resource",
      },
      {
        test: /\.svg$/,
        type: "asset/inline",
        // :   asset/resource 发送一个单独的文件并导出 data-URL
      },
      {
        test: /\.txt$/,
        type: "asset/source",
        // :   asset/resource 导出文件源代码
      },
      {
        test: /\.jpg$/,
        type: "asset",
        // :   asset根据资源大小去选择resource或者inline任意一种,修改资源大小临界值
        parser: {
          dataUrlCondition: {
            maxSize: 4 * 1024 * 1024, // 4MB
          },
        },
      },
      {
        test: /\.(css|less)/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"],
      },
    ],
  },
  //  压缩css代码，optimization(对象)最佳化，minimizer(数组)最小化
  optimization: {
    minimizer: [new MiniMinimizerWebpackPlugin()],
  },
};

 入口文件

//  入口文件
import helloWorld  from "./helloWorld";
import imgSrc from './assets/images/test.png'
import svgSrc from './assets/images/test.svg'
import helloWorld1 from './assets/exmaple.txt'
import './assets/style.css'
import './assets/style.less'
helloWorld()

const img = document.createElement("img");
img.src = imgSrc;
document.body.appendChild(img)

const img1 = document.createElement("img");
img1.style.cssText = 'width:600px;height:200px;'
img1.src = svgSrc;
document.body.appendChild(img1)

const div1 = document.createElement('div')
div1.textContent = helloWorld1
document.body.appendChild(div1)

const span1 = document.createElement('span')
span1.classList.add('icon')
span1.innerHTML = ''
document.body.appendChild(span1)

document.body.classList.add('head')
document.body.classList.add('bg-image')

---

还没有写完勒，瞌睡死宝宝了。

晚安晚安！