环境主要依赖版本

• webpack@4.8.1
• webpack-cli@2.1.3
• webpack-dev-server@3.1.4
• react@16.3.2
• babel-core@6.26.3
• babel-preset-env@1.6.1
• bable-preset-react@6.24.1

webpack安装及配置

1. 起步

新建项目目录，初始化npm，新建开发源目录

mkdir webpack-react && cd webpack-react
npm init -y
mkdir src

2.webpack-cli

webpack从4.x版本开始，需要同时安装webpack，webpack-cli(此工具用于在命令行中运行webpack)。

npm install webpack webpack-cli --save-dev

3.wepback配置文件

在项目根目录新建webpack.config.js文件，此文件为webpack运行核心文件。

webpack.config.js 基本配置

// webpack.config.js
const path = require('path');

module.exports = {
    entry: './src/index.js',                           // 入口文件
    output: {                                             // webpack打包后出口文件
        filename: 'app.js',                             // 打包后js文件名称
        path: path.resolve(__dirname, 'dist')    // 打包后自动输出目录
    }
}

"scripts": {
    "build": "webpack"
}

npm run build
// webpack打包后的项目
├── dist
│   └── app.js             // 打包后的app.js
├── package.json
├── src
│   └── index.js           // 源目录入口文件
└── webpack.config.js

webpack.config.js module相关配置

webpack 视所有文件都为模块，图片，css文件，字体等静态资源都会打包进js文件，所以会需要用到loader文件，更多Loaders可以查询网址，接下来我们安装一些必要的Loader文件。

npm install style-loader css-loader url-loader --save-dev

module.exports = {
	entry: './src/index.js',
	output: {
		filename: 'app.js',
		path: path.resolve(__dirname, 'dist')
	},
	module: {
		rules: [
			{
				test: /\.css$/,
				use: ['style-loader', 'css-loader']
			},
			{
				test: /\.(png|svg|jpg|gif)$/,
				use: ['url-loader']
			},
			{
				test: /\.(woff|woff2|eot|ttf|otf)$/,
				use: ['url-loader']
			}
		]
	}
}

cd src && touch main.css

import "./main.css";

webpack.config.js plugins配置

主要的js文件和静态文件都能成功打包成一个js文件后，我们需要把这个js文件放到html文件里，webpack插件***html-webpack-plugin***就是干这个事儿的，它能自动生成一个html文件并把我们打包好的js文件放入html。

npm install html-webpack-plugin --save-dev

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 引入插件

module.exports = {
	entry: './src/index.js',
	output: {
		filename: 'app.js',
		path: path.resolve(__dirname, 'dist')
	},
	module: {
		rules: [
			{
				test: /\.css$/,
				use: ['style-loader', 'css-loader']
			},
			{
				test: /\.(png|svg|jpg|gif)$/,
				use: ['url-loader']
			},
			{
				test: /\.(woff|woff2|eot|ttf|otf)$/,
				use: ['url-loader']
			}
		]
	},
	plugins: [
		new HtmlWebpackPlugin({title: 'production'})		// 配置plugin
	]
};

├── dist                        // 生产目录
│   ├── app.js
│   └── index.html
├── package.json
├── src                        // 源目录
│   ├── index.js
│   └── main.css
└── webpack.config.js

React 的webpack配置

安装react

npm install babel-core babel-preset-env babel-preset-react babel-loader --save-dev

// .babelrc
{
	"presets": ["env", "react"]
}

// 在webpack.config.js 的modules.rules中加入此配置
{
	test: /\.(js|jsx)$/,
	exclude: /node_modules/,
	use: {
		loader: 'babel-loader'
	}
}				

// index.html

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
	entry: './src/index.js',
	output: {
		filename: 'app.js',
		path: path.resolve(__dirname, 'dist')
	},
	module: {
		rules: [
			{
				test: /\.(js|jsx)$/,
				exclude: /node_modules/,
				use: {
					loader: 'babel-loader'
				}
			},
			{
				test: /\.css$/,
				use: ['style-loader', 'css-loader']
			},
			{
				test: /\.(png|svg|jpg|gif)$/,
				use: ['url-loader']
			},
			{
				test: /\.(woff|woff2|eot|ttf|otf)$/,
				use: ['url-loader']
			}
		]
	},
	plugins: [
		new HtmlWebpackPlugin({
			title: 'production',
			template: './index.html'    // 模板文件位置
		})		
	]
};
书写React，运行webpack
// src/index.js
import React from 'react';
import ReactDom from 'react-dom';

import './main.css'

ReactDom.render(
	

hello world

运行npm run build，生成dist目录，打开dist目录中的index.html文件，可以发现浏览器已正常渲染"hello world"。

dev环境热更新配置

react的wepack完成以后，是不是发现每修改一次代码，想看到效果，得重新打包一次才行。webpack-dev-server配置可以帮助我们实现热更新，在开发环境解放我们的生产力。

安装webpack-dev-server

npm install webpack-dev-server  --save-dev

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');

module.exports = {
	entry: './src/index.js',
	output: {
		filename: 'app.js',
		path: path.resolve(__dirname, 'dist')
	},
	module: {
		rules: [
			{
				test: /\.(js|jsx)$/,
				exclude: /node_modules/,
				use: {
					loader: 'babel-loader'
				}
			},
			{
				test: /\.css$/,
				use: ['style-loader', 'css-loader']
			},
			{
				test: /\.(png|svg|jpg|gif)$/,
				use: ['url-loader']
			},
			{
				test: /\.(woff|woff2|eot|ttf|otf)$/,
				use: ['url-loader']
			}
		]
	},
	plugins: [
		new HtmlWebpackPlugin({
			title: 'production',
			template: './index.html'    
		}),
		// hot 检测文件改动替换plugin
		new webpack.NamedModulesPlugin(),      
		new webpack.HotModuleReplacementPlugin()		
	],
       // webpack-dev-server 配置
	devServer: {
		contentBase: './dist',
		hot: true
	},
};

"scripts": {
  "build": "webpack",
  "dev": "webpack-dev-server --open --mode development"  // webpack-dev-server
},

原文发布时间为：2018年05月08日
原文作者： 会写代码的husky

本文来源：开源中国 如需转载请联系原作者