React小项目，webpack入门讲解

新建一个名为ReactProject文件夹，进入后执行：

npm init

//使用init命令来初始化一个package.json文件执行：

npm install web pack --save-dev

//安装webpack在项目根路径下新建名为webpack.config.js文件并进行配置

const path = require('path');

//入口文件配置
let entry = {
	index: './public/javascripts/index_entry.js'
};

//浏览器端配置
let browserConfig = {
	entry,
	output: {
		//输出的路径
		path: path.join(__dirname, 'build'),
		publicPath: 'build',
		//输出的文件名称
		filename: 'js/[name].bundle.js',
		chunkFilename: 'js/[id].bundle.js'
	},
	module: {

	},
	plugins: [
	]
};

module.exports = [browserConfig];

在项目根路径下新建名为build文件夹，用于存放编译打包后的文件

在项目根路径下新建名为public文件夹，用于存放公共文件，如图片，css文件，js文件

然后执行webpack进行打包，会提示以下错误：webpack command is not found

在package.json下，增加一条命令：

"scripts": {
   "test": "echo \"Error: no test specified\" && exit 1",
   "start": "webpack"
},

在终端下，执行npm start，开始编译，会出现提示：

sh-3.2# npm start

> reactproject@1.0.0 start /Users/zhaoshanshan/work/ReactProject

> webpack

The CLI moved into a separate package: webpack-cli

Would you like to install webpack-cli (That will run npm install -D webpack-cli) (yes/NO)

输入yes，安装webpack-cli，然后即可以看到打包效果。