环境配置
- install npm node
https://www.npmjs.com/get-npm
2 install cnpm webpack webpack-cli 等基础工具
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install --global webpack webpack-cli
- 初始化项目
-
npm init -y# 快速初始化项目 - 在项目根目录创建
src源代码目录和dist产品目录 - 在
src目录下创建index.html - 安装 cnpm 安装
webpackcnmp install webpack webpack-cli -d当前目录- 全局安装
npm install cnpm -g
- 全局安装
- webpack 4.x 提供约定大约配置的概念, 就是约定大约配置, 默认的打包配置文件入口是
src/index.js, 输出是dist/main.js
目录结构:
image.png
- webpack.config.js 配置
module.exports = {
mode: 'development', # development 不压缩，product 压缩
// 在 webpack 4.x 有一个很大的特性, 就是约定大约配置, 默认的打包配置文件入口是 index.js
}
- react 将
index.html生成到内存中
cnpm install html-webpack-plugin
# edit webpack.config.js
const path = require('path')
const HtmlWebPackPlugin = require('html-webpack-plugin')
const htmlPlugin = new HtmlWebPackPlugin({
template: path.join(__dirname, './src/index.html'), // 源文件
filename: 'index.html', // 目标文件
})
module.exports = {
mode: 'development',
// 在 webpack 4.x 有一个很大的特性, 就是约定大约配置, 默认的打包配置文件入口是 index.js
plugins: [
htmlPlugin
]
}
- 在项目中使用 react
- 运行
cnpm install react react-dom- react: 专门用于创建组件和虚拟 DOM
- react-dom: 专门进行 DOM 操作
- 启用 JSX 语法
可以在 js 中直接写 html 标记，会被 babel 转换为 react 的 API 语法
cnpm install babel-loader@7 babel-loader babel-plugin-transform-runtime -D
cnpm install babel-preset-env babel-preset-stage-0 -D
cnpm install babel-preset-react -D
添加配置文件 .babelrc
{
"presets": ["env", "stage-0", "react"],
"plugins": ["transform-runtime"]
}
edit webpack.config.js
module: { // 有所第三方模块的配置规则
rules: [
{test: /\.js|jsx$/, use: 'babel-loader', exclude: path.resolve(__dirname, "node_modules")},
]
}
- 配置实时打包编译
cnpm install -d webpack-server-dev
# edit package.json 在 script 添加
"dev": "webpack-dev-server --port 3000"
- 配置 导入包名使用 @ 替换 '.'
# edit webpack.config.js
resolve: {
extensions: [".js", ".jsx", ".json"], // 配置后缀名省略
alias: {
'@': path.join(__dirname, './src') // 配置 webpack 根目录
}
}
