zoukankan      html  css  js  c++  java
  • webpack learn1-配置项目加载各种静态资源及css预处理器2

    继续在webpack.config.js中配置loader

    {
    test:/.css$/,
    use: [
    'style-loader',
    'css-loader'
    ]
    },{
    test:/.(jpg|svg|jpeg|png|gif)$/,
    use: [
    {
    loader: 'url-loader',
    options: {
    limit: 1024,
    name: '[name]-aa.[ext]'
    }
    }
    ]
    }

    变成下面:

     1 const path = require('path')
     2 
     3 const VueLoaderPlugin = require('vue-loader/lib/plugin')
     4 
     5 module.exports = {
     6   entry: path.join(__dirname,'src/index.js'),
     7   output: {
     8     filename: 'bundle.js',
     9     path: path.join(__dirname,'dist')
    10   },
    11   module: {
    12     rules: [
    13       {
    14         test: /.vue$/,
    15         loader: 'vue-loader'
    16       },{
    17         test:/.css$/,
    18         use: [
    19           'style-loader',
    20           'css-loader'
    21         ]
    22       },{
    23         test:/.(jpg|svg|jpeg|png|gif)$/,
    24         use: [
    25           {
    26             loader: 'url-loader',
    27             options: {
    28               limit: 1024,
    29               name: '[name]-aa.[ext]'
    30             }
    31           }
    32         ]
    33       }
    34     ]
    35   },
    36   plugins:[
    37       new VueLoaderPlugin()
    38   ]
    39 }
    View Code

    需要输入命令:

    npm i css-loader url-loader file-loader style-loader

    再添加css预处理器stylus:先在webpack.config.js中添加loader ,然后安装stylus和stylus-loader

    const path = require('path')
    
    const VueLoaderPlugin = require('vue-loader/lib/plugin')
    
    module.exports = {
      entry: path.join(__dirname,'src/index.js'),
      output: {
        filename: 'bundle.js',
        path: path.join(__dirname,'dist')
      },
      module: {
        rules: [
          {
            test: /.vue$/,
            loader: 'vue-loader'
          },{
            test:/.css$/,
            use: [
              'style-loader',
              'css-loader'
            ]
          },{
            test: /.styl/,
            use: [
              'style-loader',
              'css-loader',
              'stylus-loader'
            ]
          },{
            test:/.(jpg|svg|jpeg|png|gif)$/,
            use: [
              {
                loader: 'url-loader',
                options: {
                  limit: 1024,
                  name: '[name]-aa.[ext]'
                }
              }
            ]
          }
        ]
      },
      plugins:[
          new VueLoaderPlugin()
      ]
    }
    View Code

    输入命令

    npm i stylus stylus-loader
  • 相关阅读:
    PHP 使用memcached
    linux下使用yum安装 mencached
    mysql 连接字符串 CONCAT
    linux 下 apache启动、停止、重启命令
    js中push()的用法
    linux下使用yum安装mysql
    SVN服务器多个项目的权限分组管理
    yum 安装nginx
    Linux下php安装Redis安装
    使用BarcodeLib.Barcode.ASP.NET生成条形码
  • 原文地址:https://www.cnblogs.com/init-007/p/10896524.html
Copyright © 2011-2022 走看看