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