上一篇文章
简单介绍了一个最基础的webpack打包项目，要构建更加现代化的前端项目，需要配置更多的内容，才能满足日常开发的需求，如react框架开发项目，引入图片资源，引入样式等。
webpack打包React项目
接着上文的项目，要引入React（不熟悉 react 的小伙伴可以先去学习，毕竟都2202年了。React官方文档），需要安装如下三个依赖包
npm i react react-dom @babel/preset-react -D
react 以及 react-dom 自不必说，正是有了这两个东西，我们才能正常使用 react 的相关内容。而 @babel/preset-react 其实就是对 react 内容的转译（跟前面提到的@babel/preset-env类似，@babel/preset-env 是处理 es6 转换为 es5的功能，而@babel/preset-reat 则是处理 react），详细翻阅@babel/preset-react详细介绍;
安装完后，同样的，也需要修改 .babelrc 文件
{
"presets": [
["@babel/preset-env"],
"@babel/preset-react" // 处理 react
],
"plugins": []
}
修改src/index.js文件
import React from 'react';
import ReactDom from 'react-dom';
function helloworld() {
const map = {
hello: 'hello',
world: 'world'
};
const { hello, world } = map;
return `${hello} ${world}`;
}
export default function App() {
const str = helloworld();
return <div>{ str }</div>
}
ReactDom.render(<App />, document.querySelector('#root'));
执行构建命令，同样的，dist文件夹中也多出了 bundle.js 文件，这里可以在 dist 文件新建一个 index.html, 并在index.html中插入需要运行的脚本，来查看具体效果
index.html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <div id="root"></div> <script src="./bundle.js"></script></body></html>
打开index.html
OK，正常展示 hello world，说明react搭建正常。
打包CSS资源
前文说到，webpack只能识别 js 或者 json 类型的文件，对于 css 资源文件不能识别，因此，需要 loader 工具将其转化，对于 css 资源， 需要使用以下两个依赖包
- css-loader
- style-loader
css-loader是将css文件转化为webpack能读取的js或者json类型内容，style-loader则是将 css 样式以 标签里的内容插入到 html 中的 标签里面
先安装两个依赖包
npm i css-loader style-loader -D
修改webpack.config.js， 使其能够处理 css 内容的文件
const path = require('path');module.exports = { entry: './src/index.js', output: { path: path.join(__dirname, './dist'), filename: 'bundle.js' }, mode: 'production', module: { rules: [ { test: /\.js$/, use: 'babel-loader' }, { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] } ] }}
在这里，对于需要使用多个loader进行操作的话，需要给 use 传入一个数组，数组中是需要用到的 loader ，loader 的执行顺序为 由后往前。在这里先通过 css-loader 会处理css文件，而后再通过 style-loader 将处理完成的样式插入到html的标签中;
添加index.css样式文件
修改刚刚hello world的样式
.content { color: blue; font-size: 25px;}
修改index.js文件，加上样式
import React from 'react';import ReactDom from 'react-dom';import './index.css';function helloworld() { const map = { hello: 'hello', world: 'world' }; const { hello, world } = map; return `${hello} ${world}`;}export default function App() { const str = helloworld(); return <div className='content'>{ str }</div>}ReactDom.render(<App />, document.querySelector('#root'));
再次运行npm run build，dist中的 bundle.js 文件已被更新，打开index.html
可以看到 hello world 样式已发生变化，同时 html 的 标签里面插入了 的样式内容。
打包图片资源
对于页面使用的图片资源而言，则需要用
file-loader 或者是 url-loader对图片资源进行转化
这两种 loader 都是处理文件file的loader，不同之处在于，url-loader能够将较小的文件转化为base64格式，直接嵌入代码中，减少http请求。
安装file-loader
npm i file-loader -D
webpack.config.js中添加对图片的读取
const path = require('path');module.exports = { entry: './src/index.js', output: { path: path.join(__dirname, './dist'), filename: 'bundle.js' }, mode: 'production', module: { rules: [ { test: /.js$/, use: 'babel-loader' }, { test: /.css$/, use: [ 'style-loader', 'css-loader' ] }, { test: /\.(png|jpe?g|webp|svg|gif)$/, // 处理图片文件 use: 'file-loader' } ] }}
在项目中添加图片
在index.js中使用
import React from 'react';import ReactDom from 'react-dom';import './index.css';import img from './assets/indeex.png';function helloworld() { const map = { hello: 'hello', world: 'world' }; const { hello, world } = map; return `${hello} ${world}`;}export default function App() { const str = helloworld(); return <div className='content'>{ str } <img src={img}></img> </div>}ReactDom.render(<App />, document.querySelector('#root'));
执行构建
可以明显看到，在dist目录底下多了个图片
打开index.html
图片正常请求渲染
总结
构建react项目需要使用到
react react-dom @babel/preset-env三个依赖包
打包css资源，需要使用 css-loader 以及 style-loader 依赖包
打包图片资源，需要使用 file-loader 或者 url-loader 依赖包
依靠这些loader以及相关配置，这样一个具有基本功能，具有一定的视觉体验的项目就可以构建出来。
请期待下一篇：
