一文搞定webpak5.0 基础环境搭建配置篇（二）

webpak5.0 基础环境搭建配置篇

书接上篇讲到我们搭建了一个webpack 基础环境，但是这个环境看起来根本没有用，每次都要去改dist 中的html, 很是不方便，于是webpack 配置来了。
那如何去使用webpack 配置呢。

1、webpack配置

首先我们需要在根目录建个webpack配置文件
mac命令如下

touch webpack.config.js

在文件中我们写入下面这些代码

const path = require('path');
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

稍微解释一下上面的代码

第一行表示我们引入一个模块可以获取文件的路径

这个在module.exports 中也用到了。

module.exports 是node.js 中导出一个模块的意思

因此我们在webpack.config.js 写的配置都要在module.exports中导出，

首先说下entry ，它表示入口文件，也就是webpack 编译代码的时候会从哪个地方去开始编译你的代码，

output 表示文件的出口，它的值在这里是一个对象，

有两个属性：filename表示输出文件的名字，path表示输出文件会存放的位置。

__dirname,是一个成员，用来动态获取当前文件模块所属的绝对路径。

按照上面的配置，我们的webpack 就会按照配置的方式把文件自动编译到根目录的dist文件夹下。

2、webpack命令

考虑到我们每次编译运行npx webpack 不太方便的缘故，我们可以在package.json里面添加一个执行命令，代码如下，新加的命令： "build": "webpack"

{
   "name": "webpack-demo",
   "version": "1.0.0",
   "description": "",
   "private": true,
   "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
    "build": "webpack"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "devDependencies": {
     "webpack": "^5.4.0",
     "webpack-cli": "^4.2.0"
   },
   "dependencies": {
     "lodash": "^4.17.20"
   }
 }

3、加载css

在我们做项目的时候，总会用到css，但是这个基础配置貌似不支持去编译css，因此现在我们就需要给我的配置文件加上配置，以保证webpack编译的时候可以去编译css

官方是这么说的：为了在 JavaScript 模块中 import 一个 CSS 文件，你需要安装 style-loader 和 css-loader，并在 module 配置 中添加这些 loader：

安装

npm install --save-dev style-loader css-loader

在 webpack-config.js 中添加module

const path = require('path');
 module.exports = {
   entry: './src/index.js',
   output: {
     filename: 'bundle.js',
     path: path.resolve(__dirname, 'dist'),
   },
  module: {
    rules: [
  // 加载css
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
 };

稍微解释一下，这么更改，只是安装了style-loader css-loader 两个loader 和在webpack-config.js 加了两个模块，也就是module中的代码，需要在rules 中配置一下规则，保证是css结尾的文件 支持编译。

按照上面的操作配置完成后，我们使用css 的时候就可以在js 中这么使用

import './style.css';

4、加载图像

加载图像配置其实和加载css 配置是在一个地方，完整配置如下：

const path = require('path');

 module.exports = {
   entry: './src/index.js',
   output: {
     filename: 'bundle.js',
     path: path.resolve(__dirname, 'dist'),
   },
   module: {
     rules: [
       {
         test: /\.css$/i,
         use: ['style-loader', 'css-loader'],
       },
      // 加载图像配置
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
      },
     ],
   },
 };

5、加载fonts 字体配置，完整配置如下：

const path = require('path');

 module.exports = {
   entry: './src/index.js',
   output: {
     filename: 'bundle.js',
     path: path.resolve(__dirname, 'dist'),
   },
   module: {
     rules: [
       {
         test: /\.css$/i,
         use: ['style-loader', 'css-loader'],
       },
       {
         test: /\.(png|svg|jpg|jpeg|gif)$/i,
         type: 'asset/resource',
       },
    // 加载字体配置
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource',
      },
     ],
   },
 };

6、加载数据配置

此外，可以加载的有用资源还有数据，如 JSON 文件，CSV、TSV 和 XML。类似于 NodeJS，JSON 支持实际上是内置的，也就是说 import Data from './data.json' 默认将正常运行。要导入 CSV、TSV 和 XML，你可以使用 csv-loader 和 xml-loader。让我们处理加载这三类文件：

npm install --save-dev csv-loader xml-loader

完整配置如下：

const path = require('path');

 module.exports = {
   entry: './src/index.js',
   output: {
     filename: 'bundle.js',
     path: path.resolve(__dirname, 'dist'),
   },
   module: {
     rules: [
       {
         test: /\.css$/i,
         use: ['style-loader', 'css-loader'],
       },
       {
         test: /\.(png|svg|jpg|jpeg|gif)$/i,
         type: 'asset/resource',
       },
       {
         test: /\.(woff|woff2|eot|ttf|otf)$/i,
         type: 'asset/resource',
       },
    // 加载csv
      {
        test: /\.(csv|tsv)$/i,
        use: ['csv-loader'],
      },
    // 加载xml
      {
        test: /\.xml$/i,
        use: ['xml-loader'],
      },
     ],
   },
 };

7、自定义自定义 JSON 模块 parser

具体配置请参考官网：这个不常用就不做介绍了。

参考官网文档：https://webpack.docschina.org/guides/asset-management/