一、安装Node.js

Node.js可以直接从官网下载，按照默认的安装方式安装即可。

二、安装webpack

Webpack可以使用npm安装，新建一个空的练习文件夹，在终端中转到该文件夹后执行下述指令就可以完成安装。

//全局安装
npm install -g webpack
//安装到你的项目目录
npm install --save-dev webpack

三、安装webpack-dev-server

//全局安装
npm install -g webpack-dev-server
//安装到你的项目目录
npm install --save-dev webpack-dev-server

 

四、生成package.json文件

//生成初始的package.json文件
npm init -y

 

在项目文件夹中新建两个文件夹：app和build,分别存放着main.js和index.html

//package.json
{
  "name": "tic-tac-toe",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",//把npm的build命令指向webpack命令
    "start": "webpack-dev-server --inline --hot"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

 

//index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hacker News Front Page</title>
</head>

<body>
<div id="root"></div>
<script src="http://localhost:8080/bundle.js"></script>//注意src属性
</body>

</html>

 

五、新建webpack.config.js文件

在项目目录下新建一个webpack.config.js文件，内容如下：

module.exports = {
  entry:  __dirname + "/app/main.js",//已多次提及的唯一入口文件
  output: {
    path: __dirname + "/build",//打包后的文件存放的地方
    filename: "bundle.js"//打包后输出文件的文件名
  }
}

六、Loaders

1.JSON

 

//安装可以装换JSON的loader
npm install --save-dev json-loader

2.Babel

// npm一次性安装多个依赖模块，模块之间用空格隔开
npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react

 

3.react

npm install --save react react-dom

 

4.css

//安装
npm install --save-dev style-loader css-loader

 

最终的webpack.config.js文件：

//webpack.config.js

module.exports = {
  devtool: 'eval-source-map',

  entry:  __dirname + "/app/main.js",
  output: {
    path: __dirname + "/build",
    filename: "bundle.js"
  },

  module: {
    loaders: [
      {
        test: /\.json$/,
        loader: "json-loader"
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015','react']
        }
      },
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader'//添加对样式表的处理
      }
    ]
  },

  devServer: {...}
}

 七、遇到的问题

 1.--save-dev和--save的区别

--save-dev是只会在开发时用到的依赖，-save是项目上线后也需要用到的依赖。