webpack4-02-配置檔案、資源載入器（sass、file）- loader

Webpack Sass · 發表 2019-05-09 11:58:08

摘要：上一節中講了零配置也可以跑起打包js的操作，但是在實際專案中，不只是那麼簡單的打包，需要自定義配置打包的入口、輸出的出口檔案。配置檔案現在就開始我們的配置檔案，新增目錄如下： lesson-02 |- node-modules |- package.json |- ...

上一節中講了零配置也可以跑起打包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
AssetSizeChunksChunk Names
bundle.js3.8 KiBmain[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

> [email protected] 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
AssetSizeChunksChunk Names
bundle.js23.6 KiBmain[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

> [email protected] 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
AssetSizeChunksChunk Names
bundle.js25.3 KiBmain[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! [email protected] dev: `npx webpack --config webpack.config.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] 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

> [email protected] 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
AssetSizeChunksChunk Names
 bundle.js25.2 KiBmain[emitted]main
src//F.png416 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，發現圖片成功載入了。