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