webpack 配置简单说几句 ？

webpack

前言

这几天在准备一个单页面应用, 准备试试webpack神器，在准备webpack下的知识点，顺便记录下一些使用的心得。

webpack 的配置说明

在近来的前端开发中，业务逻辑复杂化，层次多样化，各种库和各种的包百花争鸣，而在模块的加载又没有一统天下的情况下，资源的管理和，静态资源的打包催生了现在很火的webpack，使其在webapp的应用中为前端人员所青睐。以下是webpack一些基础的说明和基础的小demo。

loader 和module plugin 的使用

loader 是为了让原本只能加载js的webpack能够支持CoffeeScript、 JSX、 LESS 或图片等作为依赖来一起打包编译的一个插件，这里的工作是解析，递归语法树，所以编译这部分的工作会导致cpu和内存飙升，而module 插件部分则是建立在在初始的loader之后。

//webpack的配置说明
var webpack = require('webpack')；

module.exports = {
  entry:['./entry.js'],   //入口文件，可以多个文件, ['./entry01.js','./entry02.js']
  output: {               // 输出文件       
    path: __dirname,      // 路径       
    filename: 'bundle.js' //具体的文件文件名
  },
  module: {  // 对模块的处理逻辑
    loaders: [
       // 匹配js|jsx 后缀的文件，node_modules里面的模块除外，babel转码，当然也可以这么写
       // loader:"babel-loader"，  
       // query: {
       //   presets: ['es2015', 'react']
       // }
       // 
      { test: /.js[x]?$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' }, 

       // 匹配css, 先用css-loader加载，'?' 后为具体的传参数,这里传参到css-loader 解析用css Module写的css文件，解析后再传给style-loader将内容解析到html里面 
      { test: /.css$/, loader: 'style-loader!css-loader?modules' }，

       // 匹配png,jpg ，'?limit' 表示为文件小于8192byte 的文件，转为 Data URl,其他的则为路径
      { test: /.(png|jpg)$/, loader: 'url-loader?limit=8192'}
    ]
  },
  plugins: [
    // 定义插件配置，可以是第三方配置，BannerPlugin 用来定义输出文件bandle.js的首部信息（注释）
    new webpack.BannerPlugin('This file is created at '+ new Date()),
    
    // js 文件压缩
    new uglifyJsPlugin({compress: { warnings: false }})
  ]
}

加载模块的配置的写法：

除了在webpack.config.js 里面的写法外，还可以在命令行, requrie 模块加载处写，比如

webpack entry.js bundle.js --module-bind 'css=style!css'
require("!style!css!./style.css") // 载入 style.css

---- To be continued!

备注

webpack官方说明: http://webpack.github.io/docs/，
中文简介: http://webpackdoc.com/loader.html
阮老师的demo：https://github.com/ruanyf/webpack-demos