webpack参考文档:https://www.valentinog.com/blog/webpack-4-tutorial/
react:参考文档:https://reactjs.org/docs/add-react-to-a-new-app.html
es6参考文档:http://www.ruanyifeng.com/blog/2017/09/es6_primer_3rd_edition.html
let's start
一、安装运行环境:node.js
1、应用程序下载地址:https://nodejs.org/en/
node -v 查看node版本(我的V9.9.0V) ;npm -v我的版本(v5.7.1)
2、安装yarn 依赖包管理工具
npx install -g yarn
二、react应用程序
1、创建react简单应用
在命令行运行
np install -g create-react-app(可用于生成一个简单的react应用程序,需要安装在全局环境中)
create-react-app webpack-react(创建react projects 命名为webpack-react名字自定义)
文件结构如下:
2、运行react
cd webpack-react
yarn start //简单的react就克在浏览器中打开了
三、配置webpack
1、安装webpack依赖项,webpack运行需要的一些依赖项
npx install webpack webpack-cli webpack-dev-server --save-dev
2、安装es6转码器,es6的一些新语法特性旧版本的浏览器识别不了,需要通过转码器将其转换成es5语法。
3、配置转码文件,新建一个文件命名为.babelrc,内容如下:
{
“presets”:[
"react","env","stage-2"
]
}
3、配置webpack
根目录下新建目录webpack,在此目录下新建三个文件一个保存基础配置,一个用于开发环境配置,一个用于生产环境配置
4、配置webpack.base.config.js文件
const webpack = require('webpack'); const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin');//html插件,需要安装依赖项 npm install htmp-webpack-plugin --save-dev const MiniCssExtractPlugin = require("mini-css-extract-plugin");//压缩css文件 module.exports = { entry:{ main: path.join(__dirname,"../src/index.js"), //入口文件 common:['react','react-dom'] }, output:{ path:path.join(__dirname,"../build"),//出口文件 filename:"[name].js", }, resolve:{ extensions:['.js','.jsx','json','.css'], //需要编译的文件类型 }, performance: { hints: false }, module:{ rules:[ { test: /\.(js|jsx)?$/, exclude:/(node_modules)/, loader:'babel-loader' //jsx js转码配置 }, { test: /\.css$/, use:[MiniCssExtractPlugin.loader,'css-loader'], //css转码,需要安装依赖项css-loader },
{ test: /\.(scss|sass)$/, use: [ MiniCssExtractPlugin.loader, { loader: "css-loader" // translates CSS into CommonJS }, { loader: "sass-loader" // compiles Sass to CSS }] },{ test: /\.html$/, use:[ { loader: 'html-loader', options: { minimize: true} } ] }, { test: /\.(ico)$/, use: "raw-loader", //加载ico文件 }, { test: /\.(svg|png)$/, use: 'file-loader', //加载文件 } ] }, plugins:[ new HtmlWebpackPlugin({ filename: "index.html", template: path. join(__dirname, "../public/index.html") }), new MiniCssExtractPlugin({ filename: "[name].css", chunkFilename: "[id].css" }) ]}
5、配置webpack.dev.config.js文件
const webpack = require("webpack"); const path = require("path"); const merge = require("webpack-merge");//文件合并 const webpackConfigBase = require("./webpack.base.config"); const openBrowserPlugin = require('open-browser-webpack-plugin');//在浏览器中打开程序 const webpackConfigDev = { mode:'development', plugins:[ // new openBrowserPlugin({url:"http://localhost:8080"}) ], devServer:{ contentBase: path.join(__dirname,"../public"), hot: true, host:'0.0.0.0', inline: true, port: 8080, } } module.exports = merge(webpackConfigBase, webpackConfigDev);
6、配置webpack.prod.config.js文件
const webpack = require("webpack"); const path = require("path"); const webpackConfigBase = require("./webpack.base.config"); const CleanWebpackPlugin = require("clean-webpack-plugin"); const merge = require("webpack-merge"); const webpackConfigProd = { mode: "production", plugins:[ new CleanWebpackPlugin(["build"],{ root: path.join(__dirname,"../") }) ] }; module.exports = merge(webpackConfigBase, webpackConfigProd);
//webpack中用到的一些插件以及转码器需要自己安装
7、配置package.json文件
"name": "react-app", "version": "0.1.0", "private": true, "dependencies": { "antd": "^3.4.0", "node-sass": "^4.8.3", "react": "^16.2.0", "react-dom": "^16.2.0", "react-scripts": "1.1.1", "remove": "^0.1.5", "url-loader": "^1.0.1" }, "scripts": { "start": "webpack-dev-server --hot --inline --color --hot --config ./webpack/webpack.dev.config.js", "build": "webpack --config ./webpack/webpack.prod.config.js", "eject": "react-scripts eject" }, "devDependencies": { "babel-core": "^6.26.0", "babel-loader": "^7.1.4", "babel-plugin-import": "^1.6.7", "babel-preset-env": "^1.6.1", "babel-preset-react": "^6.24.1", "babel-preset-stage-2": "^6.24.1", "clean-webpack-plugin": "^0.1.19", "css-loader": "^0.28.11", "extract-text-webpack-plugin": "^4.0.0-beta.0", "file-loader": "^1.1.11", "html-loader": "^0.5.5", "html-webpack-plugin": "^3.0.6", "mini-css-extract-plugin": "^0.2.0", "open-browser-webpack-plugin": "^0.0.5", "raw-loader": "^0.5.1", "sass-loader": "^6.0.7", "webpack": "^4.2.0", "webpack-cli": "^2.0.13", "webpack-dev-server": "^3.1.1", "webpack-merge": "^4.1.2" } }
8、运行环境,执行npm start /npm build就可以运行webpack程序啦
代码请查看我得github:https://github.com/xiaoyaoyao/webpack-react
//周末木有睡懒觉写的噢噢,记得点赞!