Webpack学习笔记 - 入门篇

为什么80%的码农都做不了架构师？>>>   

如果你已经读了 Webpack学习笔记 - 体验篇，是不是有想进一步了解 Webpack 的冲动。

没有。那是因为包子太大，你还没有咬馅儿呢。

Webpackr的工作方式

Webpack 把项目当做一个整体，通过一个给定的入口文件 index.js ，从这个文件开始找到项目依赖的所有文件，然后使用 loaders 处理这些文件，最后将所有文件打包为一个浏览器可识别的JavaScript文件 bundle.js 。

开始使用Webpack

将Webpack学习笔记 - 体验篇中示例进行深加工。

1. 给 Webpack 增加配置文件 webpack.config.js :

    module.exports = {
      entry: "./src/index.js",  //入口文件
      output: {
        path: "./dist/",         //打包输出目录
        filename: "bundle.js"   //打包输出文件名
      }
    }
   

2. 项目根据目录下执行 webpack 指令，输出结束如下:

    Hash: a4364839552719a85945
    Version: webpack 1.14.0
    Time: 629ms
        Asset    Size  Chunks             Chunk Names
    bundle.js  278 kB       0  [emitted]  main
       [0] ./src/index.js 92 bytes {0} [built]
       [2] ./src/hello.js 170 bytes {0} [built]
        - 1 hidden modules
   

   输出结果和最终效果与Webpack学习笔记 - 体验篇中示例相同。

3. 给项目增加样式文件、json数据文件、图片

   新建 src/hello.css 文件，内容如下:

    #hello {
      margin: auto;
      width: 80%;
      height: 500px;
      background-color: #00FF00;
      background-image: url(img/webpack.png);
      background-position: top center;
      background-size: 100% auto;
      background-repeat: no-repeat;
      line-height: 2.0em;
      font-family: 'Microsoft YaHei';
      font-size: 2.0em;
      text-align: center;
      color: red;
    }
   

   新建 src/hello.json 文件，内容如下:

    {
      "hello": "Hello Webpack, the Webpack test project! From Json."
    }
   

   修改 hello.js 文件，内容如下:

    var $   = require('jquery');
    var json = require('./hello.json');
   
    module.exports = function() {
      var hello = $('<div></div>');
      hello.html(json.hello);
      return hello;
    };
   

   修改 src/index.js 文件，内容如下:

    var $ = require('jquery');
   
    var logo  = require('./img/logo.png');
    var style = require('./hello.css');
    var hello = require('./hello.js');
   
    $('#hello').append('<img title="webpack logo" src="' + logo + '" /> Webpack logo');
    $('#hello').append(hello());
   

   新建 src/img 目录，将 logo.png 和 webpack.png 拷贝至 img 目录。

4. 修改配置文件 webpack.config.js 如下

    module.exports = {
      entry: "./src/index.js",  //入口文件
      output: {
        path: "./dist/",           //打包输出目录
        filename: "bundle.js",    //打包文件名
        publicPath: "./dist/"     //资源发布路径
      },
      module: {
        loaders: [
          {
             test: /\.css$/, //处理css文件
             loader: 'style!css'
          },
          {
             test: /\.json$/,  //处理json文件
             loader: 'json' 
          },
          {
             test: /.*\.(gif|png|jpe?g|svg)$/i, //处理图片
             loaders: [
               'url?limit=8192&name=[name].[ext]',
               'image-webpack?{optimizationLevel: 7, interlaced: false, pngquant:{quality: "65-90", speed: 4}, mozjpeg: {quality: 65}}'
             ]
          } 
    	]
      }
    }
   

5. 安装 loader 模块

    npm install style-loader css-loader json-loader url-loader image-webpack-loader --save-dev
   

6. 项目根目录下执行 webpack 指令，输出结束如下

    Hash: 0b88a10526d6c19b7e49
    Version: webpack 1.14.0
    Time: 4701ms
    	Asset    Size  Chunks             Chunk Names
    webpack.png   40 kB          [emitted]
    bundle.js  291 kB       0  [emitted]  main
    [0] ./src/index.js 258 bytes {0} [built]
    [8] ./src/hello.js 179 bytes {0} [built]
    	+ 8 hidden modules
   

   输出目录 dist 结构如下:

   webpack-test-project
   |--dist
   |  |--bundle.js
   	|  |--webpack.png
   

7. 查看效果

   浏览器打开 index.html 文件，点击看效果

小结

1. 使用配置文件 webpack.config.js 管理项目。
2. 丰富的 loader 模块，支持多种文件的打包处理。

附录

1. style-loader
2. css-loader
3. json-loader
4. url-loader
5. image-webpack-loader
6. loader conventions
7. list of loaders

转载于:https://my.oschina.net/myshow/blog/813870