webpack配置详解

1. 首先，来说说我对webpack的理解

一. 号称 require Anything 。打包各种各样的文件

// 比如你有一个index.js文件。你就可以在这个文件里面require其他的文件
var _mytools = require('util/mytools.js');
require('./index.less');

二. 模块化开发，结构层次清晰

// 比如你可以在body标签里面引入其他的html文件
<%= require('html-loader!./layout/nav.html') %>

三. 牛逼的插件和各种各样的loader

如 webpack-dev-server, 可以实时监控效果
   babel-loader      , 可以转换es6语法到es5......

上面的介绍，很垃圾，完全不足以描述webpack的功能。

2. webpack.config.js

一. 配置别名

// 配置别名 以后就可以直接引用该位置 如下面的page 以后就可以直接require('page/..')
resolve: {
    alias: {
      node_modules:__dirname + '/node_modules',
      page:__dirname + '/src/page',
    }
  }

二. 我们需要指定打包文件的入口 entry.

// 我习惯把所有的入口文件 都放在src/page页面
entry: {
    'common'            : ['./src/page/common/index.js'],
    'index'             : ['./src/page/index/index.js'],
    'list'              : ['./src/page/list/index.js']
},

三. 指定生成的文件的存放位置 output.

output: {
    // 路径
    path: __dirname + '/dist/',
    // 访问路径
    publicPath:'/dist/'
    // 文件名
    filename: 'js/[name].js'
  },

四. 利用loader处理各种各样的文件

module: {
    loaders: [
      // 1. js文件处理 利用webpack自带的js处理功能. babel处理出来的对ie支持不好
      
      
      // 2. css,less,stylus... 加载顺序:从下到上,从又到左
      //    css-loader         处理css里面的 url
      //    style-loader       将css插入到页面的style标签
      //    ExtractTextPlugin  单独打包css样式,以免打包在js里面导致样式错乱
      //    我的webpack版本是1.* 注意下less和less-loader的版本, 我用的都是2.*的
      {
        test : /\.(less|css)$/,
        loader: ExtractTextPlugin.extract('style', 'css!less')
      },
      
      
      // 3. 图片的处理
      // 小于8K的图片将直接以base64的形式内联在代码中，可以减少一次http请求。
      // 大于8k的呢?则直接file-loader打包, 这里并没有写明file-loader.但是确实是需要安装,否则会有问题.而name也是file-loader的属性
      { 
        test: /\.(woff|woff2|eot|ttf|svg|jpg|png|gif)\??.*$/, 
        loader: 'url-loader',
        query: {
          limit: 8192,
          name: 'resourse/[name].[ext]'
        }
      },
      
      
      // 4. 这个我自己配置的 用于hogan.js的template
      {
        test: /\.string$/, 
        loader: 'html-loader',
        query : {
          // 需要压缩
          minimize : true,
          // 压缩的时候 不要删除引号
          removeAttributeQuotes : false
        }
      }
    ]
  }

5. 插件的应用

var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin = require('html-webpack-plugin');

//  默认会把所有入口节点的公共代码提取出来,生成一个common.js,但是我指定他生成base.js
new webpack.optimize.CommonsChunkPlugin({
  name: 'common',
  filename: 'js/base.js'
}),

// 把css单独打包到文件里 
new ExtractTextPlugin("css/[name].css"),

// 自动生成html文件 并且引入相对的js文件
new HtmlWebpackPlugin ({
    // 模板文件路径
    template  : './src/view/'+name+'.html',
    // 输出文件名以及路径 dist/view/
    filename  : 'view/'+name+'.html',
    // 生成title标签 也可以<title><%= htmlWebpackPlugin.options.title%></title>
    title     : title,
    // 有true body script标签位于html文件的 body 底部
    // head 放在head里面
    // false 不生产js文件
    inject    : true,
    // 给生成的 js 文件一个独特的 hash 值
    hash      : true,
    // 可以看到我们的入口有很多js文件 chunks会默认引用所有的 但是明显我们不需要
    // 我们只需要引入自己单独需要的js文件name.js 和 通用的 common.js
    chunks    : ['common',name],
    // 给生成的 html 文件生成一个 favicon图标  一般放在更目录下
    favicon   : './favicon.ico'
})

// 实际上一个个去写 太麻烦了 用函数的方式来
var getHtmlConfig = function(name,title) {
  return {
      template  : './src/view/'+name+'.html',
      filename  : 'view/'+name+'.html',
      title     : title,
      inject    : true,
      hash      : true,
      chunks    : ['common',name],
      favicon   : './favicon.ico'
    }
}
new HtmlWebpackPlugin(getHtmlConfig('index', '首页')),

6. 生产环境 和 线上环境 , 以及 webpack-dev-server

// 环境变量设置
var WEBPACK_ENV = process.env.WEBPACK_ENV || 'dev';

// 如果是在生产环境 就在通用组件common里面加入webpack-dev-server/client?http://localhost:80/
if('dev' === WEBPACK_ENV){
  config.entry.common.push('webpack-dev-server/client?http://localhost:80/');
}

// 然后,在package.json的scripts加上
{
    "dev_mac" : "WEBPACK_ENV=dev webpack-dev-server --inline --port 80",
    "dev_win" : "set WEBPACK_ENV=dev && webpack-dev-server --inline --port 80",
    "dist_mac": "WEBPACK_ENV=online webpack-dev-server -p",
    "dist_win": "set WEBPACK_ENV=online && webpack -p"
}

// 还可以继续更改output的配置
publicPath: 'dev' === WEBPACK_ENV ? '/dist/' : '//..线上地址../dist/'

7. 库 和 各种插件的引用

// jquery的引入
// 我们可以设置一个footer.html 用来描述页面的底部
// 然后在footer.html的最下面引入jquery
<script src="https://cdn.bootcss.com/jquery/1.12.0/jquery.js"></script>

// 在webpack里面配置 这样可以require 但是又不会被编译
externals: {
    'jquery':'window.jQuery'
},

---

// 插件的引用
// 如上图 插件unslider 必备的js代码 和 美化css 都通过index.js引入.
// 引用的时候, 就可以var slider = require("util/slider/index.js")
$('.banner').unslider({
    speed: 500,               //  速度
    delay: 3000,              //  延时
    complete: function() {},  //  结束回调
    keys: true,               //  左右箭头
    dots: true,               //  下面的小圆点
    fluid: false              //  支持响应设计。可能会破坏没有响应的设计
});