webpack(基于webpack4)(二)

124 阅读2分钟

这是我参与11月更文挑战的第12天,活动详情查看:2021最后一次更文挑战

postcss-loader 为样式自动加上后缀

postcss-loader 为样式自动加上前缀,解决c s s3兼容问题,postcss.config.js文件配置postcss

  • 安装
npm i  postcss-loader autoprefixer -D
//webpack.config.js
 {
                test:/.css$/,
                use:["style-loader","css-loader","postcss-loader"]
            }
//postcss.config.js
let autoprefixer = require("autoprefixer")
module.exports = {
    plugins: [
        require("autoprefixer")(
            {
                overrideBrowserslist: ["last 2 versions", ">1%"]
            })
    ]
};

file-loader

当我们需要模块,仅仅是从源代码挪移到打包目录下,就可以使用file-loader来处理,例如txt,svg,excel,图片等

  • 安装
npm install file-loader -D
 {
                test:/.jpg|png|jpe?g|gif$/,
                use:[
                    {
                        loader:"file-loader",
                        options:{
                        //ext为文件后缀名
                            name:'[name].[ext]',
                            //打包后文件存放位置
                            outputPath:"./images/"
                        }
                    }
                ]
            }

url-loader

url-loader 包含file-loader file-loader能实现的功能url-loader都能实现,推荐使用url-loader,因为多一个limit参数 limit:2*1024 单位是字节,小于设置的这个值,图片转化为base64 推荐小体积图片转成base64

  • 安装
npm install url-loader -D
{
                        loader:"url-loader",
                        options:{
                            //打包后文件名称 占位符
                            name:'[name].[ext]',
                            //打包后文件输出路径
                            outputPath:"./images/",
                            //当文件大小小于设定的这个值的时候会将文件转成base64,大于这个设置值的时候就会正常将图片挪移到打包目录下
                            limit:5*1024 //单位是字节
                        }
                    }

plugin

html-webpack-plugin 默认支持ejs模版语法

读取源代码中某个html文件,自动生成到打包后目录中,并 把打包生成的js模块引⼊到该html中。 参数: filename 输出文件名,也可以带目录 title 生成页面的title 配合页面中设置 <%=htmlWebpackPlugin.options.title %> template 模板文件路径 mi nify 压缩

  • 安装
npm install html-webpack-plugin -D
  • 配置
   plugins:[
   //默认配置,读取src/index.html 输出到dist目录下
        new HtmlWebpackPlugin()
    ]
    //自定义配置
       plugins:[
        new HtmlWebpackPlugin({
           //输出页的title
            title:"首页",
            //输出文件名,也可以带目录
            filename:"html/main.html"
        })
    ]

clean-webpack-plugin

自动清理di s t文件夹

  • 安装
npm install --save-dev clean-webpack-plugin
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
...
plugins: [    new CleanWebpackPlugin() ]

mini-css-extract-plugin

将css提取到单独的文件中

  • 安装
npm install mini-css-extract-plugin -D
  • 配置
{
                test:/.css$/,
                use:[
                  //不用style-loader用MiniCssExtractPlugin
                    // "style-loader",
                    MiniCssExtractPlugin.loader,
                    "css-loader","postcss-loader"
                ]
            },
            
            
//plugins
   new MiniCssExtractPlugin(
            {
                filename: "./css/[name]-[contenthash:6].css"
            }
            )

proxy

跨域问题

proxy: {  
   "/api": {      
       target: "http://localhost:9092"      } 
    }