- 初始化 npm 项目
npm init -y- 安装 webpack 依赖
npm install webpack webpack-cli -D- 编写 webpack 配置文件
module.exports = {
entry: {
app: path.resolve(ROOTPATH, 'src/index.js')
},
output: {
filename: 'js/[name].js',
path: path.resolve(ROOTPATH, 'dist')
}
};- 在 package.json 中编写 npm 命令
windows 不支持 NODE_ENV=development 的设置方式。 所以先安装 cross-env
npm install cross-env -D// pacakge.json
...
"scripts": {
"build": "cross-env NODE_ENV=production webpack --config ./scripts/config/webpack.common.js"
},
...- js 转为低版本代码
babel
-
安装 babel-loader
npm install babel-loader -D- 还需要一些配置
npm install @babel/core @babel/preset-env @babel/preset-react @babel/preset-typescript @babel/plugin-transform-runtime -D
npm install @babel/runtime @babel/runtime-corejs3- 在根目录创建
.babelrc配置文件
- 使用 HtmlWebpackPlugin 解析 html 文件
安装
npm install html-webpack-plugin -D
通过 HtmlWebpackPlugin 插件的 config 属性能够设置 html 内数据。
7. 添加本地服务器
安装
```shell
npm install webpack-dev-server -D
修改运行命令
"dev": "cross-env NODE_ENV=production webpack-dev-server --config ./scripts/config/webpack.dev.js",使用 webpack.dev.js 保存开发配置，使用 webpack-merge 合并基础配置
- devtool
devtool用于方便开发调试代码。
这里在 webpack.dev.js 中配置devtool为cheap-module-eval-source-map，可定位到行。
devtool 说明: https://www.cnblogs.com/tugenhua0707/p/9464984.html
- 样式文件支持
安装依赖，然后配置 loader
npm install style-loader sass-loader css-loader postcss-loader autoprefixer node-sass -D-
url-loader 解决图片文字引入问题
-
每次打包前清空 dist 目录 (clean-webpack-plugin)
-
拷贝 public 下静态文件（copy-webpack-plugin）
- 一些插件介绍
eslint-config-airbnb官方说明，如果要开启 React Hooks 的检查，需要在 extends 中添加一项airbnb/hooks；@typescript-eslint/eslint-plugin官方说明，在 extends 中添加plugin:@typescript-eslint/recommended可开启针对 ts 语法推荐的规则定义；eslint-config-prettier解决 ESLint 和 Prettier 的规范冲突；eslint-plugin-promise书写 Promise 语法的最佳实践；eslint-plugin-unicorn提供了很多有用的配置项，例如规范文件命名等。
- 注意事项
- 配置
.eslintignore文件来忽略 TS 对一些文件或文件夹的检查。
- 一些插件介绍
stylelint-config-rational-order用于对 CSS 属性进行排序，越懂规范的就越容易阅读；stylelint-declaration-block-no-ignored-properties提示书写样式的矛盾，比如重复的样式，或者无效的样式；stylelint-config-prettier解决 stylelint 和 Prettier 的规范冲突。
- 一些插件介绍
lint-staged用于对 git 缓存区最新改动的代码进行格式化以及 lint 检查；husky提供一些 git 提交代码时的钩子；@commitlint/config-conventional规范提交注释。conventional-changelog-cli命令生成提交记录文件。
- 注意事项
- 插件安装完成后在
package.json文件中进行对应的配置。
模板中使用 CDN 加载了 react 和 react-dom，在普通的项目模板中这样使用 CDN 没有问题，但是如果需要发布到npm以供别人使用，就不能使用这样的方式，因为当其他人执行npm install后这种方式会确实 react 和 react-dom 这两个依赖；一定要注意！
webpack-merge合并 webpack 配置文件，方便简化 dev 和 prod 配置；cross-env跨平台设置，使用环境变量；比如 Mac 电脑上使用export NODE_ENV=development，而 Windows 电脑上使用的是set NODE_ENV=development；安装完成之后在package.json文件中修改对应 scripts 即可；webpack-dev-server在本地起一个 http 服务，通过简单的配置可指定其端口、热更新的开启等；html-webpack-plugin将打包后的 js 文件自动引进 html 文件中；clean-webpack-plugin打包前清理上一次的文件；css-loader解析 .css 结尾的文件，以及@import等语句；style-loader将解析后的 css 文件生成style标签并放到head标签内；node-sasssass-loader解析 .scss 文件为 css 文件；postcss-flexbugs-fixes修复和 flex 布局相关的 Bug；postcss-preset-env将最新的 CSS 语法转换为目标环境的浏览器能够理解的 CSS 语法，开发者不用考虑浏览器兼容问题；同时使用autoprefixer来添加浏览器头；postcss-normalize从 browserslist 中自动导入所需要的 normalize.css 内容；file-loaderurl-loader处理本地资源文件，比如图片、字体等；@babel/preset-react转译 jsx 语法；@babel/preset-typescript编译 TS，直接去掉类型声明后用其他 babel 插件进行编译；eslint-import-resolver-typescript引入文件使用简化路径别名的插件；@babel/preset-env根据设置的目标浏览器环境（browserslist）找出所需的插件去转译 ES6+ 语法；@babel/plugin-transform-runtime提供 ES 新 API 的垫片，可实现按需加载，并且不会污染原型链；@babel/runtime-corejs3为上面的插件提供所需的垫片，该插件需要在 prod 下安装；copy-webpack-plugin打包时把 public 文件夹下的静态资源复制到我们打包后生成的 dist 目录中；webpackbar显示编译/打包的进度；fork-ts-checker-webpack-plugin避免 babel 暴力编译 ts 可能会造成的 Bug；hard-source-webpack-plugin提供了一个中间缓存，放到项目 node_modules/.cache/hard-source 下大大提高二次编译速度；mini-css-extract-plugincss 样式拆分，抽离公共代码；purgecss-webpack-plugin去除无用的 css 代码；node-glob路径查找利器，帮助上面的插件找到无用 css 代码的路径；terser-webpack-pluginwebpack 内置的 JS 代码压缩工具，需要其他配置时需单独下载；optimize-css-assets-webpack-plugin压缩 css 代码；webpack-bundle-analyzer打包分析器；