vuejs学习3.3 webpack基本使用——对其他文件的打包

最新推荐文章于 2024-01-16 17:54:15 发布

to-and-fro

最新推荐文章于 2024-01-16 17:54:15 发布

阅读量228

点赞数

分类专栏： vuejs

本文链接：https://blog.csdn.net/qq_39225271/article/details/108338202

版权

vuejs 专栏收录该内容

28 篇文章 2 订阅

订阅专栏

webpack主要来处理js代码，处理js之间的依赖，但是不仅仅只有js代码处理，可能包含css，图片，ES6转ES5，Typescript转ES5，scss,less转css，.vue转js等等，对于执行webpack命令本身的能力来说是不支持的，需要给webpack扩展对应的loader

注意：由于之前安装的webpack版本为3.6.0，所以需要对应合适的loader版本才能运行，所以以下都设定了版本

loader使用

链接: loader.
找到需要的loader，例如：需要打包css文件，如下进行用法查询
在这里插入图片描述

css文件处理

可以在js中添加依赖

require("./css/normal.css")

但是直接添加后进行npm run build进行打包会报错

在这里插入图片描述
所以需要添加合适的loader，网站查询css对应loader使用步骤

安装css loader

npm install --save-dev css-loader@2.0.2

配置css loader

在webpack.config.js中进行配置，在module.exports下添加对象

module: {
    rules: [
      {
        test: /\.css$/,
        use: [ 'css-loader' ]
      }
    ]
  }

但是css-loader只负责css文件加载，不负责进行解析，不负责放在html中进行生效

安装style-loader

style-loader负责将样式添加到DOM中
在这里插入图片描述

npm install style-loader@0.23.1 --save-dev

配置style-loader

结合以上css-loader配置如下：

module: {
    rules: [
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      }
    ]
  }

提示

test: /.css$/

表示匹配所以css文件，为正则表达式（由于点在正则表达式中有特殊含义，所以使用\进行转义， $表示结尾）

use: [ ‘style-loader’, ‘css-loader’ ]

使用多个loader是从右向左读，所以先进行加载，后进行解析添加到DOM上，两者的顺序是不能换的，换了会进行报错

less文件的处理

less-loader是进行加载的，less是进行转化成css的

添加依赖

require("./css/lessStyle.less")

安装less-loader less

npm install --save-dev less-loader@4.1.0  less@3.9.0

配置

 module: {
        rules: [{
            test: /\.less$/,
            use: [{
                loader: "style-loader" 
                // creates style nodes from JS strings
            }, {
                loader: "css-loader"
                 // translates CSS into CommonJS
            }, {
                loader: "less-loader" 
                // compiles Less to CSS
            }]
        }]
    }

图片文件的处理

处理文件——>url-loader

安装 url-loader

npm install --save-dev url-loader@1.1.2

配置

图片为png，jpg，gif，（由于早期的dos操作系统文件的后缀名只能支持三个，例如早期是htm，jpeg就是jpg）

 module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192
            }
          }
        ]
      }
    ]
  }

提示options: { limit: 8192 }

当加载图片小于limit时，会将图片编译成base64形式
在这里插入图片描述
当加载图片大于limit时，会报错

所以需要安装file-loader

安装file-loader

npm install --save-dev file-loader@3.0.1

图片找不到问题

安装后打包npm run build后运行，浏览器报错会显示找不到图片，打包后dist文件夹中会出现打包成的图片文件
在这里插入图片描述
但是在bundle.js中的图片路径为,./img/……，所以找不到路径

解决方法

output:{
    path:path.resolve(__dirname,'dist'),
    filename:"bundle.js",
    publicPath:"dist/"
  },

在出口添加 publicPath:“dist/” 表示任何涉及到url的都会在前面拼接 dist/ 从而找到图片的路径
在这里插入图片描述

打包后的图片有一定的格式

默认的图片名字为32位的哈希值

配置

{
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
              name:'img/[name].[hash:8].[ext]'
            }
          }
        ]
      }

在option中添加name（name:‘img/[name].[hash:8].[ext]’），img/表示文件夹，[name]表示原来的名字，[hash:8]表示八位的哈希值，[ext]表示扩展名
在这里插入图片描述

ES6转ES5

安装

npm install --save-dev babel-loader@7 babel-core babel-preset-es2015

这里安装指定了特定版本，注意官网不同

配置

{
        test: /\.js$/,
        //exclude排除
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
        }
      }

需要排除node_modules里面的js不需要转化