初探webpack-深入浅出二

学习webpack，三天时间记录四个文档。一次性更新~没有完整的流程，有时间给补上吧!

loaders:

• 加载器、加载器

• 关于Loader：

     
        use: [loader] // 1
        loader: [loader] // 2
        use:[ // 3
            {loader: [loader]}
        ]
    

CSS

• style-loader、css-loader

配置

    
        module: {
            rules: [
                {
                    test: /\.css$/,
                    use: ['style-loader', 'css-loader']
                }
            ]
        }
    

图片

• url-loader、file-loader

配置

    
        module: {
            rules: [
                {
                    test:/\.(jpg|png|gif)$/,
                    use: [
                        {
                            loader: "url-loader",
                            options: {
                                limit: 50000 // 大于50kb url展示
                            }
                        }
                    ]
                }
            ]
        }
    

Postcss

• 自动添加css前缀

依赖

    
        npm i postcss-loader autoprefixer -D
    

创建配置文件

• 在根目录下创建 postcss.config.js 文件

    
        module.exports = {
            plugins: [
                require('autoprefixer') // 引入插件
            ]
        }
    

配置loader

• 在css-loder后加入postcss-loader即可

purifycss

• 消除冗余css

下载

    
        npm i purifycss-webpack purify-css -D
    

• 需要引入glob

    
        npm i glob -D
    

引入插件

    
        const PurfyCssWebpack = require('purfycss-webpack');
        const glob = require('glob');
    

配置

    
        plugins: [
            new PurifyCssWebpack({
                paths: glob.sync(path.join(__dirname, 'src/*.html'))
            })
        ]