Webpack + react的Hello World的搭建执行

最新推荐文章于 2024-09-30 14:16:02 发布

chuqi9740

最新推荐文章于 2024-09-30 14:16:02 发布

阅读量136

点赞数

文章标签： webpack javascript json ViewUI

原文链接：https://my.oschina.net/courage123/blog/860955

版权

万事都是在开头的时候比较难，中间的时候比较难，最后的时候最难，哈哈哈

开始第一项：进行node 的安装，直接访问node的官网然后下一步下一步直接下载完成https://nodejs.org/en/，不详细介绍了，安装node后，npm自然而然安装完成了。（弄得）

第二项，Window+R 中敲入cmd输入命令，将webpack全局安装成功

npm install webpack -g

第三项，创建项目以及相关的文件，除了package.json之外。注意webpack.config.js是在根目录下。

第四项：在项目的根路径下，cmd进入命令台，利用npm进行package.json的文件生成

npm init

{
  "name": "a",    //name不要重复，自己想
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "babel-loader": "^6.4.0",
    "babel-core": "^6.24.0",
    "react-dom": "^15.4.2",
    "babel-preset-es2015": "^6.24.0",
    "webpack": "^2.2.1",
    "babel-preset-react": "^6.23.0",
    "react": "^15.4.2",
    "webpack-dev-server": "^2.4.2"
  },
  "devDependencies": {
    "babel-loader": "^6.4.0",
    "babel-preset-es2015": "^6.24.0",
    "babel-preset-react": "^6.23.0",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "webpack": "^2.2.1",
    "webpack-dev-server": "^2.4.2"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "bundle": "babel-node tools/run bundle",
    "build": "webpack",
    "dev": "webpack-dev-server --devtool eval --progress --colors --content-base build"
  },
  "author": "",
  "license": "ISC"
}
 //有一些文件是在下面的配置中生成的，所以只是陈列在这里，不需要你与自己的文件进行比较

第五项：安装webpack，执行命令

npm install webpack --save-dev

然后安装webpack需要的加载器，执行命令：

npm install babel-loader babel-preset-es2015 babel-preset-react --save-dev

加载器这里应该是很重要的一步了，如果没有这几个加载器我们的jsx语法，和es2015语法就会报错（ps：网上很多教程都没有重点提及这几个加载器）

第六项：有了这几个重要的加载器来编译我们的代码之后，我们还要安装react模块，这样才能开发我们react应用。安装react输入如下命令：

npm install react react-dom --save-dev

第七项：我们开始配置webpack开发的webpack.config.js文件配置，通过配置这个文件我们告诉webpack如何编译我们的代码，大家可能发现了‘webpack/hot/dev-server‘这句话，没错这就是我们的webpack-dev-server，她允许我们可以把本地项目跑在像nginx那样的web服务器上，更重要的是我们可以在package.json文件内定义scripts，同时修改webpack的配置文件来达到类似BrowserSync（即文件修改能被监听，并自动刷新浏览器）的效果！

var path = require('path');
var webpack = require('webpack');
module.exports = {
    entry: ['webpack/hot/dev-server', path.resolve(__dirname, './app/main.js')],
    output: {
        path: path.resolve(__dirname, './build'),
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.js?$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel-loader',  //当时配置文件的时候设置的
                query: {
                    presets: ['es2015', 'react']
                }

            }
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ]
};

第八项：安装webpack-dev-server执行：

npm install webpack-dev-server --save-dev

第九项：在package.json文件中为scripts添加：

"scripts": {
  "build": "webpack",
  "dev": "webpack-dev-server --devtool eval --progress --colors --content-base build"
}

//这一段代码插入生成的package.json的文件中

写入的文件内容：

第十项：index.html中内容

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>React Project</title>
</head>
<body>
<script src="http://localhost:8080/webpack-dev-server.js"></script>
<div id="content"></div>
<script src="./bundle.js"></script><!--如果你把它注释掉，不好意思显示不出来了啊 -->
</body>
</html>

main.js,ES6的主要写法，建议去学一学

let React = require('react');
let ReactDOM = require('react-dom');
let AppComponent = require('./components/productBox.js');
ReactDOM.render(<AppComponent />, document.getElementById('content'));

main.js里我们引入了'./components/productBox.js'这个模块，productBox.js代码如下：

var React = require('react');
var ProductBox;
ProductBox = React.createClass({
    render: function () {
        return (
            <div className="productBox">
                hello react&es2015&webpack!
            </div>
        );
    }
});

module.exports = ProductBox;

代码开发完成后就要运行我们的项目了，在cmd中执行：