webpack4-02-配置文件、资源加载器（sass、file）- loader

最新推荐文章于 2023-01-08 23:09:23 发布
最新推荐文章于 2023-01-08 23:09:23 发布
阅读量1.2k 收藏 1
点赞数 1
文章标签： webpack json ViewUI
原文链接：https://juejin.im/post/5cd3a231f265da036c57a246
版权

上一节中讲了零配置也可以跑起打包js的操作，但是在实际项目中，不只是那么简单的打包，需要自定义配置打包的入口、输出的出口文件。

配置文件

现在就开始我们的配置文件，新增目录如下：

  lesson-02
  |- node-modules
  |- package.json
  |- package-lock.json
  |- /src
    |- index.js
  |- index.html
+ |- webpack.config.js

复制代码

webpack.config.js

const path = require('path')

module.exports = {
	mode: 'development',
	entry: './src/index.js',
	output: {
		filename: 'bundle.js',
		path: path.resolve(__dirname, 'dist')
	}
} 
复制代码

上面配置中，mode选项就是我们的打包模式，上一节讲过的。

entry 就是打包的入口文件，值是一个路径。

output 就是打包的输出配置项，

filename 是最终要输出的js文件名

path 是输出到什么目录下，使用Nodejs的内置核心模块path，设置成绝对路径。

package.json

{
  "name": "lesson-02",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "npx webpack --config webpack.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.30.0",
    "webpack-cli": "^3.3.0"
  }
}

复制代码

在scripts 选项中新增dev选项，用于npm运行的命令。

--config webpack.config.js

是设置webpack配置的参数项，运行webpack命令时，会读取此配置文件。

现在我们运行命令，如下：

npm run dev

Version: webpack 4.30.0
Time: 153ms
Built at: 2019-04-21 12:19:07
    Asset     Size  Chunks             Chunk Names
bundle.js  3.8 KiB    main  [emitted]  main
Entrypoint main = bundle.js
[./src/index.js] 28 bytes {main} [built]
复制代码

会在dist目录下生成了bundle.js文件，对应的就是我们配置文件的配置文件。

资源加载器（loaders）

1. 加载CSS

webpack打包css,需要对应的加载器才能打包，否则会报错，安装加载器，如下：

npm i style-loader css-loader -D
复制代码

webpack.config.js

  const path = require('path');

  module.exports = {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist')
    },
+   module: {
+     rules: [
+       {
+         test: /\.css$/,
+         use: [
+           'style-loader',
+           'css-loader'
+         ]
+       }
+     ]
+   }
  };
复制代码

在配置文件中，新增了module选项，webpack 根据正则表达式，来确定应该查找哪些文件，并将其提供给指定的 loader。在这种情况下，以 .css 结尾的全部文件，都将被提供给 style-loader 和 css-loader。

在src下新增style.css文件，目录如下：

  lesson-02
  |- node-modules
  |- package.json
  |- package-lock.json
  |- /src
+   |- style.css
    |- index.js
  |- index.html
+ |- webpack.config.js

复制代码

style.css

html,body{
	background: red;
}
复制代码

修改index.js

import './style.css'

console.log('Hello World!');
复制代码

再次运行：

npm run dev

> lesson-02@1.0.0 dev C:\Users\Qin\Desktop\js-demo\webpack4-lesson\lesson-02
> npx webpack --config webpack.config.js

Hash: c146e67d4287c2ce96f5
Version: webpack 4.30.0
Time: 437ms
Built at: 2019-04-21 12:31:42
    Asset      Size  Chunks             Chunk Names
bundle.js  23.6 KiB    main  [emitted]  main
Entrypoint main = bundle.js
[./node_modules/css-loader/dist/cjs.js!./src/style.css] 176 bytes {main} [built]
[./src/index.js] 52 bytes {main} [built]
[./src/style.css] 1.06 KiB {main} [built]
    + 3 hidden modules
复制代码

运行完成后，会将style.css打包进bundle.js内。

在浏览器中打开index.html，发现body背景颜色变成了红色，说明打包成功！！

2. 加载sass/scss

