webpack快速入门和实战

webpack是什么

Webpack 是一个模块打包器。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

这张图基本上解释了webpack是用来干嘛的，将一些相互依赖的模块(文件)，打包成一个或多个js文件，减少http请求次数，提升性能。这些相互依赖的模块可以是图片、字体、coffee文件、样式文件、less文件等。

1、 安装

先安装

install node.js
node.js包含一个包管理器：npm

基本命令

      webpack         // 最基本的启动webpack的方法
      webpack -w      // 提供watch方法；实时进行打包更新
      webpack -p      // 对打包后的文件进行压缩
      webpack -d      // 提供source map，方便调式代码

全局安装

 # npm install webpack -g

项目安装：

最好在工程中使用webpack，让webpack作为工程的依赖。这样你就能自己选择一个本地的webpack版本，不会强制使用全局的。

  # 进入项目目录
  # 确定已经有 package.json，没有就通过 npm init 创建
  # 安装 webpack 依赖
  # npm install webpack --save-dev

2、如何使用

使用ES6

安装 babel-loader： 
# npm install babel-loader --save-dev
安装转码规则：       
# npm install babel-preset-es2015 --save-dev
ES7不同阶段语法提案的转码规则（共有4个阶段），选装一个
# npm install --save-dev babel-preset-stage-0
# npm install --save-dev babel-preset-stage-1
# npm install --save-dev babel-preset-stage-2
# npm install --save-dev babel-preset-stage-3
参考格式：
{
    test: /\.js$/,
    loader: ‘babel?presets[]=es2015,presets[]=stage-0‘
}

编译css

    安装css-loader：  
    # npm install css-loader  --save-dev
    安装style-loader  
    # npm install style-loader  --save-dev
    参考格式：
    {
        test: /\.css$/,
        loaders: [‘style‘, ‘css‘, ‘autoprefixer‘]
    }

编译less

    # npm install less --save-dev
    安装less-loader： 
    # npm install less-loader --save-dev
    参考格式：
    {
        test: /\.less/,
        loaders: [‘style‘, ‘css‘, ‘autoprefixer‘, ‘less‘],
    }

使用autoprefixer自动补上浏览器兼容

    # npm install autoprefixer-loader --save-dev
    参考格式：
    {
        test: /\.css$/,
        loaders: [‘style‘, ‘css‘, ‘autoprefixer‘]
    }, {
        test: /\.less/,
        loaders: [‘style‘, ‘css‘, ‘autoprefixer‘, ‘less‘],
    }

编译文件

    安装file-loader： 
    # npm install file-loader --save-dev
    参考格式：
    {
        test: /\.(eot|woff|svg|ttf|woff2|gif)(\?|$)/,
        loader: ‘file-loader?name=[hash].[ext]‘
    }

编译图片

    # npm install url-loader --save-dev
    参考格式：
    {
    test: /\.(png|jpg)$/,
    loader: ‘url?limit=1200&name=[hash].[ext]‘
    }

编译JSX

    # npm install jsx-loader --save-dev
    # npm install babel-preset-react --save-dev
    参考格式：
    {
    test: /\.jsx$/,
    loaders: [‘jsx‘, ‘babel?presets[]=es2015,presets[]=stage-0,presets[]=react‘]
    }

示例源码

在项目目录下，新建一个webpack.config.js文件，把下面代码复制进去，然后在新建一个app.js和index.js文件，写上console.log(‘你好世界’);

执行命令：webpack 然后找到build目录就看到编译后的文件了

    var webpack = require(‘webpack‘);

    module.exports = {
      entry: {
          app: ‘./app‘, //编译的入口文件
          index: ‘./index‘, //编译的入口文件
      },
      output: {
          publicPath: ‘/build/‘, //服务器根路径
          path: ‘./build‘, //编译到当前目录
          filename: ‘[name].js‘ //编译后的文件名字
      },
      module: {
          loaders: [{
                  test: /\.js$/,
                  loader: ‘babel?presets=es2015‘
              }, {
                  test: /\.css$/,
                  loaders: [‘style‘, ‘css‘, ‘autoprefixer‘]
              }, {
                  test: /\.less/,
                  loaders: [‘style‘, ‘css‘, ‘autoprefixer‘, ‘less‘],
              }, {
                  test: /\.(eot|woff|svg|ttf|woff2|gif)(\?|$)/,
                  loader: ‘file-loader?name=[hash].[ext]‘
              }, {
                  test: /\.(png|jpg)$/,
                  loader: ‘url?limit=1200&name=[hash].[ext]‘ //注意后面那个limit的参数，当你图片大小小于这个限制的时候，会自动启用base64编码图片
              }
          ]
      },
      plugins: [
              new webpack.optimize.CommonsChunkPlugin(‘common.js‘) //将公用模块，打包进common.js
      ],
      resolve: {
          extensions: [‘‘, ‘.js‘, ‘.jsx‘] //后缀名自动补全
      }
    };

plugins:可以使用插件讲几个公共模块加载到common.js中，这样就就可以更好的维护代码，但是要注意的是：

3. 详细讲解

