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

時間  2019-12-10
標籤 webpack4 webpack 配置文件 資源 加載 sass file loader 简体版
原文   原文鏈接

上一節中講了零配置也能夠跑起打包js的操做，可是在實際項目中，不僅是那麼簡單的打包，須要自定義配置打包的入口、輸出的出口文件。css

配置文件

如今就開始咱們的配置文件，新增目錄以下：html

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

複製代碼

webpack.config.jsnode

const path = require('path')

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

上面配置中，mode選項就是咱們的打包模式，上一節講過的。webpack

entry 就是打包的入口文件，值是一個路徑。git

output 就是打包的輸出配置項，github

filename 是最終要輸出的js文件名web

path 是輸出到什麼目錄下，使用Nodejs的內置核心模塊path，設置成絕對路徑。正則表達式

package.jsonnpm

{
  "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運行的命令。json

--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

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程