zoukankan      html  css  js  c++  java
  • webpack loader配置篇

    module: {
       rules: [
        {
            test: /.css/,//匹配以CSS结尾的文件
            use: ['style-loader','css-loader'],//执行过程是从右至左,这两个顺序不能调换
          先使用css-loader打包到js里,在使用style-loader插入到html里面;
          如果只有一个loader,不需要使用use;可以直接写成以下方式
         loader:'css-loader'
          },
          {
        test: /.js/,
            use: 
          loader: '',
          options: {
            // 这里可以指定一个 publicPath
            // 默认使用 webpackOptions.output中的publicPath
            publicPath: '../'
          },

         }, } ] }

    如果单独提取css文件,将一些css打包到一个文件里面,那么就得安装插件mini-css-extract-plugin,这是将CSS提取为独立的文件的插件

    如果打包后想压缩css,还得引入optimize-css-assets-webpack-plugin插件

    如果想做css兼容,额,就是在加css前缀,那么需要引入postcss-loader

    const  MiniCssExtractPlugin= require('mini-css-extract-plugin')
    const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
    module: {
       rules: [
        {
            test: /.css/,
            use: [miniCssExtractPlugin.loader,'css-loader'],
          },
          {
        test: /.less/,
            use: [miniCssExtractPlugin.loader,'css-loader','less-loader'],
          }
        ]
    },
    plugins:{
      new MiniCssExtractPlugin({
        filename: ''//可以不写,写了以后打包出来的文件名就是这里定义的文件名
      })
     new
    OptimizeCSSAssetsPlugin()
    }
    都是开发中自己用到的工具啦,如果对你有帮助,那我就很开心了
  • 相关阅读:
    第一轮铁大树洞APP开发冲刺(3)
    记一次寒假小尝试心得体会
    小学四则运算口算练习app---No.7
    小学四则运算口算练习app---No.6
    小学四则运算口算练习app---No.5
    小学四则运算口算练习app---No.4
    小学四则运算口算练习app---No.3
    小学四则运算口算练习app---No.2
    小学四则运算口算练习app
    《需求工程--软件建模与分析》读书笔记03
  • 原文地址:https://www.cnblogs.com/maomao93/p/14482999.html
Copyright © 2011-2022 走看看