使用webpack4从零配置react项目

最新推荐文章于 2024-05-06 18:01:00 发布

zzh1918

最新推荐文章于 2024-05-06 18:01:00 发布

阅读量1.8k

点赞数 3

分类专栏： javascript 文章标签： webpack4 按需加载配置react

本文链接：https://blog.csdn.net/qq_37860930/article/details/102969131

版权

javascript 专栏收录该内容

37 篇文章 1 订阅

订阅专栏

前言

以前做react项目的时候都是使用create-react-app脚手架初始化项目的，最近想自己从零配置webpack4来实现一个react项目的初始化。

源码在这里
配置实现的功能：

打包css、js、img等资源
支持jsx、es6等语法
本地服务器
eslint
按需加载
构建分析
git hooks

最终的目录结构
在这里插入图片描述

build放置打包文件
config放置webpack配置文件
src放置我们的代码

配置过程

1.创建文件夹sty-react-template

2.初始化git仓库、生成package.json文件

git init
yarn init

3.创建src目录、index.html、index.js文件
在这里插入图片描述

接下来我们打包试试，虽然现在我们什么都没配置，但是webpack4有自己的默认配置。

#安装依赖
yarn add webpack webpack-cli -D
#执行webpack命令
webpack index.js

此时发现报错bash: webpack: command not found
因为我们是本地安装的webpack，全局的环境变量并没有webpack命令，所以报错，我们只能进入对应的目录下执行命令

node_modules/.bin/webpack index.js
#或者   npx webpack index.js

npx会自动链接路径具体可以参考这里

在这里插入图片描述
此时项目底下多了一个打包文件dist，这是webpack默认配置打包的结果，我们在index.html引入打包的文件就可以了。在浏览器中打开index.html可以在控制台看到打印的hello world。

接下来我们自己创建配置来打包，创建配置之前，我们先忽略node_modelues文件的改动，在根目录下创建.gitignore

# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# production
/build

# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*

创建config文件夹及配置文件后的目录结构
在这里插入图片描述
生成和开发环境分开配置，通过webpack-merge合并共用配置

//webpack.common.js
const path = require('path')

// 从根目录走
function resolve(dir) {
    return path.join(__dirname, '..', dir);
}

module.exports = {
    context: path.resolve(__dirname, '../'), // 入口起点根目录
    entry: {
        app: './src/index.js'
    },
    output: {
        path: resolve('build'),
        filename: '[name].js',
    }
}

//webpack.dev.js
const merge = require('webpack-merge')
const common = require('./webpack.common')

module.exports = merge(common,{
    mode:'development'
})

//webpack.prod.js
const merge = require('webpack-merge')
const common = require('./webpack.common')

module.exports = merge(common, {
    mode: 'production'
})

webpack4提供了mode模式来优化webpack打包， mode为production会自动压缩js代码。
通过package.json来使用webpack命令

//package.json
...
 "scripts": {
    "dev":"webpack --config ./config/webpack.dev.js",
    "build": "webpack --config ./config/webpack.prod.js"
  },
 ...

–config是告诉webpack通过什么配置文件打包
执行yarn dev可以看到js被打包到build目录下了，然后在html中引入打包的文件
在这里插入图片描述

我们可以使用插件来生成html文件，这样就避免了html每次去手动引入js；使用插件来删除上次打包的结果

#安装依赖
yarn add -D html-webpack-plugin clean-webpack-plugin

//修改webpack.common.js文件
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
	...
 	plugins:[
        new HtmlWebpackPlugin({template:'./src/index.html'}),
        new CleanWebpackPlugin()
    ]
    ...
}

现在打包会自动以src下的html为模板生成新的html，新的html文件会自动引入打包的文件
在这里插入图片描述
每次修改完文件都要重新打包才能看到效果，我们可以使用webpack-dev-server来搭建一个本地服务器来实时更新。

#安装依赖
yarn add -D webpack-dev-server

//webpack.dev.js
const merge = require('webpack-merge')
const common = require('./webpack.common')

module.exports = merge(common, {
    mode: 'development',
    devServer: {
        contentBase: './index.html',
        hot: true,
        port: 3000
    }
})

//修改package.json的dev
 "scripts": {
    "dev": "webpack-dev-server --open --config ./config/webpack.dev.js",  
	...
  },

执行yarn dev会就可以直接在http://localhost:3000/实时预览了

至此webpack的雏形已经完成了，上面一些配置的细节可以参考官方文档。
接下来我们就去实现jxs语法了。

#安装依赖，这里不需要加-D参数
yarn add react react-dom

//修改src下的index.js文件
import React from 'react'
import ReactDOM from 'react-dom'

const App = () => (
	<div>
		hello react
	</div>
)

ReactDOM.render(<App />, document.getElementById('app'))

运行yarn dev报错
在这里插入图片描述
很明显不支持jsx语法，我们需要配置loader了
去babel的官网，看看如何配置jsx语法loader

