react 中 webpack的使用

2019-03-14 本文已影响0人 Arale_zh

创建webpack.json文件

注意：不能存在中文路径
```
  $ npm init
```

安装react相关库

```
  $ npm install react react-dom --save
```

安装bable相关库

注意：babel-core@6 对应babel-loader@7，7对应8否则运行报错

  $ npm install babel-core babel-preset-es2015 babel-preset-react babel-loader@7 --save-dev

安装webpack相关库

  $ npm install webpack -g
  $ npm install webpack-dev-server -g

安装css下载器相关库

   $ cnpm install style-loader css-loader --save-dev

src下创建css文件夹，新建css文件
```
body{
      background : red
  }
```

webpack的配置文件webpack.config.js

  const path = require('path'); //path内置的模块，用来设置路径。

  module.exports = {
      entry: './src/js/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'
                  ]
              }
  
          ]
      },
      devServer:{ contentBase: './'} ,//热部署配置，两个必要条件，根目录寻找，必须index文件
  };

babel配置文件.babelrc

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

编码结构

根目录下建src,src下建js,js里必要的main.js主文件入口

src/js/App.js: 应用组件

import React from "react"
class App extends React.Component{
    render(){
        return <h1>sdfd</h1>
    }
}

// 暴露组件，方便引用
export  default App

src/js/main.js: 入口js

import React from "react"
import ReactDOM from "react-dom"
import App from "./App"

import "../css/test.css"

ReactDOM.render(<App />, document.getElementById("wrap"));

根目录下新建index.html

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>Title</title>
  </head>
  <body>
  <div id="wrap">
  
  </div>
  <script src="dist/bundle.js"></script>
  </body>
  </html>

启动命令

   $ webpack // 打包模块
   $ webpack-dev-server // 热加载

如果不想记启动命令

webpack.json中配置

  "scripts": {
    "start": "webpack-dev-server",
    "build": "webpack"
  }

启动方式

   $ npm run start/build

react 中 webpack的使用

猜你喜欢

热点阅读