借助sass-loader、dart-sass，dart-sass将sass/scss转成浏览器可以解析的css代码。

安装：

npm i sass-loader dart-sass -D
复制代码

修改：webpack.config.js

const path = require('path')

module.exports = {
	mode: 'development',
	entry: './src/index.js',
	output: {
		filename: 'bundle.js',
		path: path.resolve(__dirname, 'dist')
	},
	module: {
    rules: [
      {
        test: /\.(css|scss|sass)$/,
        use: [
+          { loader: 'style-loader' },
+          { loader: 'css-loader' },
+          {
+            loader: 'sass-loader',
+            options: {
+              implementation: require('dart-sass')
+            }
+          }
        ]
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        loader: 'file-loader',
        options: {
          name: '[path]/[name].[ext]',
        },
      }
    ]
  }
} 
复制代码

新增index.scss

  lesson-02
  |- node-modules
  |- package.json
  |- package-lock.json
  |- /src
    |- style.css
+   |- index.scss
    |- index.js
  |- index.html
  |- webpack.config.js

复制代码

index.scss

body {
	&{
		background-color: yellow;
	}
	#box {
		background-repeat: no-repeat;
	}
}
复制代码

在index.js内引入

import './style.css'
import './index.scss'

console.log('Hello World!');
复制代码

运行

npm run dev
复制代码

如果成功打包，打开index.html就能看到scss内的样式。

3. 加载图片

现在我们在style.css加入如下样式：

style.css

html,body{
	background: red;
}

+ #box {
+	width: 200px;
+	height: 200px;
+	background-image: url(./F.png);
+ }
复制代码

修改index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>配置文件、资源加载器（loaders）</title>
</head>
<body>
+	<div id="box"></div>
	<script src="./dist/bundle.js"></script>
</body>
</html>
复制代码

再次运行命令：

npm run dev

> lesson-02@1.0.0 dev C:\Users\Qin\Desktop\js-demo\webpack4-lesson\lesson-02
> npx webpack --config webpack.config.js

Hash: 2adcd84d84a2ec8223c1
Version: webpack 4.30.0
Time: 401ms
Built at: 2019-04-21 12:44:34
    Asset      Size  Chunks             Chunk Names
bundle.js  25.3 KiB    main  [emitted]  main
Entrypoint main = bundle.js
[./node_modules/css-loader/dist/cjs.js!./src/style.css] 452 bytes {main} [built]
[./src/F.png] 177 bytes {main} [built] [failed] [1 error]
[./src/index.js] 52 bytes {main} [built]
[./src/style.css] 1.06 KiB {main} [built]
    + 4 hidden modules

