webpack經常使用配置

　　就我我的而言，以前也沒有學過webpack，也沒有單獨用過webpack，只是在使用vue-cli時順帶使用了一下webpack，可事實上，彼時，我甚至能夠根本不用關心他到底是不是webpack，我只須要按照vue-cli一步步的操做下去便可，有時候，也會遇到各類各樣的問題，可能爲了一個很小的問題可以耽擱好半天。因此，下定決心來了解一下webpack了。

　　其實，關注點也沒有那麼多，不考慮模板的話，大多數的前端關注的焦點可能都在js、css、image這三部分。

　　直接看一份配置文件

const path = require('path');

// 利用extract-text-webpack-plugin插件，提取爲單獨的css文件
const ExtractTextPlugin = require('extract-text-webpack-plugin')


module.exports = {
    entry: {
        index: './src/js/app.js'
    },

    output: {
        path: path.resolve(__dirname, "./dist"),
        filename: 'js/[name].js',
        publicPath: path.resolve(__dirname, "./dist")
    },
    module: {
        rules: [{
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader"
            },
            {
                test: /\.scss/,
                use: ExtractTextPlugin.extract({
                        fallback: "style-loader",
                        use: [{
                                loader: "css-loader",
                                options: {
                                    sourceMap: true,
                                    minimize: true,
                                },
                            },
                            {
                                loader: 'sass-loader',
                                options: {
                                    sourceMap: true
                                }
                            }
                        ]
                    })
            },
            {
                test: /\.(png|jpg|gif)$/i,
                loader: "url-loader",
                options: {
                    limit: 1024,
                    name: "[name].[ext]",
                    outputPath: '/images/'
                }

            }
        ]
    },
    plugins: [
        new ExtractTextPlugin({
            filename: "css/[name]-app.css"
        })
    ]
}

　　咱們將目光聚焦在module.exports這個對象內部的各屬性。

　　entry入口文件，簡單來講就是webpack編譯從哪裏開始，有三種配置方式，一、字符串：直接以當前配置文件webpack.config.js爲起始位置，輸入相應的入口js；二、數組：若是存在多個入口的話，即多個入口js，則以數組形式表示；三、對象：前面無論是字符串方式仍是數組方式，輸出的都是一個js文件，而對象的表示方式就是添加模塊名稱，也就是Chunk Names，能夠生成多個輸出的js。

　　數組輸入：

entry: ['./src/js/app.js', './src/js/index.js']

　　對象輸入：

entry: {
        app: './src/js/app.js',
        index: './src/js/a.js'
}

　　相對應的輸出文件的配置

    output: {
        path: path.resolve(__dirname, "./dist"),
        filename: 'js/[name].js',
        publicPath: path.resolve(__dirname, "./dist")
    },

　　若是須要保存在同一個js文件夾下面，則filename的值須要加上文件夾名稱，例如這裏的是js，若是須要打包成多個js文件，則須要使用[name]佔位，而若是須要打包成同一個js文件，則這裏能夠寫成"js/bundle.js"。

　　關於path，在webpack3版本里面不知道是否是強制要求必須配置絕對路徑了，個人配置若是不加絕對路徑的話，打包老是報錯，提示須要一個absolute path。關於js配置基本上完成了。還有一點須要配置的是，若是採用ES6語法寫的JavaScript，咱們還須要配置一個babel，這就涉及到各個loader的配置了，須要在module.rules這個數組裏面一個一個的loader。

{
    test: /\.js$/,
    exclude: /node_modules/,
    loader: "babel-loader",
    options: {
        "presets": ["env"]
    }
}    

　　關於babel配置，將ES6語法轉成常規JavaScript的話，須要 "presets": ["env"]，這裏有三種配置方法，可參見babel官網，可是推薦當前這種寫法，看起來比較整潔。

　　關於css留在最後，先說圖片相關的配置

　　一般狀況下，有3個loader能夠配置圖片，file-loader、url-loader、image-webpack-loader，簡單說file-loader就是解決圖片問題的，url-loader是能夠在file-loader的基礎上加上限制，小於多少字節的圖片能夠轉化爲base64編碼，image-webpack-loader至關於在保證圖片必定質量的狀況下，對圖片進行壓縮，對於我來講，我經常使用https://tinypng.com/壓縮圖片，因此需求上並非很迫切。

因此多數狀況下，我會選擇url-loader

{
    test: /\.(png|jpg|gif)$/i,
    loader: "url-loader",
    options: {
        limit: 1024,
        name: "[name].[ext]",
        outputPath: '/images/'
    }
}    　　

　　圖片格式通常還須要有svg，甚至包括一些圖標字體化的ogg、woff等字體圖標都是經過url-loader來處理的。

　　limit是肯定須要在多少字節之內的圖片轉爲base64，[name]是圖片名稱的佔位符，[ext]是圖片格式。outputPath是將圖片打包到同一個文件夾下面，若是不想寫這個屬性，又想達到相同效果的話，還能夠將name屬性值配置爲"/images/[name].[ext]"。

　　如此配置的話，對於簡單需求，基本上夠用了。

　　關於css-loader，若是再涉及到sass、less、postcss，那就更多了，我我的只會使用sass，因此以sass爲例，通常須要配置多個loader，style-loader、css-loader、sass-loader必不可少，sass-loader還須要配合node-sass。

　　若是單純的只想把css文件打包到js文件中的話

{    
    test: /\.scss/,
    use: [
        "style-loader",
        {
            loader: "css-loader",
            options: {
                importLoaders: 1,
                sourceMap: true,
                minimize: true,
            },
        },
        "sass-loader"
    ]
}    

　　多個loader處理css的話，依照從右向左，或者下到上排列處理順序，先sass-loader，而後css-loader，而後style-loader，importLoaders是指還須要後面幾個loader處理該文件，minimize表示是否壓縮css， sourcemap，不解釋。

　　然而，你若是想將打包的全部css文件抽取出來成爲一個獨立的css文件，那還須要一個plugin插件「extract-text-webpack-plugin」，

const ExtractTextPlugin = require('extract-text-webpack-plugin')

　　

{
    test: /\.scss/,
    use: ExtractTextPlugin.extract({
        fallback: "style-loader",
        use: [{
            loader: "css-loader",
            options: {
                sourceMap: true,
                minimize: true,
                 },
             },
             {
                 loader: 'sass-loader',
                 options: {
                     sourceMap: true
            　　　　}
        　　}
　　　　]
    })
}

　　與module平級的plugin

plugins: [
    new ExtractTextPlugin({
            filename: "css/[name].css"
        })
    ]

　就會在dist目錄下生成css文件夾，以及對應的css