react之webpack

1. 下载相关模块包
  * 创建package.json
    ```
     npm init
    ```
  * react相关库 package-lock.json
    ```
    npm install react react-dom --save
    ```
  * babel相关库
    ```
    npm install babel-core babel-preset-es2015 babel-preset-react --save-dev
    ```
  * webpack相关库
       ```
       npm install webpack babel-loader --save-dev
       npm install webpack-dev-server
       ```
2. webpack配置文件: webpack.config.js
     ```
     const path = require('path'); //path内置的模块，用来设置路径。

     module.exports = {
       entry: './src/main.js',   // 入口文件
       output: {                     // 输出配置
         filename: 'bundle.js',      // 输出文件名
         path: path.resolve(__dirname, 'dist')   //输出文件路径配置
       },
        module: {
           rules: [
             {
               test: /\.css$/,
               use: [
                 'style-loader',
                 'css-loader'
               ]
             },
             //babel处理js
             {
               test: /\.js$/,
               exclude: /node_modules/, //排除此文件夹
               use: [
               'babel-loader'
               ]
             }

           ]
         }    

     };

     ```
3. babel配置文件: .babelrc   ---运行时控制文件
     ```
     {
       "presets": ["es2015", "react"]
     }
     ```
4. 编码
  * src/js/App.js: 应用组件

       ```
       import React from 'react'
       export default function App() {  //暴露组件都得使用默认暴露
         return <h1>Hello React Client Component</h1>
       }
       ```
  * src/js/main.js: 入口js

       ```
       import React from 'react'
       import ReactDOM from 'react-dom'
       import App from './App'

       //渲染组件标签到页面元素
       ReactDOM.render(<App />, document.getElementById('demo'))
       ```
5. 下载css加载器
       ```
       npm install style-loader css-loader --save-dev

       创建css文件  src/css/test.css

       body{
           background : red
       }
       ```
6. 配置webpack-dev-server    ##热加载
    ````
    devServer:{
        contentBase: './',//内置服务器动态加载页面所在的目录
    }
    ``
7. 执行命令
    ```
    构建任务：webpack
    热加载任务： webpack-dev-server
    ```

8. package.json: 添加编译/运行脚本
     ```
     "scripts": {
       "start": "webpack-dev-server",
       "build": "webpack"
     }
     ```

webpack-dev-server 默认是根路径下的index.html

在webpack.config.js中：
devServer:{
    contentBase: './',//内置服务器动态加载页面所在的目录
    historyApiFallback:true,//不跳转
    inline:true
}

巴特西

react之webpack

最新文章

热门文章