深入浅出webpack之webpack配置和css处理

入口

入口是指定webpack使用哪个模块(js文件),来作为构建其内部依赖图的开始,进入入口之后,webpack会找到有哪些模块和库是入口文件直接或间接依赖的

• 创建webpack.config.js

module.exports = {
    //入口文件
    entry:'./src.main.js'
}

出口

出口属性告诉webpack在哪里输出它所创建的bundle,以及如何命名这些文件.主要输出文件的默认值是 ./dist/main.js，其他生成文件默认放置在 ./dist 文件夹中。**

//出口文件路径需要借助node内置模块path来进行路径获取
const path = require('path')
module.exports = {
    //出口文件
    output:{
        filename:'bundle.js',
        path:path.resolve(__dirname,'./build')
    }
}

配置文件别名

默认webpack会去找根目录下的webpack.config.js,如果找不到则使用webpack默认配置,我们可以在package.json中进行别名配置

"build":"webpack --config.js awei.config.js"

loader

loader可以用于对模块的源代码进行转换,我们可以将css文件也看成是一个模块,我们是通过import来加载这个模块的,在加载这个模块时,webpack其实并不知道如何对其进行加载,我们比如指定对应的loader来完成这个功能

• css-loader

  • npm install css-loader -D

const path = require('path')
module.exports = {
    //出口文件
    output:{
        filename:'bundle.js',
        path:path.resolve(__dirname,'./build')
    },
    module:{
        rules:[
            {
                test:/.css$/,
                use:[
                    {
                        loader:'css-loader'
                    }
                ]
            }
        ]
    }
}

• style-loader

  • npm install style-loader -D

const path = require('path')
module.exports = {
    //出口文件
    output:{
        filename:'bundle.js',
        path:path.resolve(__dirname,'./build')
    },
    module:{
        rules:[
            //loader应用顺序是从下向上的
            {
                test:/.css$/,
                use:[
                    {
                        loader:'style-loader'
                    },
                    {
                        loader:'css-loader'
                    }
                ]
            }
        ]
    }
}

• less-loader

  • npm i less less-loader -D

 const path = require('path')
    module.exports = {
        //出口文件
        output:{
            filename:'bundle.js',
            path:path.resolve(__dirname,'./build')
        },
        module:{
            rules:[
                //loader应用顺序是从下向上的
                {
                    test:/.less$/,
                    use:[
                        {
                            loader:'style-loader'
                        },
                        {
                            loader:'css-loader'
                        },
                        {
                            loader:'less-loader'
                        }
                    ]
                }
            ]
        }
    }

• Browserslist

  是一个在不同前端工具之间,共享目标浏览器和node.js版本的配置;比如Autoprefixer,Babel等
  • 配置方式

1.package.json中配置
    {
        "browserlist":[
            ">1%",
            "last 2 version",
            "not dead"
        ]
    }

2.配置文件配置
    //根目录下创建 .browserslistrc 文件
    >1% //表示是用户比例大于1%的版本
    last 2 version  //表示浏览器最后更新的两个版本
    not dead //表示24个月内有更新的浏览器

注:所有数据是以`caniuse-lite`插件查询`https://caniuse.com/usage-table`数据为标准的判定的

• postcss

  • postcss是一个通过javascript来转换样式的工具;这个工具可以帮助我们进行一些css的转换和适配,比如在自动添加浏览器前缀,css样式的重置;但是实现这些功能,我们需要借助postcss对应的插件;

  1. 使用步骤以添加浏览器前缀autoprefixer为例

     npm i postcss-loader postcss autoprefixer -D

 const path = require('path')
    module.exports = {
        //出口文件
        output:{
            filename:'bundle.js',
            path:path.resolve(__dirname,'./build')
        },
        module:{
            rules:[
                //loader应用顺序是从下向上的
                {
                    test:/.css$/,
                    use:[
                        {
                            loader:'style-loader'
                        },
                        {
                            loader:'css-loader'
                        },
                        {
                            loader:'postcss-loader',
                            options:{
                                postcssOptions:{
                                    plugins:[
                                        'autoprefixer'
                                    ]
                                }
                            }
                        }
                    ]
                }
            ]
        }
    }

注：如果我们改变了.browserslistrc文件配置,对应的打包后浏览器前缀也会相应改变

2. 使用步骤以postcss-preset-env为例

   npm i postcss-preset-env -D

//postcss-preset-env可以将一些现代的css特性转换为大多数浏览器认识的css,例如把16进制颜色值转换为rgba
//并且根据目标浏览器或者运行时环境添加所需的polyfill
//也会自动添加autoprefixer,相当于已经内置autoprefixer
const path = require('path')
        module.exports = {
            //出口文件
            output:{
                filename:'bundle.js',
                path:path.resolve(__dirname,'./build')
            },
            module:{
                rules:[
                    //loader应用顺序是从下向上的
                    {
                        test:/.css$/,
                        use:[
                            {
                                loader:'style-loader'
                            },
                            {
                                loader:'css-loader'
                            },
                            {
                                loader:'postcss-loader',
                                options:{
                                    postcssOptions:{
                                        plugins:[
                                            'postcss-preset-env'
                                        ]
                                    }
                                }
                            }
                        ]
                    }
                ]
            }
        }

3. 配置文件文件方式使用postcss

//在根目录下创建`postcss.config.js`
module.exports = {
    plugins:[
        'postcss-preset-env'
    ]
}
//在webpack.config.js中只需使用postcss-loader即可,打包时会默认去跟补录查找postcss.config.js
const path = require('path')
        module.exports = {
            //出口文件
            output:{
                filename:'bundle.js',
                path:path.resolve(__dirname,'./build')
            },
            module:{
                rules:[
                    //loader应用顺序是从下向上的
                    {
                        test:/.css$/,
                        use:[
                            {
                                loader:'style-loader'
                            },
                            {
                                loader:'css-loader'
                            },
                            {
                                loader:'postcss-loader',
                            }
                        ]
                    }
                ]
            }
        }

• 示例代码

  https://gitee.com/weiLZ598/webpack-study.git