ERROR in ./src/F.png 1:0
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./src/style.css (./node_modules/css-loader/dist/cjs.js!./src/style.css) 4:41-59
 @ ./src/style.css
 @ ./src/index.js
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! lesson-02@1.0.0 dev: `npx webpack --config webpack.config.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the lesson-02@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Qin\AppData\Roaming\npm-cache\_logs\2019-04-21T04_44_34_802Z-debug.log
复制代码

发现报错了，错误提示：您可能需要适当的加载程序来处理此文件类型。

其实是缺少图片加载器，现在我们去安装它。

安装

需要安装file-loader

npm i file-loader -D
复制代码

修改 webpack.config.js

  const path = require('path');

  module.exports = {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist')
    },
    module: {
      rules: [
        {
          test: /\.css$/,
          use: [
            'style-loader',
            'css-loader'
          ]
        },
+       {
+         test: /\.(png|svg|jpg|gif)$/,
+         loader: 'file-loader',
+         options: {
+           name: '[path]/[name].[ext]',
+         }
+       }
      ]
    }
  };
复制代码

运行命令：

npm run dev

> lesson-02@1.0.0 dev C:\Users\Qin\Desktop\js-demo\webpack4-lesson\lesson-02
> npx webpack --config webpack.config.js

Hash: d33708d90a7ea8fc12b2
Version: webpack 4.30.0
Time: 449ms
Built at: 2019-04-21 13:35:16
     Asset       Size  Chunks             Chunk Names
 bundle.js   25.2 KiB    main  [emitted]  main
src//F.png  416 bytes          [emitted]
Entrypoint main = bundle.js
[./node_modules/css-loader/dist/cjs.js!./src/style.css] 452 bytes {main} [built]
[./src/F.png] 56 bytes {main} [built]
[./src/index.js] 52 bytes {main} [built]
[./src/style.css] 1.06 KiB {main} [built]
    + 4 hidden modules
复制代码

运行完成后，打开index.html，发现图片成功加载了。

完成

更多的资源加载器，可以点击查看 官方文件

项目地址

源码地址点击这GitHub

weixin_33991418
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
sass-variable-loader：用于Webpack的Sass变量加载器
03-02
用于Webpack的Sass变量加载器 解析您的Sass变量，并返回一个对象，其中包含每个变量camelCased和最终值，就像在CSS中一样。 这意味着完全支持Sass的变亮，变暗，混合等。 输入： $gray-base : #000 !default ; $gray-darker : lighten ( $gray-base , 13.5 % ) !default ; // #222 $gray-dark : lighten ( $gray-base , 20 % ) !default ; // #333 $gray : lighten ( $gray-base , 33.5 % ) !default ; // #555 $gray-light : lighten ( $gray-base , 46.7 % ) !default ; // #777 $gray-lighter :
Vue引入TweenMax
Mybabyying的博客
11-23 1419
npm安装 npm install gsap --save-dev 引入文件 import {TweenMax} from ‘gsap’
Webpack 基础 - 学习笔记
weixin_50290666的博客
01-08 209
webpack 基础的学习笔记。
webpack工具知多少（下篇）
小峰同学的前端小屋
06-14 432
文章目录1.loader VS Plugin区别2.loader VS Plugin3.webpack引入scss(dart-sass)4.webpack引入less和stylus5.webpack引入图片6.懒加载webpack import()7.webpack一键部署到github 1.loader VS Plugin区别 2.loader VS Plugin loader是加载器，用于加载loder文件的；plugin是插件，用于拓展webpack功能的，loader比如js通过bable loa
webpack4.0 的配置及简单使用
锋利的二丫
09-09 4486
webpack 学习 webpack 能极大的扩充前端开发视野，所以推荐前端开发工程师，使用 webpack 构建工具。 webpack 4.0 相对于之前的版本，有了更多的变化，开发速度更快，大型项目能节约 90% 的构建时间。 webpack 4.0 内置了更多的默认配置，变更了许多 API。 webpack 的简单介绍 在面向对象的编程思想出现以前，我们都是使用面向过程的方式做网页开发的。要...
webpack4.0各个击破（2）—— CSS篇
weixin_33758863的博客
08-20 159
webpack作为前端最火的构建工具，是前端自动化工具链最重要的部分，使用门槛较高。本系列是笔者自己的学习记录，比较基础，希望通过问题 + 解决方式的模式，以前端构建中遇到的具体需求为出发点，学习webpack工具中相应的处理办法。（本篇中的参数配置及使用方式均基于webpack4.0版本） 一. CSS文件基本处理需求 假设项目中的CSS文件均采用预编译语言编写，那么在打包中需要处理的基本...
前端学习案例4-webpack中使用file-loader
qq_41632427的博客
12-09 166
前端
10 webpack4.x 文件资源（图片、字体）打包file-loader 和 url-loader
黄彪博客
01-21 1173
文章目录文章参考file-loader应用场景安装案例 —— 引入字体库的配置url-loader安装案例——图片打包file-loader 与 url-loader 的区别？file-loaderurl-loader相同点关系webpack打包html里面img后src为“[object Module]”问题? 文章参考 url-loader github file-loader 官方解释...
webpack4.+的使用（二）(css、less、file-loader的使用)
qq_40600379的博客
02-16 1180
webpack4.+的使用（二）(css、less、file-loader的使用) 一、css-loader的基本使用 1、进入项目目录，下载webpack，在cmd中输入npm i webpack -g下载webpack开发依赖，并在cmd中输入npm init --yes初始化package.json。 2、进入项目目录，在cmd中输入npm i css-loader style-loader...
webpack4.x - 4 loader处理css和sass
wltsysterm的博客
07-21 495
目录 背景 loader概念 用 css-loader 和 style-loader 处理 CSS css-loader 和 style-loader安装 配置文件新增css-loader style-loader 用 sass-loader和node-sass把 SASS 编译成 CSS 安装sass-loader和node-sass 配置文件新增scss-loader 背景 前面我们引入了html-webpack-plugin，细心的同学发现怎么一直都没有讲css呢。因为css的
webpack的Sassloader用于将Sass编译成CSS
08-08
webpack的Sass loader，用于将Sass编译成CSS
react-styling-loader:Webpack的React样式加载器模块
05-12
Webpack的加载器模块用法var styles = require('react-styling!file.css'); 与其他样式的加载器一起使用。 var styles = require('react-styling!less!file.less'); 或者var styles = require('react-styling!sass!...
Webpack-React-Sass-Sample:使用react-hot-loader和webpack-dev-server实施LiveReload
05-16
Webpack-React-Sass-Sample Implement LiveReload with react-hot-loader & webpack-dev-server It is a practice to learn how to use Webpack with React. 此范例使用webpack-dev-server 来watch file 实现Live...
sass-bulk-import-loader:使用Webpack导入SCSS中的目录
05-04
sass-bulk-import-loader 该Webpack加载程序基于Matthew Conlen的gulp 安装npm install --save-dev sass-bulk-import-loader用法@import " some/path/* " ;// becomes// @import "some/path/file1.scss";// @import ...
webpack-basics:使用Watch，开发服务器，babel，clean插件，CSSSCSS加载器，html加载器的基本Webpack 4设置。
05-15
Webpack 4基本设置，包括监视，开发服务器，css / scss，html，文件加载器和插件。 已安装套件 的深入说明 安装依赖项 cd path-to-your-project npm install 额外安装 npm i -g ntl 通过运行ntl ，可以选择要运行...
threejs-es6-webpack-barebones-boilerplate：用于测试ThreeJS的Webpack ES6配置和devprod环境
01-31
threejs-es6-webpack-barebones-样板关于创建该项目的目的是为 ，JavaScript和学习者提供一个良好的起点。 我想创建一个最佳的开发和生产环境，该环境易于理解，并且为专家和新手都轻松设置。 项目重点： 不显眼-...
webpack4.x入门详解（一）
风舞红枫的个人博客
02-28 559
目录前言安装起步通过配置文件来使用webpackloaderplugin本地服务热更新HotModuleReplacementPluginsource map总结 前言     本文将会对webpack4.x基础常用配置一一解释，各步骤都有详解截图及注释，建议跟着本文手动搭建一次，相信你会因此对webpack有一定的认识（大佬建议自动略过本文）。 安装 (1)创建package.json文件     首先新建一个空文件夹，用于创
webpack支持scss文件，webpack sass配置
weixin_46787337的博客
07-12 1152
注意：这里是个坑，如果你在前端项目上配置webpack一定要安装的是而不是,这两个依赖不要同时装，同时装的话webpack优先使用那么就会报错
webpack4中sass的使用
huhuhuja
11-25 504
1:安装 npminstallsass-loadernode-sass--save-dev 2:配置中加入 sass 重新编译就可以 { test: /\.s[ac]ss$/i, use: [ MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader', ], },
使用webpack5从0搭建。 webpack配置分为三个文件webpack.dev.js webpack.common.js webpack.pro.js webpack.dev.js 开发环境配置 webpack.common.js 是公共配置文件 webpack.pro.js 生产环境配置 package.json 配置三个命令 serve 启动 对应配置webpack.dev.js build打包 对应配置webpack.pro.js 要求配置babel，eslint，dev-server, css-loader,scss-loader,post-loader,style-loader,css压缩，JS压缩，file-loader url-loader,clean-webpack-plugin, js多进程打包，
最新发布
06-06
好的，您的问题是如何...其中包含了babel、eslint、dev-server、css-loader、scss-loader、post-loader、style-loader、css压缩，JS压缩，file-loader、url-loader、clean-webpack-plugin、js多进程打包等常用配置。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值