npm和webpack搭建react开发环境

共计 1.3k 字，约需阅读 4.73 分钟

npm环境搭建

  • nodejs安装参考Nnodejs官网
  • 安装完毕后用npm --version查看nodejs是否安装成功

工程初始化

  • 用npm init初始化工程，在根目录产生一个package.json文件

webpack安装

  • 用npm install webpack webpack-cli webpack-dev-server webpack-merge安装webpack和其相关的包，安装完毕后会在package.json文件的dependencies选项中看到刚刚安装的包

react安装

  • 用npm install react react-dom安装react和其相关的包，安装完毕后会在package.json文件的dependencies选项中看到刚刚安装的包
  • 由于react使用ES6语法大多数无法支持，所以还需用npm install babel babel-core babel-loader babel-preset-env babel-preset-es2015 babel-preset-react安装babel和其相关的包把ES6语法转化，安装完毕后会在package.json文件的dependencies选项中看到刚刚安装的包
  • 由于react使用ES6语法大多数无法在class中支持箭头，所以还需用npm install babel-preset-stage-0 babel-plugin-transform-class-properties安装相关的包把语法转化，安装完毕后会在package.json文件的dependencies选项中看到刚刚安装的包

hello word的实现

  • 用npm install uglifyjs-webpack-plugin html-webpack-plugin clean-webpack-plugin安装其它依赖包
  • 在根目录下新建webpack.config.js文件作为webpack的基础通用配置，配置文件如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');

module.exports = {
  entry: './src/index.js',
  plugins: [
    new CleanWebpackPlugin(['dist']), // 清理数据
    new HtmlWebpackPlugin({ // 自动打包数据
      title: '测试',
      template: './src/index.html', // html文件模板
    }),
  ],
  output: {
    filename: '[name].[hash].bundle.js', // 输出文件名称
    path: path.resolve(__dirname, 'dist') // 输出文件路径
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/, //配置要处理的文件格式，一般使用正则表达式匹配
        use: ['babel-loader'], //使用的加载器名称
        exclude: /node_modules/
      }
    ],
  }
};
  • 在根目录下新建webpack.dev.js文件作为webpack的开发者模式配置，配置文件如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const merge = require('webpack-merge');
const webpack = require('webpack');
const config = require('./webpack.config.js');

module.exports = merge(config, {
  devtool: 'inline-source-map', // 开发工具
  plugins: [
    new webpack.HotModuleReplacementPlugin(), // 热替换
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('development') // 定义开发者模式
    })
  ],
  devServer: { // 开发模式下服务器配置
    contentBase: './dist', // 编译后文件路径
    hot: true, // 是否开启热替换
    host: 'localhost' // 主机
  }
});
  • 在根目录下新建webpack.prod.js文件作为webpack的生产环境配置，配置文件如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const webpack = require('webpack');
const merge = require('webpack-merge');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');// 精简输出
const config = require('./webpack.config.js');

module.exports = merge(config, {
  plugins: [
    new UglifyJSPlugin({
      sourceMap: true // 调试
    }),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production') // 定义生产模式
    })
  ]
});
  • 在根目录下新建.babelrc文件作为react的开发环境下babel的配置，配置文件如下：
1
2
3
4
5
6
7
8
{
  "presets": [
    "react",
    "stage-0",
    "es2015"
  ]，
  "plugins": ["transform-class-properties"]
}
  • 在根目录下的packge.json中加入命令，配置文件如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
{
  "name": "react-exercise",
  "version": "0.0.0",
  "description": "react exercise",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Project completed\"",
    "build": "webpack --config webpack.prod.js",
    "start": "webpack-dev-server --open --config webpack.dev.js"
  },
  "keywords": [
    "react-exercise"
  ],
  "author": "xxx",
  "license": "ISC",
  "dependencies": {
    "babel": "^6.23.0",
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-preset-env": "^1.6.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "clean-webpack-plugin": "^0.1.19",
    "html-webpack-plugin": "^3.0.6",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "uglifyjs-webpack-plugin": "^1.2.3",
    "webpack": "^4.1.1",
    "webpack-cli": "^2.0.12",
    "webpack-dev-server": "^3.1.1",
    "webpack-merge": "^4.1.2"
  }
}

  • 在根目录下新建src文件夹，并在文件夹下新建index.js，index.html，componentTest.js文件

    • index.js是webpack的入口文件，文件内容如下：
      1
      2
      3
      4
      5
      6
      7
      import React, { Component } from 'react';
      import ReactDOM from 'react-dom';
      import ComponentTest from './componentTest';
      ReactDOM.render(
          <ComponentTest />,
          document.getElementById('root')
      );
    • index.html是webpack的打包模板文件，文件内容如下：
      1
      2
      3
      4
      5
      6
      7
      8
      9
      <!doctype html>
      <html>
        <head>
          <title>Getting Started</title>
        </head>
        <body>
          <div id="root"></div>
        </body>
      </html>
    • componentTest.js是react的一个组件，文件内容如下：
      1
      2
      3
      4
      5
      import React from 'react';
      const componentTest = () => (
        <h1>hello react</h1>
      );
      export default componentTest;

  • 在命令行中输入npm start即可运行项目，在打开的http://localhost:8080/网页中看到输出的hello react

总结

  • 文件目录结构
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    |---src
    |   |---index.html(html模板文件)
    |   |---index.js(webpack入口文件)
    |   |---componentTest.js(React测试组件文件)
    |---.babelrc(babel配置文件)
    |---package-lock.json(自动生成的文件)
    |---package.json(依赖包文件)
    |---webpack.config.js(webpack公共配置文件)
    |---webpack.dev.js(开发环境下的webpack配置文件)
    |---webpack.prod.js(生产环境下的webpack配置文件)