在生成bundle file之前，對原js module做預處理。
loader配置在webpack config文件中的 module 字段中，由loader配置的位置，也可以看出loader是對module做預處理用的。
const config = { ...... , module: { rules: [ { use: 'babel-loader', test: //.js$/ } ] }, ......,}babel turn ES2015/6/7 code into ES5 code，babel has support for the latest version of javaScript through syntax transformers.
npm install --save-dev babel-loader babel-core babel-PReset-env
tell babel-core how to process js file
{ "presets": ["babel-preset-env"]}
npm install --save-dev css-loader style-loader
use 配置節中的loader 從右向左執行，即：先css-loader，后style-loader
{ use: ['style-loader', 'css-loader'], test: //.css$/}css-loader 處理 js module 中 css 的 import，
import './style/img.css';style-loader 將其 import 的結果輸出到html中：
<head> <style type="text/css"> img { boder: 10px solid black; } </style></head>那么，如何將生成的css內容輸出到一個單獨的css文件中呢？ 可以配合 extract-text-webpack-plugin install npm install --save-dev extract-text-webpack-plugin
修改 webpack.config.js，添加引用
const ExtractTextPlugin = require('extract-text-webpack-plugin')修改 loader 配置節：
{ loader: ExtractTextPlugin.extract({ loader: 'css-loader' }), test: //.css$/}添加plugins配置：
plugins: [ new ExtractTextPlugin('style.css')]之后，css中的內容已經生成到style.css 文件中了。
新聞熱點
疑難解答
