使用webpack 手动创建新react项目

来源：互联网发布：乌鸦森林之谜3mac 编辑：程序博客网时间：2024/06/04 23:53

虽然，react官方给的创建新项目的方式很简单。直接create-react-app my-app 就能自动生成一个react项目，当然如果你用这种方式遇到npm 4048 的错误，恭喜中奖了。不得不说用win搞开发有点痛苦，各种问题。4048的错误解决方案是创建一个新用户，开发各种权限。4048就是权限的问题。为啥要手动创新呢，因为还需要用到各种插件和配置，所以，我就总结一下，以作记录。

一：创建一个新的项目文件夹，在新文件夹使用shift + 右键选择在此处打开shell窗口，执行命令：npm init

初始化时有提示设置，基本上直接回车就全部解决了，创建完以后文件夹多一个package.json，说明创建成功。

二：先安装4个一个包，执行命令：npm install --save react react-dom babelify babel-preset-react

安装完成后，在package.json查看一下是否成功。如图

三：继续安装依赖：执行命令: npm install --save babel-preset-es2015

也就是对es2015的支持插件。

四：手动创建一个inex.html 一个src文件夹，一个webpack.config.js 在src文件夹创建js文件夹在这里创建一个index.js.

index.html 的内容：

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <meta http-equiv="X-UA-Compatible" content="ie=edge">  <title>my react webpack</title></head><body> <div id="root">555</div> <script type="text/javascript" src="./src/bundle.js"></script></body></html>

webpack.config.js 的内容如下：

var debug = process.env.NODE_ENV !== "production";var webpack = require('webpack');var path = require('path');module.exports = {  context: __dirname,  entry: "./src/js/index.js",  module: {    loaders: [        {          test: /\.js?$/,          exclude: /(node_modules)/,          loader: 'babel-loader',          query: {            presets: ['react', 'es2015']          }        }      ]  },  output: {    path: __dirname,    filename: "./src/bundle.js"  }};

index.js 的内容如下：

var React = require('react'); var ReactDOM = require('react-dom');ReactDOM.render(<div>  <h1>Hello, world!005555222</h1>  </div>,  document.getElementById('root'));

五：全局安装webpack和server执行命令： npm install -g webpack 和 npm install -g webpack-dev-server .
执行完记得到pack.json 里面查看一下。

六：在项目里面安装webpack 和server :执行命令： npm install --save webpack 和 npm install --save webpack-dev-server . 这两个命令执行完后再执行一个：npm install --save babel-loader

七：执行命令：webpack 编译完成后会在src文件夹多一个bundle.js 再执行一个热加载：webpack --watch

这就是只要你的文档发送变化，webpack就会重新编译，浏览器就会自动刷新了。

八：在项目文档里面再打开一个shell窗口，不要关闭上一个执行了热加载的命令窗口。

在新shell执行命令：webpack-dev-server 成功以后看到这个

OK 就这样创建完了。虽然麻烦，但是，自己就可以单独配置各种插件了，比如css模块化，等。。。

阅读全文

1 0