webpack+react开发环境搭建
Posted txwslyf
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了webpack+react开发环境搭建相关的知识，希望对你有一定的参考价值。
一、安装Node.js
Node.js可以直接从官网下载，按照默认的安装方式安装即可。
二、安装webpack
Webpack可以使用npm安装，新建一个空的练习文件夹，在终端中转到该文件夹后执行下述指令就可以完成安装。
//全局安装 npm install -g webpack //安装到你的项目目录 npm install --save-dev webpack
三、安装webpack-dev-server
//全局安装 npm install -g webpack-dev-server //安装到你的项目目录 npm install --save-dev webpack-dev-server
四、生成package.json文件
//生成初始的package.json文件 npm init -y
在项目文件夹中新建两个文件夹：app和build,分别存放着main.js和index.html
//package.json { "name": "tic-tac-toe", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack",//把npm的build命令指向webpack命令 "start": "webpack-dev-server --inline --hot" }, "keywords": [], "author": "", "license": "ISC" }
//index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hacker News Front Page</title> </head> <body> <div id="root"></div> <script src="http://localhost:8080/bundle.js"></script>//注意src属性 </body> </html>
五、新建webpack.config.js文件
在项目目录下新建一个webpack.config.js文件，内容如下：
module.exports = { entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件 output: { path: __dirname + "/build",//打包后的文件存放的地方 filename: "bundle.js"//打包后输出文件的文件名 } }
六、Loaders
1.JSON
//安装可以装换JSON的loader npm install --save-dev json-loader
2.Babel
// npm一次性安装多个依赖模块，模块之间用空格隔开 npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react
3.react
npm install --save react react-dom
4.css
//安装 npm install --save-dev style-loader css-loader
最终的webpack.config.js文件：
//webpack.config.js module.exports = { devtool: ‘eval-source-map‘, entry: __dirname + "/app/main.js", output: { path: __dirname + "/build", filename: "bundle.js" }, module: { loaders: [ { test: /\.json$/, loader: "json-loader" }, { test: /\.jsx?$/, exclude: /node_modules/, loader: ‘babel-loader‘, query: { presets: [‘es2015‘,‘react‘] } }, { test: /\.css$/, loader: ‘style-loader!css-loader‘//添加对样式表的处理 } ] }, devServer: {...} }
七、遇到的问题
1.--save-dev和--save的区别
--save-dev是只会在开发时用到的依赖，-save是项目上线后也需要用到的依赖。
以上是关于webpack+react开发环境搭建的主要内容，如果未能解决你的问题，请参考以下文章
webpack系列从零搭建 webpack4+react 脚手架