1 安装node.js,使用npm或cnpm或yarn下载依赖包
我使用的是yarn配置的
下载yarn命令 npm i yarn -g
2 配置webpack及相关包
yarn add webpack webpack-dev webpack-dev-server
3 配置react及相关包
yarn add react react-dom -S
4 配置babel及相关包
yarn add babel-core babel-loader babel-plugin-transform-runtime
yarn add babel-preset-env babel-preset-stage-0
安装能够识别转换jsx语法的包
yarn add babel-preset-react
5 html-webpack-plugin安装
yarn add html-webpack-plugin
6 .babelrc文件的配置信息
{
"presets": [
"env",
"stage-0",
"react"
],
"plugins": [
"transform-runtime"
]
}
7 webpack.config.js文件的配置
const path = require('path')
const HtmlWebPackPlugin = require('html-webpack-plugin') // 导入 在内存中自动生成 index 页面的插件
// 创建一个插件的实例对象
const htmlPlugin = new HtmlWebPackPlugin({
template: path.join(__dirname, './src/index.html'), // 源文件
filename: 'index.html' // 生成的内存中首页的名称
})
// 向外暴露一个打包的配置对象; 因为 webpack 是基于Node构建的;所以 webpack 支持所有Node API 和语法
// webpack 默认只能打包处理 .js 后缀名类型的文件; 像 .png .vue 无法主动处理,所以要配置第三方的loader;
module.exports = {
mode: 'development', // development production
// 在 webpack 4.x 中,有一个很大的特性,就是 约定大于配置 约定,默认的打包入口路径是 src -> index.js
plugins: [
htmlPlugin
],
module: { // 所有第三方 模块的配置规则
rules: [ // 第三方匹配规则
{ test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/ }, // 千万别忘记添加 exclude 排除项
// 大家可以在 css-loader 之后,通过 ? 追加参数,
// 其中,有个固定的参数,叫做 modules , 表示为 普通的 CSS 样式表,启用模块化
{ test: /\.css$/, use: ['style-loader', 'css-loader'] }, // 打包处理 CSS 样式表的第三方loader
{ test: /\.ttf|woff|woff2|eot|svg$/, use: 'url-loader' }, // 打包处理 字体文件 的loader
{ test: /\.scss$/, use: ['style-loader', 'css-loader?modules&localIdentName=[path][name]-[local]-[hash:5]', 'sass-loader'] } // 打包处理 scss 文件的 loader
]
},
resolve: {
extensions: ['.js', '.jsx', '.json', '.vue'], // 表示,这几个文件的后缀名,可以省略不写
alias: { // 表示别名
'@': path.join(__dirname, './src') // 这样,@ 就表示 项目根目录中 src 的这一层路径
}
}
}
8 pacage.json添加一行启动命令
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --open --port 3000 --hot --host 127.0.0.1"
}
9.我部署中出现的问题 npm run dev 启动服务
这里提示信息很重要,提示babel-loader版本出现问题,需要重新安装版本,安装提示安装babel-loader版本
yarn add babel-loader@7.x
重新启动服务
=
服务启动正常,配置成功