Webpack中loader打包各類文件

使用webpack時，在main.js文件中直接使用以下代碼導入了style.css文件，控制檯中顯示以下錯誤：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中默認只能打包.js類型文件，沒法打包其餘類型文件。若是要打包非.js類型文件，須要手動安裝一些第三方loader加載器。 如下爲各類文件類型打包實例：

處理css文件

方式一

1. 在項目中用npm命令本地安裝style-loader和css-loader兩個包

npm install style-loader css-loader --save--dev 
複製代碼

2. 在引用style.css文件時，將import './css/style.css';代碼改成如下代碼：

import 'style-loader!css-loader!./style.css'")'; //先通過css-loader和style-loader處理 複製代碼

3. 從新用webpack打包

npm run dev 
複製代碼

這種方式的缺點是，當須要引入多個css文件，每次引入時都須要加style-loader!css-loader!，比較麻煩，所以推薦使用如下方式：

方式二

1. 在項目中用npm命令本地安裝style-loader和css-loader兩個包

npm install style-loader css-loader --save--dev 
複製代碼

2. 打開webpack.config.js文件，在裏面新增一個配置節點module，在module對象中，有一個rules屬性，它是一個數組，裏面存放了全部第三方文件匹配和處理規則。以下代碼匹配處理css文件：

module: { // 配置全部第三方loader 模塊
    rules: [ // 第三方模塊的匹配規則
      { test: /\.css$/, use: ['style-loader', 'css-loader'] }, // 處理 CSS 文件的 loader
    ]
  }
複製代碼

注意：此處'style-loader'和'css-loader'順序不可替換。由於use中處理順序爲從後往前。先用css-loader對css文件進行處理，將處理後的結果交給style-loader做進一步處理，處理爲webpack能夠進行打包的數據。

3. 引入style.css文件

import './css/style.css';
複製代碼

4. 從新用webpack打包

npm run dev 
複製代碼

如下全部其餘類型文件的打包同方式二

處理less文件

1. 在項目中用npm命令本地安裝style-loader和css-loader和less-loader和less三個包(若已有style-loader和css-loader則沒必要再安裝這兩個)

npm install style-loader css-loader less-loader less --save--dev 
複製代碼

2. 打開webpack.config.js文件，在節點module中rules屬性數組中，新增以下less的規則：

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

3. 引入style.less文件

import './css/style.less';
複製代碼

4. 從新用webpack打包

npm run dev 
複製代碼

處理scss文件

1. 在項目中用npm命令本地安裝style-loader和css-loader和sass-loader和node-sass四個包(若已有style-loader和css-loader則沒必要再安裝這兩個)

npm install style-loader css-loader sass-loader node-sass --save--dev 
複製代碼

2. 打開webpack.config.js文件，在節點module中rules屬性數組中，新增以下scss的規則：

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

3. 引入style.scss文件

import './css/style.lcss';
複製代碼

4. 從新用webpack打包

npm run dev 
複製代碼

處理url地址

例如，在css樣式中使用background-image:url('...')，webpack默認沒法處理url，所以也須要手動安裝第三方loader

1. 在項目中用npm命令本地安裝url-loader和file-loader兩個包

npm install url-loader file-loader --save--dev 
複製代碼

2. 打開webpack.config.js文件，在節點module中rules屬性數組中，新增以下的規則：

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

3. 從新用webpack打包

npm run dev 
複製代碼

處理ES6高級語法

webpack默認只能處理一部分的ES6語法，對於一些更高級的ES6語法，webpack沒法處理，以下代碼用webpack打包會報錯。

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

webpack須要藉助於第三方的 loader，這裏使用Babel，將高級的ES6語法轉爲低級的語法以後，再將結果進行打包。

1. 用npm命令安裝以下包：

npm i babel-core babel-loader babel-plugin-transform-runtime -D
npm i babel-preset-env babel-preset-stage-0 -D
複製代碼

2. 打開webpack.config.js文件，在節點module中rules屬性數組中，新增以下的規則：

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

3. 在項目的 根目錄中，新建一個 叫作 .babelrc 的Babel 配置文件，這個配置文件，屬於JSON格式。裏面寫入以下代碼：

{
   "presets": ["env", "stage-0"],
   "plugins": ["transform-runtime"]
}
複製代碼

4. 從新用webpack打包