webpack项目打包（从安装到使用）

1. 准备工作

(1). 下载nodeJS nodeJS官网
(2). 下载Git Git官网

---

注：下载完Node.js后根据安装提示一步步安装即可，node.js有一个叫npm的包管理器，webpack模块可被npm包管理器安装

---

安装webpack

   $npm install -g webpack   //全局安装webpack命令

2. 在项目中使用webpack

   $npm init    //使用此命令在项目根目录下生成package.json文件

package.json案例

注： 安装时后缀 --save 和 --save-dev区别

• --save会把依赖包名称添加到package.json文件dependencies键（运行时依赖，即我们发布后还需要依赖的模块，否则运行不了，如jquery、angular等）下;
• --save-dev是添加到package.json文件devDependencies键（开发时依赖，即发布后用不到的模块）下；

3. 安装webpack到项目中

   $npm install --save-dev webpack    //将webpack加入到pageage.json配置文件中

注：此时webpack依赖模块已经配置到我们项目中了，并且项目目录中新增一个node_modules文件夹，打开文件夹可看到刚安装的webpack模块。

4. 开发工具

webpack-dev-server模块能快速配置一个本地服务器，并且当每次保存修改过的代码后，测试服务器将立即自动刷新页面，省去了每次都要手动打包编译代码和刷新页面的麻烦。

5.配置webpack.config.js文件

• 使用命令行配置
  $ webpack //当在命令行输入webpack时，默认使用webpack.config.js文件配置

• 可自定义webpack配置文件，写法如下
  $webpack --config webpack.config_test.js
  //--config选项告诉webpack使用webpack.config_test.js作为配置文件

• 配置文件结构
  module.exports = {
  //这里填写配置项
  }
  //从以上代码可看出，webpack.config.js文件输出了配置对象

• 使用node.js API配置 (需通过参数来传递配置对象)
  webpack({
  //配置项在这里填写
  }, function(){
  //回调函数
  })

• 更复杂的配置项
  $webpack app.js app.bundle.js //将app.js编译成app.bundle.js文件

注：使用命令行缺点是我们每次要编译编写代码时，都要写这么长的命令，如果设置妥当的webpack.config.js配置文件，则webpack可以监听文件改变，自动的执行编译打包命令

   $webpack -w     //监听文件改变，自动编译

• 配置文件怎么写？

  
  
  

  webpack.config.js案例

---

(1). context——上下文选项用来决定根目录（即绝对路径）的入口文件

---

(2). entry——打包文件的入口点（3种方式）

   //1).字符串，此字符串将在开始编译时被加载
   entry: "./app.js"      

   //2).数组，此数组中所有模块在编译启动时都将被加载，对后一个数组元素将被输出
   entry: ["./entry1.js", "./entry2.js"]      

   //3).对象，相当创建了多个入口绑定
        对象的"键"名可在output中使用name获取到，"值"可以是一个字符串也可以是一个数组
   {
      entry:{
           page1: "./page1.js",
           page2: ["./entry1.js","./entry2.js"]
      },
      output:{
          filename: "[name].bundle.js",
          chunkFilename: "[id].bundle.js"
      }
  }        

(3).output——告诉webpack如何编译文件到硬盘中
注：虽然entry中可以使用一个对象传入多个入口点文件，但是只能给output设置一个配置项

output.path：告诉webpack要把编译后的文件输出到硬盘的什么位置上，而filename被用来确保输在这个目录中的文件是独一无二的

output.path单/多入口写法

output.publicPath：用来指定输出文件的公共Url地址，当我们在浏览器浏览时需配置它

output.publicPath写法

以上是webpack最长用的配置项，下面是更高级的配置，比如使用ES6（ES2015）语法需配置babel-loader，在js中引入css样式文件如style-loader、css-loader等，开发React应用需配置react加载器等等。

下载Loaders加载器

下面是开发基于react的webapp时需配置的项。
首先用npm下载这些模块

   //下载babel-loader模块
   $ npm install --save-dev babel-loader
   //下载babel-preset-es2015，这样确保babel能解析ES6的最新特性
   $ npm install --save-dev babel-preset-es2015
   //下载react模块
   $ npm install -save-dev react
   //下载babel-preset-react，babel才能解析react的语法特性
   $ npm install --save-dev babel-preset-react

Babel是一个转换编译器，它能将ES6转换成可在浏览器中运行的代码。Babel是所有ES6转换编译器中与ES6规范兼容度最高的，甚至超过了谷歌创建已久的Traceur编译器。Babel允许开发者使用ES6所有新特性，而且不会影响与老版本浏览器的兼容性。此外，它还支持许多不同的构建测试系统，使开发者很容易将它集成到自己的工具链中。

在webpack.config.js中配置加载器loaders

   module: {
      loaders: [
           {
                test: /\.jsx$/, 
                loader: 'babel-loader', 
                query:{
                      presets:['es2015','react']
                }
           }
      ]
   }