webpack搭建react项目

Posted fengnovo

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了webpack搭建react项目相关的知识，希望对你有一定的参考价值。

遥看套路挖掘机，不见当年老司机。this is a boilerplate

1.新建一个项目目录文件夹，暂且叫seed

cd seed
npm init

然后一直回车，最后yes，最终生成一个package.json文件

2.新建以下

  • src 　　文件夹用于存放js，css，img等源码和引用的静态文件
  • .babelrc　　　　babel编译器配置文件
  • favicon.ico  　　浏览器默认读取的一个icon
  • index.html　　  入口首页
  • webpack.config.js  webpack配置文件

3.用npm安装npm包

npm install webpack webpack-dev-server --save-dev
webpack和webpack-dev-server是打包工具和辅助开发的服务器，该服务器能热加载代码，自动刷新页面，代理服务器解决前端开发时跨域问题
见http://www.cnblogs.com/fengnovo/p/5983638.html
npm install babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-0 --save-dev

这几个是babel编译器的npm包。

npm install css-loader postcss-loader style-loader --save-dev

webpack需要处理样式文件打包的处理器

npm install react react-dom --save

react项目的两个基础npm包

再在package.json里的scripts对应的key里增加一句 "start": "webpack-dev-server --port=3000 --inline --host 0.0.0.0 --colors --hot",
这样，就可以在命令行用npm start启动一个开发服务器并实时热更新开发时的代码。

"scripts": {
    "start": "webpack-dev-server --port=3000 --inline --host 0.0.0.0 --colors --hot",
    "test": "echo \\"Error: no test specified\\" && exit 1"
  },

4.webpack.config.js配置，直接上代码

module.exports = {
    entry: __dirname+\'/src/main.js\',　　//指明编译开始的入口
    output: {
        path: __dirname+\'/bundle.js\'　　//指明编译好的文件所在目录
    },
    module: {　　　　　　　　　　　　　　　　//webpack处理器模块，要处理什么就加什么处理器即loader
        loaders:[
            {
                test: /\\.js$/,
                exclude: /node_modules/,
                loader: \'babel\'　　　　　　//babel处理器，处理jsx/es6/es7
            },{
                test: /\\.css$/, 　　　　　　
                exclude: /node_modules/,
                loader: \'style-loader!css-loader\'　　//处理css，style样式
            }
        ]
    },
    solove: [
        \'\',\'.js\',\'.jsx\'　　　　　　　　//import时文件不写后缀，可以自动查找.jsx和.js后缀文件
    ],
    devServer: {　　　　　　　　　　　　//webpack-dev-server配置，与webpack-dev-server --port=3000 --inline --host 0.0.0.0 --colors --hot相辉映
        contentBase: \'./\',
        colors: true,
        inline: true,
        historyApiFallback: true
    }
}

 

5.配置完webpack，里面的babel只是告知webpack用babel处理js，但是还要配置babel处理哪些文件格式，直接上代码

{
    "presets": [
        "react",
        "es2015",
        "stage-0"
    ]
}

6.inde.html

<!DOCTYPE html>
<html>
<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>novo Music</title>
</head>
<body>
    <div id="app"></div>
    <script src="./bundle.js"></script>
</body>
</html>

　./bundle.js就是webpack.config.js里面配置的输出文件路径，然后被index.html引入

7.需要在src目录下新建一个main.js作为webpack.config.js配置里面所提到的入口编译文件

import React from \'react\';
import ReactDOM from \'react-dom\';

ReactDOM.render(
    <div>Hello World</div>, document.getElementById(\'app\')
)

 

boilerplate套路这就样

项目所在github：https://github.com/fengnovo/diary/tree/master/seed

 

以上是关于webpack搭建react项目的主要内容，如果未能解决你的问题，请参考以下文章

新手搭建 ts + react + webpack 项目

react+webpack+ES6搭建项目

react+webpack快速搭建web项目

基于webpack的React项目搭建

使用webpack搭建react项目 webpack-react-project

webpack5项目搭建React-Cli(配置合并)