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