webpack4 + antd4 + react-router-dom5+eslint
npm initnpm install --save-dev webpack
npm install --save-dev webpack-cli如果提示 webpack-cli 有问题，可以尝试全局安装这两个模块
webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)
src/index.js
let name = '2222';
function getMame(name) {
console.log(name);
}package.json
{
"name": "webpack-start",
"version": "1.0.0",
"description": "webpack 配置 脚手架",
"main": "index.js",
"scripts": {
"dev": "webpack --config webpack.config.dev.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.42.1",
"webpack-cli": "^3.3.11"
}
}// 运行结果 yarn dev
$ webpack --config webpack.config.dev.js
Hash: 0fb9d2f81be92f8377d9
Version: webpack 4.42.1
Time: 71ms
Built at: 2020-04-04 17:01:30
Asset Size Chunks Chunk Names
bundle.js 3.84 KiB main [emitted] main
Entrypoint main = bundle.js
[./src/index.js] 68 bytes {main} [built]
✨ Done in 0.88s.当前目录
├── dist
│ └── bundle.js
├── package.json
├── src
│ └── index.js
└── webpack.config.dev.jsmodule.rules 允许你在 webpack 配置中指定多个 loader。
ECMAScript6 实现了很多强大的新特性，借助 ES6 我们能用更加优雅的方式完成许多强大的功能。只是鉴于许多老版本的浏览器尚未支持 ES6 语法，需要在使用之前转换为 ES5 语法，以使其兼容更多的浏览器.这个过程需要借助Babel
Babel 本质就是一个 JavaScript 编译器.
npm install -D babel-loader @babel/core @babel/preset-env支持静态属性
npm install --save-dev @babel/plugin-proposal-class-properties创建.babelrc 配置文件
{
"presets": ["@babel/preset-env"],
"plugins": ["@babel/plugin-proposal-class-properties"]
}npm install --save-dev html-webpack-pluginconst path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
//webpack模式
mode: 'development',
//入口
entry: './src/index.js',
//出口
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
//配置loader
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
},
},
],
},
plugins: [
new HtmlWebpackPlugin({
title: 'webpack-start',
filename: 'index.html',
inject: true,
favicon: '',
minify: false,
hash: true,
}),
],
};style-loader 是将 css-loader 打包好的 css 代码以<style>标签的形式插入到 html 文件中。
css-loade 加载器像 import/require（）一样解释@import和 url（），并将解析它们。
npm install --save-dev style-loader css-loadernpm install --save react react-dom
npm install --save-dev @babel/preset-react
.babelrc
{
"presets": ["@babel/preset-env", "@babel/preset-react"],
"plugins": ["@babel/plugin-proposal-class-properties"]
}const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
//webpack模式
mode: 'development',
//入口
entry: './src/index.js',
//出口
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
resolve: {
extensions: ['.jsx', '.js', '.json'],
// 设置别名
alias: {
'@components': path.resolve(__dirname, 'src/components'),
},
},
//配置loader
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
},
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
],
},
plugins: [
new HtmlWebpackPlugin({
title: 'webpack-start',
filename: 'index.html',
inject: true,
favicon: '',
minify: false,
hash: true,
}),
],
};├── dist
│ ├── bundle.js
│ └── index.html
├── index.html
├── package.json
├── src
│ ├── components
│ │ ├── App.jsx
│ │ └── Counter
│ │ ├── Counter.css
│ │ └── Counter.jsx
│ └── index.js
└── webpack.config.dev.jsnpm install antd
npm install babel-plugin-import --save-dev
npm install --save @ant-design/icons{
"presets": ["@babel/preset-env", "@babel/preset-react"],
"plugins": [
"@babel/plugin-proposal-class-properties",
[
"import",
{ "libraryName": "antd", "libraryDirectory": "lib", "style": "css" },
"antd"
]
]
}npm install webpack-dev-server --save-dev devServer: {
contentBase: path.join(__dirname, "dist"),
compress: false,
port: 9000,
open: true,
}安装 react-router-dom
npm install react-router-dom- redux
- mobx
- dva
这边就不加了
全局安装 eslint
运行eslint --init即可
注意node 的版本.node>=10
"babel-eslint": "^10.1.0",
"eslint": "^6.8.0",
"eslint-config-airbnb": "^18.1.0",
"eslint-config-prettier": "^6.10.1",
"eslint-import-resolver-webpack": "^0.12.1",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-prettier": "^3.1.2",
"eslint-plugin-react": "^7.19.0",
"eslint-plugin-react-hooks": "^3.0.0",
"husky": "^4.2.3",
"prettier": "^2.0.2",
"prettier-eslint": "^9.0.1",- commit 规范
npm install -g commitizen
凡是用到git commit命令，一律改为使用git cz
这时，就会出现选项，用来生成符合格式的 Commit message
optimization: {
splitChunks: {
chunks: 'async',
minSize: 30000,
minChunks: 1,
maxAsyncRequests: 5,
maxInitialRequests: 3,
automaticNameDelimiter: '~',
name: true,
cacheGroups: {},
},
},-
chunks: 表示哪些代码需要优化，有三个可选值：initial(初始块)、async(按需加载块)、all(全部块)，默认为 async
-
minSize: 表示在压缩前的最小模块大小，默认为 30000
-
minChunks: 表示被引用次数，默认为 1
-
maxAsyncRequests: 按需加载时候最大的并行请求数，默认为 5
-
maxInitialRequests: 一个入口最大的并行请求数，默认为 3
-
automaticNameDelimiter: 命名连接符
-
name: 拆分出来块的名字，默认由块名和 hash 值自动生成
-
cacheGroups: 缓存组。缓存组的属性除上面所有属性外，还有 test, priority, reuseExistingChunk
- test: 用于控制哪些模块被这个缓存组匹配到
- priority: 缓存组打包的先后优先级
- reuseExistingChunk: 如果当前代码块包含的模块已经有了，就不在产生一个新的代码块
https://github.com/xiaoping027/webpack4-react-redux-router-antd