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

我来评几句
登录后评论

已发表评论数()

相关站点

热门文章