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/
