css處理

• css-loader 處理css中路徑引用等問題
• style-loader 動態把樣式寫入html
• sass-loader scss編譯器
• less-loader less編譯器
• postcss-loader css再處理，可以實現css自動補全等功能，但要安裝相應的外掛和進行相應的配置

module.exports={
    entry:'./index.js',
    output:{
        path:__dirname+'/dist',
        filename:'bundle.js'
    },
    module:{
        loaders
 
:[
            {
                test:/\.css$/,
                loaders:'style-loader!css-loader'
            },
            {
                test:/\.less$/,
                loaders:'style-loader!css-loader!less-loader'
            },
            {
                test:/\.scss$/,
                loaders:'style-loader!css-loader!sass-loader'
 

            }
        ]
    }
}

注意！less-loader載入器裡的index.js有一句 var less = require(“less”);
說明, 你必須要安裝less外掛。npm install less –save-dev

js處理

• babel-loader
• jsx-loader

npm install babel-loader babel-core babel-preset-es2015 --save-dev

{
    test:/\.js$/,
    loaders:'babel-loader?presets[]=es2015'
 
,
    exclude:/node_modules/
}

圖片處理

npm install –save-dev url-loader

{
    test:/\.(jpg|png)$/,
    loaders:'url-loader?limit=8192'
}

自動生成html外掛

html-webpack-plugin，可以在dist/目錄下生成index.html檔案

cnpm install html-webpack-plugin --save-dev


var htmlwebpackplugin=require('html-webpack-plugin');
var htmlwebpackplugin=require('html-webpack-plugin');
module.exports={
    entry:'./index.js',
    output:{
        path:__dirname+'/dist',
        filename:'bundle.js'
    },
    module:{
        loaders:[
        ]
    },
    plugins:[
        new htmlwebpackplugin({
            title:'app',
            filename:'index2.html',
            favicon:'1.png',
            hash:true
        })
    ]
}

可以進行配置：
title: 設定title的名字
filename: 設定這個html的檔名
template:要使用的模組的路徑
inject: 把模板注入到哪個標籤後
favicon: 給html新增一個favicon

提取樣式外掛

extract-text-webpack-plugin，把css提取到一個檔案中

npm install --save-dev extract-text-webpack-plugin

var plugin=require('extract-text-webpack-plugin');
module:{
        loaders:[
            {
                test:/\.css$/,
                loaders:plugin.extract({fallback:'style-loader',use:'css-loader'})
            }
        ]
    },
    plugins:[
        new plugin('1.css'),
    ]

自動補全css3字首外掛

cnpm install –save-dev autoprefixer postcss-loader
autoprefixer是postcss-loader的外掛之一。

{
test:/\.css$/,
loaders:["style-loader", "css-loader","postcss-loader"]
}

同級目錄新建postcss.config.js

module.exports = {
  plugins: [
    require('autoprefixer')({browsers:'last 5 version'})
  ]
}

webpack提供了很多有用的原生外掛。
UglifyJsPlugin解析/壓縮/美化所有的js chunk。通過設定except陣列來防止指定變數被改變。

new webpack.optimize.UglifyJsPlugin({
    mangle: {
        except: ['$super', '$', 'exports', 'require']
    }
})

使用jquery

ProvidePlugin，定義識別符號，當遇到指定識別符號的時候，自動載入模組。

npm install --save-dev jquery

var webpack=require('webpack');
//引入本地jquery，配置別名，用webpack.ProvidePlugin將jquery在全域性引入。這樣就不用每個檔案都require(jquery)
resolve: { alias: { jquery: "./jquery-3.2.0.min.js" } }, 
plugins:[
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        "window.jQuery": "jquery"
    })
]

注意：$只在js模組中可以用，在html檔案中沒有引入jquery，不能用。

webpack-dev-server和webpack-dev-middleware

webpack-dev-server：
它是一個靜態資源伺服器，只用於開發環境；是一個小型Express伺服器，webpack-dev-server會把編譯後的靜態檔案全部儲存在記憶體裡；

webpack-dev-middleware：
是一個處理靜態資源的middleware；

webpack-hot-middleware：
是一個結合webpack-dev-middleware使用的middleware，它可以實現瀏覽器的無重新整理更新（hot reload），這也是webpack文件裡常說的HMR（Hot Module Replacement）。

webpack-dev-server就是一個Express 和 webpack-dev-middleware的實現，兩者之間的區別是webpack-dev-server 是封裝好了的, 除了config 和命令列引數之外很難再做定製型的開發，所以它適合純前端的輔助工具。而webpack-dev-middleware是一箇中間件, 可以編寫自己的後端服務, 然後整合進來.

#

待續