zoukankan      html  css  js  c++  java
  • webpack 之(3) webpack.config.js配置 之 css/less

    webpack5的版本 后面有版本会单独出一篇文章

    通过load打包css文件

       第一步:需要下载各种loader

      第二步:在index.html中需要引入打包好的文件built.js

    /* 
    webpack.config.js webpack 的配置文件 
    作用:指示webpack干哪些活(当你运行webpck指令时,会加载里面的配置)
    */
    const { resolve } = require('path');
    module.exports = {
      //webpack配置
      /* 入口起点 */
      entry:'./src/index.js',
      //输出
      output:{
        /* 输出文件名 */
        filename:'built.js',
        /* 输出路径
        __dirname 是nodejs的变量,代表当前文件的目录绝对路径
        */
        path:resolve(__dirname,'build')
        
      },
      //loader的配置
      module: {
        rules: [
          //详细loader配置
          {
            //匹配哪些文件
            test: /.css$/,
            use: [
              //use数组中loader执行顺序:从右到左,从下到上
              //创建style标签,将js中的样式资源插入进行,添加到head中生效
              'style-loader',
              //将css文件变成commonjs模块加载js中,里面内容是样式字符窜
              'css-loader'
            ]
          },
          {
            //匹配哪些文件
            test: /.less$/,
            use: [
              'style-loader',
              'css-loader',
              //将less文件编译成css文件
              //需要下载less-loader和less
              'less-loader'
            ]
          }
          
        ]
      },
      //plugins(插件的配置)
      plugins:[
    
      ],
      //模式 只能写一种
       mode:'development'   //开发模式
       //mode:'production'  //发布模式
    }
  • 相关阅读:
    面试题-代码
    面试题-数仓
    烂大街的NginxRedisMqDb架构.md
    Ansible-B站.md
    openstack.md
    rabbitMQ.md
    大数据仓库实战项目-电商数仓3.0版.md
    linux分析工具之top命令详解
    小程序开发中 在 wxml格式化 属性断行
    redhat 7.2更新yum源时踩的坑
  • 原文地址:https://www.cnblogs.com/zmztya/p/14707049.html
Copyright © 2011-2022 走看看