从0搭建前端项目架构-第一篇-webpack配置这个系列文章最终要基于react+node+webpack写一个cnod

这个系列文章最终要基于react+node+webpack写一个cnode社区，支持注册登陆，发表文章等等功能。

项目搭建

1.首先创建一个项目文件夹：cnode_react，并进入项目根目录。

    mkdir cnode_react
    cd cnode_react

2.使用npm构建项目

    npm init -y

构建webpack基础配置

1.安装webpack,react（已经安装过的就不需要安装了）

    npm install webpack
    npm install react

2.在根目录下新建build文件夹，build文件夹会放一些webpack等一些配置文件

3.在根目录下新建client文件夹，client文件夹放前端的文件。

4.在client目录下新建app.js，作为整个应用的入口。同时新建App.jsx，在App.jsx里面会声明html等一些内容。

5.在build目录下创建webpack.config.client.js，进行webpack配置。

    cd build
    touch webpack.config.client.js

6.在webpack中配置项目打包的入口和出口文件。

entry代表打包的入口文件，这里就是指定到app.js
output代表打包后的出口文件。
- filename：打包后的文件名，采用[name].[hash].js。[name]是项目的入口文件名，就是app，[hash]是hash串。采用hash写法，当项目中的代码改变了，会改变hash值，就会刷新浏览器的缓存。如果没有改动，就不会刷新缓存，达到使用缓存的效果。
- path：最终打包到dist目录下
- publicPath：这个配置是指定打包后的文件存放到指定的路径下，就是/public/[name].[hash].js。如果不指定，则是[name].[hash].js。可以作为静态文件和api的区分。

    cont path = require('path')
    module.exports = {
        entry: {
            app: path.join(__dirname,'../client/app.js')
        },
        output: {
            filename: '[name].[hash].js',
            path: path.join(__dirname,'../dist'),
            publicPath: ''
        }
    }

7.为了每次打包方便，在package.json里的scripts下写一条build命令，以后打包只需要执行npm run build就行。打包后就会生成一个dist文件夹。

    "build:client": "webpack --config build/webpack.config.client.js"

8.先写一个简单的react代码

安装react-dom

  npm install react react-dom -S

在App.jsx里面写一段react代码

  import React from 'react';
  
  export default class App extends React.Component {
      render(){
          return (
              <div>this is app</div>
          )
      }
  }

在app.js里面引入App.jsx

  import React from 'react';
  import ReactDom from 'react-dom';
  import App from './App.jsx';
  
  ReactDom.render(<App />,document.body)

9.因为不能识别jsx代码，所以需要在webpack中配置使其能够识别jsx代码。

js不需要babel不需要识别。

   ...省略以上配置
   module: {
       rules: [
           {
               test: /.(jsx | js)$/,
               loader: 'babel-loader'
           },
           {
               test: /.js$/,
               loader: 'babel-loader',
               exclude: [
                   path.join(__dirname,'../node_modules')
               ]
           }
       ]
   }

10.因为在webpack中使用了babel-loader，需要安装下，同时需要安装babel-core。

   npm install babel-loader@^7.1.2 babel-core@^6.26.0 -D

11.由于需要识别babel，所以需要同时配置babel文件。这里安装指定的babel等包。在根目录下创建.babelrc文件

安装preset相关包

     npm i babel-preset-es2015 babel-preset-es2015-loose babel-preset-react -D

在.babelrc文件中写配置

```
    {
        "presets": [
            ["es2015", {"loose":true}],
            "react"
        ]
    }
```

12.现在基础的webpack配置好了，执行npm run build就可以打包jsx代码了。

13.为了打包后直接生成html文件，需要安装html-webpack-plugin，并配置。

    npm install html-webpacl-plugin -D

    const HTMLPlugin = require('html-webapck-plugin')
    ...以上webpack配置省略
    plugins:[
        new HTMlPlugin()
    ]