webpack學習筆記—module

繼entry以後，module來了~

module配置如何處理模塊。
經過loader能夠支持各類語言和預處理器編寫模塊，一些經常使用loader以下：

// webpack.config.js

// 將CSS抽離成單獨文件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    module: {
        rules: [
            {
                test: /\.js$/,
                use: [
                    // 支持ES6
                    'babel-loader',
                    // 加入eslint檢查
                    'eslint-loader'
                ]
            },
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader, // 和style-loader互斥
                    // 'style-loader', // 建立style標籤，鏈式調用，從右到左
                    'css-loader'
                ]
            },
            {
                test: /\.less$/,
                use: [
                    MiniCssExtractPlugin.loader, // 和style-loader互斥
                    // 'style-loader', // 建立style標籤，鏈式調用，從右到左
                    'css-loader',
                    'less-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            plugins: () => [
                                // 瀏覽器支持版本控制在package.json browserslist
                                require('autoprefixer')()
                                // require('autoprefixer')({

browsers: \['last 2 version', '>1%', 'ios 7'\]

})
                            ]
                        }
                    },
                    {
                        loader: 'px2rem-loader',
                        options: {
                            // 1rem = 75px
                            remUnit: 75,
                            // 小數點位數
                            remPrecesion: 8
                        }
                    }
                ]
            },
            {
                test: /\.(png|jpg|gif|jpeg)$/,
                use: [
                    {
                        // 單獨文件
                        loader: 'file-loader',
                        options: {
                            name: '[name]_[hash:8].[ext]'
                        }
                    }
                ]
            },
            // {
            //     test: /\.(png|svg|gif|jpg|jpeg)$/,
            //     use: [
            //         {
            //                 // 內聯在代碼中
            //             loader: 'url-loader',
            //             options: {
            //                 limit: 10240 // B
            //             }
            //         }
            //     ]
            // },
            {
                test: /\.(otf|woff2|eot|ttf|woff)$/,
                use: [
                    'file-loader'
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name]_[contenthash:8].css'
        })
    ]
};

// package.json
"browserslist": [
    "last 2 version",
    "> 1%",
    "ios 7"
]

各個loader的用法都在註釋裏~

解析ES6的loader，須要新增一個.babelrc文件配置一下~

// .babelrc

{
    "presets": [
        // 支持ES6
        "@babel/preset-env"
    ]
}

配置eslint檢查，一樣須要新增一個.eslintrc.js文件配置~具體配置可見ESlint

// .eslintrc.js
module.exports = {
    parser: 'babel-eslint',
    // 繼承哪一個規則
    // extends: '',
    rules: {
        semi: 'warn'
    },
    env: {
        brower: true,
        node: true
    }
};

上面提到了一個mini-css-extract-plugin插件，這個插件是將解析好的CSS單獨抽離成一個文件，style-loader是在html中建立一個style標籤，因此，這兩個是互斥的~插件形式也適用於SSR服務端渲染打包，由於沒有document對象~以後在SSR打包中也會提到這點~

最後再說一個autoprefixer，這個因爲版本不一樣，寫法有一些不同~最新版本建議把browserslist寫在package.json，老版本直接在引用時傳入~這塊在上面代碼有所提現，你們能夠注意下~

就到這裏了，列舉了一些經常使用loader，說明比較少，更爲詳細的用法或者須要更多的loader能夠在npm官網或者webpack官網查看~
直接上代碼了~能夠移步Demo