Webpack中l(wèi)oader打包各種文件的方法實(shí)例

前言

使用webpack時(shí)，在main.js文件中直接使用如下代碼導(dǎo)入了style.css文件，控制臺(tái)中顯示如下錯(cuò)誤：You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

import './css/style.css';

原因是，webpack中默認(rèn)只能打包.js類型文件，無法打包其他類型文件。如果要打包非.js類型文件，需要手動(dòng)安裝一些第三方loader加載器。

以下為各種文件類型打包實(shí)例：

處理css文件

方式一

在項(xiàng)目中用npm命令本地安裝style-loader和css-loader兩個(gè)包

npm install style-loader css-loader --save--dev 

在引用style.css文件時(shí)，將import './css/style.css';代碼改為以下代碼：

import 'style-loader!css-loader!./style.css'")'; //先經(jīng)過css-loader和style-loader處理

重新用webpack打包

npm run dev 

這種方式的缺點(diǎn)是，當(dāng)需要引入多個(gè)css文件，每次引入時(shí)都需要加style-loader!css-loader!，比較麻煩，因此推薦使用以下方式：

方式二

在項(xiàng)目中用npm命令本地安裝style-loader和css-loader兩個(gè)包

npm install style-loader css-loader --save--dev 

打開webpack.config.js文件，在里面新增一個(gè)配置節(jié)點(diǎn)module，在module對(duì)象中，有一個(gè)rules屬性，它是一個(gè)數(shù)組，里面存放了所有第三方文件匹配和處理規(guī)則。如下代碼匹配處理css文件：

module: { // 配置所有第三方loader 模塊
 rules: [ // 第三方模塊的匹配規(guī)則
 { test: /\.css$/, use: ['style-loader', 'css-loader'] }, // 處理 CSS 文件的 loader
 ]
 }

注意：此處'style-loader'和'css-loader'順序不可替換。因?yàn)閡se中處理順序?yàn)閺暮笸啊Ｏ扔胏ss-loader對(duì)css文件進(jìn)行處理，將處理后的結(jié)果交給style-loader作進(jìn)一步處理，處理為webpack可以進(jìn)行打包的數(shù)據(jù)。

引入style.css文件

import './css/style.css';

重新用webpack打包

npm run dev 

以下所有其他類型文件的打包同方式二

處理less文件

在項(xiàng)目中用npm命令本地安裝style-loader和css-loader和less-loader和less三個(gè)包(若已有style-loader和css-loader則不必再安裝這兩個(gè))

npm install style-loader css-loader less-loader less --save--dev 

打開webpack.config.js文件，在節(jié)點(diǎn)module中rules屬性數(shù)組中，新增如下less的規(guī)則：

{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] } // 處理 less 文件的 loader

引入style.less文件

import './css/style.less';

重新用webpack打包

npm run dev 

處理scss文件

在項(xiàng)目中用npm命令本地安裝style-loader和css-loader和sass-loader和node-sass四個(gè)包(若已有style-loader和css-loader則不必再安裝這兩個(gè))

npm install style-loader css-loader sass-loader node-sass --save--dev 

打開webpack.config.js文件，在節(jié)點(diǎn)module中rules屬性數(shù)組中，新增如下scss的規(guī)則：

{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] } // 處理 less 文件的 loader

引入style.scss文件

import './css/style.lcss';

重新用webpack打包

npm run dev 

處理url地址

例如，在css樣式中使用background-image:url('...')，webpack默認(rèn)無法處理url，因此也需要手動(dòng)安裝第三方loader

在項(xiàng)目中用npm命令本地安裝url-loader和file-loader兩個(gè)包

npm install url-loader file-loader --save--dev 

打開webpack.config.js文件，在節(jié)點(diǎn)module中rules屬性數(shù)組中，新增如下的規(guī)則：

{ test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader' }, // 處理 圖片路徑的 loader
{ test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' }, // 處理 字體文件的 loader 

重新用webpack打包

npm run dev 

處理ES6高級(jí)語法

webpack默認(rèn)只能處理一部分的ES6語法，對(duì)于一些更高級(jí)的ES6語法，webpack無法處理，如下代碼用webpack打包會(huì)報(bào)錯(cuò)。

class Person {
	static info = {name:'zlx',age:18}
};
console.log(Person.info);

webpack需要借助于第三方的 loader，這里使用Babel，將高級(jí)的ES6語法轉(zhuǎn)為低級(jí)的語法之后，再將結(jié)果進(jìn)行打包。

用npm命令安裝如下包：

npm i babel-core babel-loader babel-plugin-transform-runtime -D
npm i babel-preset-env babel-preset-stage-0 -D

打開webpack.config.js文件，在節(jié)點(diǎn)module中rules屬性數(shù)組中，新增如下的規(guī)則：

{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }, // exclude是防止node_modules中的js文件被打包

在項(xiàng)目的 根目錄中，新建一個(gè) 叫做 .babelrc  的Babel 配置文件，這個(gè)配置文件，屬于JSON格式。里面寫入如下代碼：

{
 "presets": ["env", "stage-0"],
 "plugins": ["transform-runtime"]
}

重新用webpack打包

總結(jié)

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com