目的：通過壓縮文件（比如js，css等），合并多個文件，從而減少http請求，提升訪問速度

主要通過Loaders，簡單的舉幾個Loaders使用例子：

可以把SASS文件的寫法轉(zhuǎn)換成CSS，而不在使用其他轉(zhuǎn)換工具。
可以把ES6或者ES7的代碼，轉(zhuǎn)換成大多瀏覽器兼容的JS代碼。
可以把React中的JSX轉(zhuǎn)換成JavaScript代碼。

注意：所有的Loaders都需要在npm中單獨進行安裝，并在webpack.config.js里進行配置。

打包css進JS

1、安裝

npm install style-loader -s -d
npm install css-loader -s -d

2、配置

方式一：use方式

    module: { // 模塊：例如解讀CSS，圖片轉(zhuǎn)換壓縮等
        rules: [{
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
        }]
    },

方式二：load方式

    module: { // 模塊：例如解讀CSS，圖片轉(zhuǎn)換壓縮等
        rules: [{
            test: /\.css$/,
            loader: ['style-loader', 'css-loader']
        }]
    },

方式三：use+load方式（常用）

    module: { // 模塊：例如解讀CSS，圖片轉(zhuǎn)換壓縮等
        rules: [{
            test: /\.css$/,
            use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader"
                    }
                ]
        }]
    },

image.png

3、css文件

image.png

4、運行

webpack

參考文章

https://jspang.com/posts/2017/09/16/webpack3.html#%E7%AC%AC05%E8%8A%82%EF%BC%9A%E6%A8%A1%E5%9D%97%EF%BC%9Acss%E6%96%87%E4%BB%B6%E6%89%93%E5%8C%85