webpack牛刀小试---创建第一个简单的项目

首先创建一个文件夹来放置我们的项目。
然后我们开始配置环境。打开cmd命令窗口，输入如下命令：

npm install -g webpack

1.创建package.json文件
安装好后cd进入我们文件夹所在的目录，现在我们要在文件夹中创建package.json文件，它记录我们项目的信息以及一些依赖包。创建的方式很简单，直接在cmd窗口中输入：

npm init

cmd就开始让你创建package.json文件了，一步一步地填写一些项目信息。写完没问题后就直接yes,完成！然后你就可以看到文件夹里多了一个package.json文件。

2.创建依赖包
然后继续在cmd中安装一些依赖包，比如说项目依赖react，就在项目目录下的cmd中输入：

npm install react --save

其他依赖包也是同理的方式安装，当你安装好后就会发现package.json文件中dependencies中出现react,并且后面跟着版本号。如果要安装devDependencies，例如css-loader，则在cmd中输入：

npm install css-loader --save-dev

这样在package.json文件中出现devDependencies，并且花括号中有css-loader和其版本号。

3.写配置文件webpack.config.js
在项目文件夹中新建文件webpack.config.js，这是一个默认文件名当然你也可以自己取名字。它最简单的文件内容如下：


var path = require("path");
module.exports = {
entry: './app/index.js',
output: {
path:path.resolve(__dirname,'./dist'),
filename: 'bundle.js'
}
}
PS:注意
这里我出现过错误，有些视频和文章里写的是：

module.exports = {
entry: ‘./app/index.js’,
output: {
path:’./dist’,
filename: ‘bundle.js’
}
}
但这样在cmd中会报错：

所以要使用绝对路径，而且写的时候要注意dirname的前面是有两条下划线的：__
4.测试一下
其中需要我们在项目文件夹中新建app文件夹和dist文件夹，并在app文件夹下面新建文件index.js,这是我们写代码的地方。
我们可以在index.js中写如下代码测试一下：

var react = require(‘react’);
console.log(react.version);

让其在控制台输出react版本号。当然我们需要建一个html文件才能看到效果，但要注意的是在body中引入bundle.js文件才能起作用。

然后在chrome浏览器的开发者工具中就可以看到效果啦！