vued第11天：webpack-loaders的配置：处理css、less、图片、打包输出目录、清除目录插件，webpack开发服务器，生产环境和开发环境，ES6模块化使用

webpack

webpack - loaders 的配置

webpack默认只认识 js 文件和 json文件, 但是webpack 可以使用 loader 来加载预处理文件, 允许webpack也可以打包 js之外的静态资源。

所以webpack如果要处理其他文件类型, 记得要先配置对应的 loader

没有css-loader的报错演示

require('./css/base.css')

报错图演示:

翻译: 你需要一个合适的loader, 去处理这个文件类型

webpack中处理 css 文件

需求: 去掉小圆点, 清除默认的margin 和 padding, 新建 css 目录

1. 安装依赖

   yarn add style-loader css-loader -D

2. 配置

   module: {
        
     // loader的规则
     rules: [
       {
        
         // 正则表达式，用于匹配所有的css文件
         test: /\.css$/,
         // 先用 css-loader 让webpack能够识别 css 文件的内容
         // 再用 style-loader 将样式, 以动态创建style标签的方式添加到页面中去
         use: [ "style-loader", "css-loader"]
       }
     ]
   },
   

分离 css 文件

我们上面的操作，使得css和js文件混杂在一起了，将css放到了style标签中, 和html一起加载了一个文件请求次数是少了

但是如果css文件太大的话，也不是太好，那有没有什么办法把css分离出来呢？

https://webpack.docschina.org/

• 有一个插件，mini-css-extract-plugin，这个插件支持webpack4.x

• 还有一个插件extract-text-webpack-plugin这个插件对webpack3.x的版本支持，被webpack4.x废弃了 (所以没用了)

1. 安装依赖包

   yarn add mini-css-extract-plugin -D
   

2. 在webpack.config.js文件中，引入这个模块

   // 引入分离 css 文件的 模块
   const MiniCssExtractPlugin = require('mini-css-extract-plugin')
   

3. 配置loaders

   // 模块加载
   module: {
        
     // loader的规则
     rules: [
       // 配置 css 文件的解析
       {
        
         test: /\.css$/,
         use: [ // 根据官方文档写的，注意'css-loader'的书写位置
           {
        
             loader: MiniCssExtractPlugin.loader,
             options: {
        
               publicPath:'../',
             },
           },
           'css-loader'
         ]
       },
     ],
   }
   

4. 插件的配置 (不要忘了这步)

   plugins: [
     new HtmlWebpackPlugin({
         template: './public/index.html' }),
     // 定义打包好的文件的存放路径和文件名
     new MiniCssExtractPlugin({
         
       filename:'css/index.css'
    })
   ],
   

webpack 中处理 less 文件

1. 下载依赖包

   注意: 解析less文件需要识别 less 语法, 所以除了 less-loader 需要额外下载 less 包

   less-loader: 将less转换成 css

   yarn add less  less-loader  -D
   

2. 配置

   // 配置 less 文件的解析
   {
        
     test: /\.less$/,
     use: [
       // 分离出 css 内容
       {
        
         loader: MiniCssExtractPlugin.loader,
         options: {
        
             publicPath:'../',
         },
       }, 
       'css-loader',
       'less-loader' 
     ]
   }