介绍 npm init - y npm 小姐:WebPack npm 小姐:react react-dom s import react 得到& # 39;反应# 39;
import {呈现},得到& # 39;react-dom& # 39;
import App 得到& # 39;。/应用# 39;
呈现(& lt;应用程序/祝辞,. getelementbyid(& # 39;根# 39;)) import 反应,{组件},得到& # 39;反应# 39;
{class App extends 组件
构造函数才能(){
,,,超级()
,,}
红肿才能(){
,,,回报(
,,,,,& lt; div>
,,,,,,,App 模块
,,,,,& lt;/div>
,,,)
,,}
} const path =,需要(& # 39;path & # 39;)
const StyleLintPlugin =,要求(& # 39;stylelint-webpack-plugin& # 39;)
const STYLELINTENABLE =,真的
module.exports =, {
模式:才能& # 39;发展# 39;
条目:& # 39;才能。/src/index.js& # 39;
输出:{才能
,,,路径:path.resolve (__dirname & # 39;构建# 39;),
,,,文件名:& # 39;bundle.js& # 39;
,,},
模块:{才能
,,,规则:(
,,,,,//处理js/jsx
,,,,,{
,,,,,,,测试:/\ .jsx吗?/我,
,,,,,,,使用:{
,,,,,,,,,装载机:& # 39;bebel-loader& # 39;
,,,,,,,,,选择:{
,,,,,,,,,,,预设:[& # 39;@babel/preset-react& # 39;】
,,,,,,,,,}
,,,,,,,}
,,,,,},
,,,,,//处理css
,,,,,{
,,,,,,,测试:/\ . css/我美元,
,,,,,,,使用:[& # 39;style-loader& # 39; & # 39; css-loader& # 39;, {
,,,,,,,,,装载机:& # 39;postcss-loader& # 39;
,,,,,,,,,选择:{
,,,,,,,,,,,插件:要求(& # 39;autoprefixer& # 39;)
,,,,,,,,,}
,,,,,,,}]
,,,,,},
,,,,,//处理图片资源
,,,,,{
,,,,,,,测试:/\ (png | jpg | gif)。/我美元,
,,,,,,,使用:{
,,,,,,,,,装载机:& # 39;url-loader& # 39;
,,,,,,,,,选择:{
,,,,,,,,,,,outputPath: & # 39;一个/& # 39;
,,,,,,,,,,,限制:10 * 1024
,,,,,,,,,}
,,,,,,,}
,,,,,},
,,,,,//处理字体文件
,,,,,{
,,,,,,,测试:/\。(测试结束svg | | ttf |汪| woof2)/我美元,
,,,,,,,使用:{
,,,,,,,,,装载机:& # 39;url-loader& # 39;
,,,,,,,,,选择:{
,,,,,,,,,,,outputPath: & # 39;字体/& # 39;
,,,,,,,,,,,限制:10 * 1024
,,,,,,,,,}
,,,,,,,}
,,,,,},
,,,,,//更少
,,,,,{
,,,,,,,测试:/\ .less/我美元,
,,,,,,,使用:[& # 39;style-loader& # 39; & # 39; css-loader& # 39;, & # 39; less-loader& # 39;】
,,,,,},
,,,)
,,},
devtool才能:& # 39;source-map& # 39;
插件:[才能
,,,…STYLELINTENABLE ?
,,,,,new StyleLintPlugin ({
null
null
null
null
null
null
null
null
null
null
null
null
这篇文章主要介绍了使用WebPack搭建反应开发环境的案例,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。
<强>第一步,基础环境
<强>初始化
项目初始化
安装WebPack
安装反应
<强>项目基础框架
入口文件(src/index.js)
主组件(src/App.js)
webpack.config。js
