一直对webpack就很好奇，所以就想着去学习一下，然后官方的脚手架搭一个webpack项目，不过一些规则有点事继承webpack的。
1.目录
|--Readme.md
|-- .eslintrc.js //eslint配置
|-- babel.config.js //bable配置信息
|-- package-lock.json
|-- package.json //配置信息
|-- config //配置
| |-- webpack.dev.js //开发环境配置
|-- dist
| |-- main.js //打包入口目录
|-- public
| |-- index.html //模板html文件
|-- src //主文件目录
|-- App.jsx
|-- main.js //项目入口
|-- route //路由配置
| |-- index.jsx //路由配置文件
|-- view //相关页面文件
|-- index.jsx
|-- My.jsx //我的页面
|-- style //样式文件,这里使用了styled-components
|-- MyStyle.js
2.下面的文件说明主要是相关的配置文件，不涉及到页面的编写
2.1 webpack.dev.js //开发环境配置
const EslintWebpackPlugin = require("eslint-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");
const path = require('path');
// 返回处理样式loader函数
const getStyleLoaders = (pre) => {
return [
"style-loader",
"css-loader",
{
//处理css兼容性问题，配合package.json的babelslist来指定兼容性
loader:"postcss-loader",
options:{
postcssOptions:{
plugins:["postcss-preset-env"],
}
}
},
pre,
].filter(Boolean);
};
module.exports = {
//入口文件
entry: "./src/main.js", //注意路径，还有对应的文件名
//输出文件
output:{
//开发模式不用指定路径
path:undefined,
//输出JS主文件
filename:"static/js/[name].js",
//其他JS文件
chunkFilename:"static/js/[name].chunk.js",
//输出的其他文件路径
assetModuleFilename:"static/media/[hash:10][ext][query]",
},
//加载器
module:{
rules:[
//处理css文件
{
test:/.css$/,
use:getStyleLoaders(),
},
{
test:/.less$/,
use:getStyleLoaders("less-loader"),
},
{
test:/.s[ac]ss$/,
use:getStyleLoaders("sass-loader"),
},
{
test:/.styl$/,
use:getStyleLoaders("stylus-loader"),
},
//处理图片
{
test:/.(png|jpg|jpeg|gif|bmp|webp|svg)$/,
type:"asset",
parser:{
dataUrlCondition:{
maxSize:1024*1024,
},
}
},
//处理其他资源,例如字体文件
{
test:/.(woff|woff2|eot|ttf|otf)$/,
type:"asset/resource",
},
//处理js文件
{
test: /.jsx?$/,
//只处理src目录下的js、jsx文件
include: path.resolve(__dirname, "../src"),
loader: "babel-loader",
options: {
cacheDirectory: true, // 开启babel编译缓存
cacheCompression: false, // 缓存文件不要压缩
plugins: [
"react-refresh/babel", // 激活react的HMR,热更新
"babel-plugin-styled-components", // 激活styled-components的HMR
],
},
},
]
},
plugins:[
//eslint检查
new EslintWebpackPlugin({
//指定检查的文件路径
context:path.resolve(__dirname, "../src"),
//不检查这里的文件
exclude:"node_modules",
//缓存之前的编译结果
cache:true,
//缓存的路径
cacheLocation: path.resolve(__dirname, "../node_modules/.cache/.eslintcache"),
}),
//处理html文件
new HtmlWebpackPlugin({
template: path.resolve(__dirname, "../public/index.html"),
}),
new ReactRefreshWebpackPlugin(), // 激活react的HMR,热更新
],
//开发环境模式
mode: "development",
//开发模式下的调试,方便找到代码出错的位置
devtool: "cheap-module-source-map",
//对打包结果进行优化
optimization: {
//开发模式下的打包规则
splitChunks: {
chunks: "all",//不管异步加载还是同步加载的模块都提取出来，打包到一个文件中
},
//避免文件的频繁变更导致浏览器缓存失效
runtimeChunk: {
name: (entrypoint) => `runtime~${entrypoint.name}.js`,
},
},
resolve: {
//自动补全文件扩展名
extensions: [".js", ".jsx"],
},
devServer: {
host: "localhost",
port: 3770, //端口号
open: true,
hot: true, // 开启HMR
historyApiFallback: true, // 解决前端路由刷新404问题
},
}
2.2bable.config.js
module.exports = {
// babel-preset-react-app
presets: ['react-app'] // 继承 react 官方规则
}
2.3.eslintrc.js
module.exports = {
env: {
es2021: true
},
extends: [
'plugin:react/recommended',
'standard'
],
parserOptions: {
ecmaFeatures: {
jsx: true
},
ecmaVersion: 'latest'
},
plugins: [
'react'
],
rules: {
}
}
我基本的配置都是跟着尚硅谷的webpack教程配置的，感觉最重要的就是这个文件，后续再弄一下生产模式下的配置，当然还可以扩展更多功能，都可以加进去，我这边加了eslint的一些配置还有styled-components。
这里附上我的github地址github.com/mengliren66…，感兴趣的老哥可以拉下来看看，不过我这里连node_modules都上传上去了，有点尴尬，哈哈。。。
我是一枚菜鸟前端，希望自己能一步一步完成自己的小目标，和群里的老哥一起进步!
