webapck 的理解

plugin

使用映射source-map

1. 开发环境 develoot : cheap-module-eval-source-map
2. 生产环境 develoot: cheap-module-source-map

webpack的核心概念

webpack的底层原理

Vue-Cli脚手架工具配置分析

Vue3项目配置

loader

css增加前缀 -- postcss-loader

需求：在项目中自动添加样式前缀

webkit-transform: translate(180px);
-moz-transform: translate(180px);
-ms-transform: translate(180px);
-o-transform: translate(180px);
transform: translate(180px) //仅此行是在css中写的

1. 安装 postcss-loader

npm i -D postcss-loader postcss autoprefixer

2. 在vue.config.js中进行配置

module.exports=defineConfig({
    css:{
        loaderOptions:{
            postcss: {
                postcssOptions: {
                  plugins: [
                    [
                      'autoprefixer', {
                        overrideBrowserslist: [
                          ">0%" //所有浏览器
                        ],
                        grid: true
                      }
                    ]
                  ],
                },
             }
        }
    }
})

postcss-loader官方链接

3. 代码书写

4. 使用前
   

5. 使用后