loaders:[
{
? ? test:/\.js$/,
? ? loader:'babel-loader',
? ? exclude:__dirname+"/node_modules/", //排除打包的范圍（需要絕對路徑）
? ??include:__dirname+"src",//指定打包的范圍（需要絕對路徑）
? ? query:{
? ? ? ? ?presets:['latest']
? ? ? }
? ? }
]
安裝loader：npm install xxx-loader
loaders的參數：1.test:必須滿足的條件(正則) ?2.exclude:不能滿足的條件(loader的排除范圍) ?3.include:由加載程序轉換導入文件的路徑或文件數組?（loader處理范圍） ?4. loader ? ?5.loaders:將串聯的loader用數組表示
提高打包的速度：exclude排除打包的范圍 ?include:指定打包的范圍。
安裝postcss-loader: npm?i?-D??postcss-loader （npm install postcss-loader?--save-dev ） ? ?在webpack.config.js的module里配置? ? ? ? ? ? ? ?
? ? ? ?rules: [
? ? ? ? ? ?{
? ? ? ? ? ? ? test: /\.css$/,
? ? ? ? ? ? ? use: ['style-loader', { loader: 'css-loader', options: { importLoaders: 1 } },'postcss-loader' ]
? ? ? ? ? ? }，
? ? ? ? ? ?{
? ? ? ? ? ? ? ?test: /\.scss$/,
? ? ? ? ? ? ? ?loaders:['style-loader','css-loader','postcss-loader','sass-loader']
? ? ? ? ? ? }
? ? ? ? ?] ?
? ? ? ? 新建一個文件 postcss.config.js文件：
? ? ? ? ?module.exports = {
? ? ? ? ? "plugins": {
? ? ? ? ? ? ?" autoprefixer": {}
? ? ? ? ? ? ? }
? ? ? ? ? }
? ? ?? importLoaders: 1 : 表示在css-loader之后指定幾個數量的loader來處理import進來的資源
?
webpack處理模板文件 ?1.webpack把模板文件當做字符串處理
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?2.webpack把模板當成已經編輯好的模板的處理函數
?
webpack 處理圖片 file-loader ? ?在模板文件中的圖片<img src="${ require('圖片路徑')}">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?test: /\.{png|jpg|jif|svg}$/i,
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?loaders:'file-loader',
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?query:{
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?name: 'images/[name]-[hash:5].[ext]'
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ? ? ? ? ? ?? ? ?url-loader: (base64編碼的圖片文件)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?test: /\.{png|jpg|jif|svg}$/i,
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?loaders:'url-loader',
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?query:{
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? limit:20000,
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? name: 'images/[name]-[hash:5].[ext]'
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?}
?
