Loader
Loader 可以理解為是模塊和資源的轉(zhuǎn)換器，它本身是一個函數(shù)，接受源文件作為參數(shù)，返回轉(zhuǎn)換的結果。
loader的特性
Loader 可以通過管道方式鏈式調(diào)用，每個 loader 可以把資源轉(zhuǎn)換成任意格式并傳遞給下一個 loader ，但是最后一個 loader 必須返回 JavaScript。
Loader 可以同步或異步執(zhí)行。
Loader 運行在 node.js 環(huán)境中，所以可以做任何可能的事情。
Loader 可以接受參數(shù)，以此來傳遞配置項給 loader。
Loader 可以通過文件擴展名（或正則表達式）綁定給不同類型的文件。
Loader 可以通過 npm 發(fā)布和安裝。
除了通過 package.json 的 main 指定，通常的模塊也可以導出一個 loader 來使用。
Loader 可以訪問配置。
插件可以讓 loader 擁有更多特性。
Loader 可以分發(fā)出附加的任意文件。
安裝loader
npm install css-loader babel-loader
配置文件
執(zhí)行webpack可以在命令行中傳入?yún)?shù)，大部分情況下是通過指定配置文件來執(zhí)行的。
- 默認情況下會搜索當前文件夾下的
webpack.config.js - 還可以通過
--config選項來指定配置文件
var path = require('path');
var APP_PATH = path.resolve(ROOT_PATH, 'src'); //__dirname 中的src目錄，以此類推
var webpack = require('webpack');
module.exports = {
entry: {
app:path.join(__dirname, 'src'),
vendors: ['react','redux']
},
output: {
path: path.join(__dirname, 'dist'),
filename: '[name].js'
},
module: {
loaders: [ //loader
{ //用于翻譯ES6語法的babel
test:/\.js?$/,
exclude:/node_modules/,
loader:'babel',
query:{
presets:['react','es2015']
}
},
{ //用于加載css
test: /\.css$/,
exclude: /^node_modules$/,
loader: ExtractTextPlugin.extract('style', ['css', 'autoprefixer']),
include: [APP_PATH]
}
]
},
plugins: [ //插件
// kills the compilation upon an error.
// this keeps the outputed bundle **always** valid
new webpack.NoErrorsPlugin(),
//這個使用uglifyJs壓縮你的js代碼
//new webpack.optimize.UglifyJsPlugin({minimize: true}),
new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js')
]
};
