从零搭建react16开发环境（一）——准备

项目准备

安装node,新建demo文件夹作为项目目录，在文件夹下执行 npm init 创建 package.json。

package.json会包含的项目描述，版本号，作者，项目地址等等，可一直回车，也可随意发挥。

安装webpack

打开命令行输入npm install --save-dev webpack webpack-cli

webpack配置

在项目目录下新建build文件夹，在该文件夹下新建webpack.base.conf.js(基础配置)、webpack.dev.conf.js（开发配置）、webpack.prod.conf.js（生产配置）。

一般来说，基础配置作为公用部分可合并到开发配置或生产配置当中，可以使用webpack-merge来进行合并。

安装webpack-merge：npm install --save-dev webpack-merge

在webpack.base.conf.js写入

// webpack.base.conf.js
const path = require('path');
const DIST_PATH = path.resolve(__dirname, '../dist'); //生产目录
const APP_PATH = path.resolve(__dirname, '../src'); //源文件目录
module.exports = {
    entry: {
        app: './src/index.js',   //入口文件
    },
    output: {
        filename: 'js/[name].[hash].js',
        path: DIST_PATH
    },
}

在 webpack.prod.conf.js 写入

// webpack.prod.conf.js
const merge = require('webpack-merge'); //合并
const baseWebpackConfig = require('./webpack.base.conf');
module.exports = merge(baseWebpackConfig, {
    mode: 'production',  //webpack4新增mode，"production" | "development" | "none"
});

在根目录下新建src文件夹，再到该文件夹下新建index.js作为入口文件。
根目录下新建index.html
当前目录结构

image