yarn add -D @babel/preset-react babel-loader @babel/core

//webpack.common.js
module.exports = {
	...
 	module: {
	    rules: [
	      {
	        test: /\.(js|jsx|ts|tsx)$/,
	        exclude: /(node_modules|bower_components)/,
	        use: [
	          {
	            loader: 'babel-loader',
	            options: {
	              presets: ['@babel/preset-react']
	            }
	          }
	        ]
	      },
	    ]
 	 }
}

运行yarn dev启动成功
在这里插入图片描述
接下来配置css的loader
在src下创建css文件，然后在index中引入并使用

yarn add -D style-loader css-loader

//webpack.common.js
   ...
   module:{
	rules:[
		...
		{
	      test: /\.css$/,
	      use: ['style-loader', 'css-loader']
      	}
	]
   }

//index.css
...
.red {
  color: red;
}

运行yarn dev
在这里插入图片描述
可以看到样式被插进了head中。当项目变大时样式直接插入head中的方式并不好，我们需要将样式分离
webpack4的版本中建议使用mini-css-extract-plugin插件（以前是ExtractTextWebpackPlugin插件）

yarn add -D mini-css-extract-plugin

//webpack.common.js
...
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

	rules:[
		...
		{
	      test: /\.css$/,
	      use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              // you can specify a publicPath here
              // by default it uses publicPath in webpackOptions.output
              publicPath: '../',
              hmr: process.env.NODE_ENV === 'development',
             },
            },
           'css-loader',
          ],
      	}
	]

plugins:[
	...
	 new MiniCssExtractPlugin({
      filename: 'static/css/[name].css',   //打包到static的css目录下
      ignoreOrder: false, // Enable to remove warnings about conflicting order
    })
]

在这里插入图片描述
可以看到css被分离出去了

接下来配置img、font、mp3等资源的loader。
url-loader和file-loader的区别在于url-loader在文件小于一定大小时可以直接打包成base64的格式嵌入html中，避免一次http请求，所以这里我们用url-loader

yarn add url-loader -D

//webpack.common.js
module:{
	rules:[
	   ...
	    {
        test: /\.(png|jpe?g|svg|gif)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: 'static/img/[name].[hash:7].[ext]'
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: 'static/font/[name].[hash:7].[ext]'
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: 'static/media/[name].[hash:7].[ext]'
        }
      }
	]
}

文件名加上hash是避免缓存的影响，webpack几种hash值得区别可以参考这里、

基本上面完成了大部分配置了。
不过有一个问题，将所有的js打包成一个文件导致文件体积很大，我们需要将js拆分。通过import()语法我们可以动态加载js，webpack会自动将js拆分。我们只需要配置拆分文件的name即可，下面我们来创建一个组件动态引入。

修改src目录下的文件
在这里插入图片描述

//  src/index.js
import React from 'react'
import ReactDOM from 'react-dom'
import App from './app'

ReactDOM.render(
	<App/>,
	document.getElementById('app')
)

// app.js
import React from 'react'
import Test from './components/Test'

function App() {
  return (
    <div>
      <Test />
    </div>
  )
}

export default App;

// src/components/Test.js
import React, { Component } from 'react';

class Test extends Component {
  state = {  }
  render() { 
    return ( 
      <div>
        test
      </div>
     );
  }
}
 
export default Test;

启动项目报错
在这里插入图片描述
现在还不支持类实例属性简写，实例属性只能写在constructor中，不过我们可以通过配置babel来支持这种写法

yarn add -D @babel/plugin-syntax-class-properties

//webpack.common.js
...
 rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        exclude: /(node_modules|bower_components)/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-react'],
              plugins: ['@babel/plugin-proposal-class-properties']
            }
          }
        ]
      },
      ...
 ]

接下来使用按需加载，按需加载只需要配置chunkFilename即可，然后使用动态import()方法，webpack会自动拆分

我使用react提供的懒加载方法来拆分代码

// src/app.js
import React from 'react'
// import Test from './components/Test'

const Test = React.lazy(() => import('@/components/Test'))

function App() {
  return (
    <div>
      <React.Suspense fallback={<div>Loading...</div>}>
        <Test />
      </React.Suspense>
    </div>
  )
}

export default App;

启动报错
在这里插入图片描述
不支持异步导入。添加babel插件解决

yarn add  -D @babel/plugin-syntax-dynamic-import

// webpack.common.js
 use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-react'],
              plugins: ['@babel/plugin-proposal-class-properties', '@babel/plugin-syntax-dynamic-import']
            }
          },
          'eslint-loader'
        ]

执行yarn build
在这里插入图片描述
不用懒加载打包的情况如下：

通过对比发现多了一个1.js。这里我们需要配置拆分后的js目录，通过chunkFilename即可

//webpack.common.js
output: {
  	...
    chunkFilename: 'static/js/[name].[contenthash:8].chunk.js',
  },

在这里插入图片描述
可以看到打包的入口文件在最外层，拆分的js放到了static的js目录下了。