webpack.config.js文件通常放在项目的根目录中，它本身也是一个标准的Commonjs规范的模块。在导出的配置对象中有几个关键的参数：

1.entry

entry可以是个字符串或数组或者是对象。

当entry是个字符串的时候，用来定义入口文件：

     entry: ‘./js/main.js‘

当entry是个数组的时候，里面同样包含入口js文件，另外一个参数可以是用来配置webpack提供的一个静态资源服务器，webpack- dev-server。webpack-dev-server会监控项目中每一个文件的变化，实时的进行构建，并且自动刷新页面：

     entry: [
         ‘webpack/hot/only-dev-server‘,
         ‘./js/app.js‘
     ]

当entry是个对象的时候，我们可以将不同的文件构建成不同的文件，按需使用，比如在我的hello页面中只要``引入hello.js即可：

     entry: {
         hello: ‘./js/hello.js‘,
         form: ‘./js/form.js‘
     }

2.output

output参数是个对象，用于定义构建后的文件的输出。其中包含path和filename：

     output: {
         path: ‘./build‘,
         filename: ‘bundle.js‘
     }

当我们在entry中定义构建多个文件时，filename可以对应的更改为[name].js用于定义不同文件构建后的名字。

3.module

关于模块的加载相关，我们就定义在module.loaders中。这里通过正则表达式去匹配不同后缀的文件名，然后给它们定义不同的加载器。比如说给less文件定义串联的三个加载器（！用来定义级联关系）：

module: { 
    loaders: [ 
        { test: /\.js?$/, loaders: [‘react-hot‘, ‘babel‘], exclude: /node_modules/ }, 
        { test: /\.js$/, exclude: /node_modules/, loader: ‘babel-loader‘}, 
        { test: /\.css$/, loader: "style!css" }, 
        { test: /\.less/, loader: ‘style-loader!css-loader!less-loader‘} 
    ] 
} 

此外，还可以添加用来定义png、jpg这样的图片资源在小于10k时自动处理为base64图片的加载器：

    { test: /\.(png|jpg)$/,loader: ‘url-loader?limit=10000‘}

给css和less还有图片添加了loader之后，我们不仅可以像在node中那样require js文件了，我们还可以require css、less甚至图片文件：

 require(‘./bootstrap.css‘);
 require(‘./myapp.less‘);
 var img = document.createElement(‘img‘);
 img.src = require(‘./glyph.png‘);

但是需要知道的是，这样require来的文件会内联到 js bundle中。如果我们需要把保留require的写法又想把css文件单独拿出来，可以使用下面提到的[extract-text-webpack-plugin]插件。

在 上面示例代码中配置的第一个loaders我们可以看到一个叫做react-hot的加载器。我的项目是用来学习react写相关代码的，所以配置了一个 react-hot加载器，通过它，可以实现对react组件的热替换。我们已经在entry参数中配置了webpack/hot/only-dev- server,所以我们只要在启动webpack开发服务器时开启–hot参数，就可以使用react-hot-loader了。在 package.json文件中这样定义：

 "scripts": { 2 "start": "webpack-dev-server --hot --progress --colors", 3 "build": "webpack --progress --colors" 4 }

4.resolve

webpack在构建包的时候会按目录的进行文件的查找，resolve属性中的extensions数组中用于配置程序可以自行补全哪些文件后缀：

resolve:{
     extensions:[‘‘,‘.js‘,‘.json‘]
 }

然后我们想要加载一个js文件时，只要require(‘common‘)就可以加载common.js文件了。
5.plugin

webpack提供了[丰富的组件]用来满足不同的需求，当然我们也可以自行实现一个组件来满足自己的需求。在我的项目里面没有特殊的需求，于是便只是配置了NoErrorsPlugin插件，用来跳过编译时出错的代码并记录，使编译后运行时的包不会发生错误：

plugins: [
     new webpack.NoErrorsPlugin()
 ]

6.externals

当我们想在项目中require一些其他的类库或者API，而又不想让这些类库的源码被构建到运行时文件中，这在实际开发中很有必要。此时我们就可以通过配置externals参数来解决这个问题：

externals: {
 "jquery": "jQuery" 3 }

这样我们就可以放心的在项目中使用这些API了：var jQuery = require("jquery");

7.context

当我们在require一个模块的时候，如果在require中包含变量，像这样：

require("./mods/" + name + ".js");

那么在编译的时候我们是不能知道具体的模块的。但这个时候，webpack也会为我们做些分析工作：

1.分析目录：‘./mods‘； 
2.提取正则表达式：‘/^.*\.js$/‘；

于是这个时候为了更好地配合wenpack进行编译，我们可以给它指明路径，像在cake-webpack-config中所做的那样（我们在这里先忽略abcoption的作用）：

var currentBase = process.cwd();
var context = abcOptions.options.context ? abcOptions.options.context : 
path.isAbsolute(entryDir) ? entryDir : path.join(currentBase, entryDir);

参考：http://www.cnblogs.com/tugenhua0707/p/4793265.html

http://web.jobbole.com/tag/webpack/

http://www.3fwork.com/b401/003617MYM008091/