webpack5的小笔记在配置loader时的配置解读例子如下 entry：定义了webpack的入口文件，意思web

在配置loader时的配置解读

例子如下

module.exports = {
  entry: './main.jsx',
  output: {
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015', 'react']
          }
        }
      }
    ]
  }
};

entry：定义了webpack的入口文件，意思webpack就是从这里开始构建你的应用程序，从这里开始分析依赖，并生成输出文件
**output：**这里定义了Webpack的输出配置。Webpack会将构建后的文件输出为一个名为 bundle.js 的文件，该文件将包含整个应用程序的代码。
module：这里定义了模块处理的规则
- rules：这是一个包含多个规则的数组，每个规则定义了如何处理特定类型的文件。在这个配置中，只有一个规则。
- test：/\.jsx?$/此规则使用正则表达式来匹配所有以 .js 或 .jsx 结尾的文件。这意味着它将用于处理Js和jsx文件。
- exclude：/node_modules/这个规则指定了一个排除目录，Webpack不会处理该目录中的文件。
- use：用于定义在模块匹配成功后应该使用的加载器（loader），指定了应该使用哪个加载器以及加载器的配置选项，加载器通常用于处理文件类型，例如将ES6代码转换为ES5，将Sass或Less转换为CSS，将图片压缩，等等。
  - options：
    - presets：presets: ['es2015', 'react']：传递了一些选项，给了加载器这两种预设，告诉他怎么样编译代码，处理es6或者更新的js版本和react代码
    - limit: 指定了一个阈值，通常是文件大小的字节数。如果图像文件小于等于这个阈值则被嵌入到js或者css文件中，大于则是单独生成一个文件

加载器

加载器的官方列表：Loaders | webpack 中文文档 (docschina.org)

**css-loader：**用于读取，解析css文件

 {
       loader: 'css-loader',
       options: {
       modules: true   //这个选项是为每个 CSS 类名生成一个唯一的局部作用域标识符，以避免全局 CSS 类名冲突，避免了全局 CSS 类名冲突
             }

**style-loader：**将模块导出的内容作为样式并添加到 DOM 中，就是将css标签插入HTML页

插件的使用

如下例子就是使用了UglifyJsPlugin插件

var webpack = require('webpack');
var UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'
  },
  plugins: [
    new UglifyJsPlugin()
  ]
};

HtmlwebpackPlugin和OpenBrowserPlugin的使用

var HtmlwebpackPlugin = require('html-webpack-plugin');
var OpenBrowserPlugin = require('open-browser-webpack-plugin');

module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'
  },
  plugins: [
    new HtmlwebpackPlugin({
      title: 'Webpack-demos',   //生成的html文件中 的头部title标签里的文字
      filename: 'index.html'   //生成的文件
    }),
    new OpenBrowserPlugin({
      url: 'http://localhost:8080'
    })
  ]
};

利用DefinePlugin定义全局变量

在package.json文件中

{
  "name": "webpack-demo09",
  "version": "1.0.0",
  "scripts": {
    "dev": "npx cross-env DEBUG=true webpack-dev-server --open",
    "build": "npx cross-env DEBUG=false webpack"
  },
  "license": "MIT"
}

利用cross-env这个跨平台设置环境变量的工具来设置环境变量DEBUG=true
而build的时候相反

在webpack.config.js文件中

var webpack = require('webpack');

var devFlagPlugin = new webpack.DefinePlugin({    
  __DEV__: JSON.stringify(JSON.parse(process.env.DEBUG || 'false'))
});

module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'
  },
  plugins: [devFlagPlugin]
};

DefinePlugin 是Webpack的内置插件，用于定义全局常量
在这个例子中，我们定义了一个名为__DEV__的全局变量
如果DEBUG环境变量存在，将其解析为布尔值；如果不存在，则默认为false
最终，__DEV__将被定义为一个全局变量，其值为解析后的环境变量DEBUG的布尔字符串值
在其他代码中，可以使用__DEV__变量来判断是否处于开发模式

提取公告模块

  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: "commons",
      // (the commons chunk name)

      filename: "commons.js",
      // (the filename of the commons chunk)
    })
  ]

plugins字段包含了一个插件数组
这里使用了CommonsChunkPlugin插件
CommonsChunkPlugin插件，用于提取公共模块，将多个入口文件中共享的模块提取到一个单独的文件中
name属性指定了提取的公共模块的名称，这里设置为"commons"
filename属性指定了提取的公共模块的输出文件名，这里设置为"commons.js"
这样子可以减少重复加载和优化代码分割

指定外部依赖

index.js

<html>
  <body>
    <script src="data.js"></script>
    <script src="bundle.js"></script>
  </body>
</html>

main.jsx

var data = require('data');
var React = require('react');
var ReactDOM = require('react-dom');

ReactDOM.render(
  <h1>{data}</h1>,
  document.body
);

webpack.config.js

module.exports = {
  entry: './main.jsx',
  output: {
    filename: 'bundle.js'
  },
  module: {
    rules:[
      {
        test: /\.js[x]?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015', 'react']
          }
        }
      },
    ]
  },
  externals: {
    'data': 'data'
  }
};

指定了一个名为data的外部依赖，它将被视为全局变量，并不会被打包进bundle.js中。
外部依赖data将会被视为全局变量，不会被打包进最终的输出文件中。