接下来是压缩css代码。mode为production只会压缩js，css压缩我们通过插件optimize-css-assets-webpack-plugin

yarn add -D optimize-css-assets-webpack-plugin

//webpack.common.js
module.exports = {
	...
	optimization: {
    // splitChunks: {
    //   chunks: 'all'
    // },
   	    minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})]
  },

}

optimization是webpack提供的优化方式，webpack有默认的压缩方式，我们可以自己配置minimizer，TerserJSPlugin是webpack4默认的js压缩方法，这里我们再写一遍是防止自定义覆盖了。

接下来我们进行构建分析，通过webpack-bundle-analyzer我们可以分析我们打包的代码，webpack-bundle-analyzer的使用可以参考官网或这里

yarn add -D webpack-bundle-analyzer

//webpack.common.js
...
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

plugins:[
	...
	new BundleAnalyzerPlugin({
      analyzerMode: 'disabled',   //避免每次启动都打开分析网站
      generateStatsFile: true
    })
]

// package.json
"scripts": {
   "analyz": "webpack-bundle-analyzer --port 8001 ./build/stats.json"
	...
},

每次执行yarn dev或yarn build都会在build文件下生成stats.json文件，然后执行yarn analyz会自动在8001端口打开分析页面
在这里插入图片描述
可以看到项目中node_modules文件在打包中的体积是最大的，如何优化？

我们可以将这类库不打包，然后直接通过CDN引入。

// webpack.common.js
module.exports = {
	...
	externals: {
	   react: 'React',
	   'react-dom': 'ReactDOM'
  	},
}

执行yarn dev 和yarn analyz
在这里插入图片描述
可以看到react和react-dom都没有打包进去，体积减小了很多。但是这里我们的页面报错了，因为react没有打包，导致页面找不到React变量。我们需要手动在html里引入react的库

<!-- src/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>第一个模板</title>
  <!-- 有很多cdn，选择一个即可 -->
  <script type="text/javascript" src="https://unpkg.com/react@16.7.0/umd/react.production.min.js"></script>
  <script type="text/javascript" src="https://unpkg.com/react-dom@16.7.0/umd/react-dom.production.min.js"></script>
</head>
<body>
  <div id="app"></div>
  
</body>
</html>

关于如何配置externals请参考文档

为了保持项目代码风格我们需要使用eslint进行检查

yarn add -D eslint

npx eslint --init

在这里插入图片描述
这是我的选择，还有最后一步是安装依赖，选择y即可。
命令会自动在项目根目录生成.eslintrc.js文件，代码风格我用的是standard
我们可以扩展或覆盖代码风格配置，比如语句必须分号结尾，更多的配置规则查看文档

module.exports = {
	...
	rules: {
    	semi: ["error", "always"],  //语句必须用;
  	}
}

运行npx eslint src（检测src目录代码风格）
在这里插入图片描述
可以看到很多错误，我们按照对应的规则修改即可。eslint结合编辑器可以很好的使用，vscode安装eslint插件后可以直接看到提示

上面就是缺少分号，可以配置保存自动修复。

这里有个错误，没有使用React变量。但是我们使用了jsx语法就必须引入react。清除警告的方法就是使用"plugin:react/recommended"

// .eslintrc.js
module.exports = {
 extends: [
 	...
    "plugin:react/recommended"
  ],
}

使用eslint-loader可以直接在浏览器的控制台中看到警告信息

yarn add -D eslint-loader

// webpack.common.js

...
module:{
	rules:[
	 ...
	 {
        test: /\.(js|jsx|ts|tsx)$/,
        exclude: /(node_modules|bower_components)/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-react'],
              plugins: ['@babel/plugin-proposal-class-properties', '@babel/plugin-syntax-dynamic-import'],
            }
          },
          'eslint-loader'
        ]
      },
	]
}

在这里插入图片描述

我们每次在代码提交时，能不能自动检测eslint，当有代码风格错误时阻止提交代码？
可以使用husky来实现这个功能

# 用yarn的安装husky@next   用npm的安装husky
yarn add -D husky@next

//package.json
...
 "scripts": {
   	...
    "lint": "eslint src"
  },
   "husky": {
    "hooks": {
      "pre-commit": "yarn lint",
      "pre-push": "yarn lint"
    }
  },

在代码commit或push的时候都会自动执行yarn linit当检测不通过时会阻止代码提交
比如有个文件有语句没加分号时，我们来提交代码试试

git add .
git commit -m"test"

在这里插入图片描述
可以看到代码提交失败,当修改完后再提交就可以了

以上就是这次webpack配置的全部内容了。源码放在了github上

zzh1918

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
使用webpack4从零配置react项目

前言以前做react项目的时候都是使用create-react-app脚手架初始化项目的，最近想自己从零配置webpack来实现一个react项目的初始化。打包后的目录结构：创建文件件sty-react-template初始化git仓库、生成package.json文件git inityarn init...
复制链接

扫一扫

专栏目录