問題:webpack 默認只能打包處理以 .js 后綴名結尾的模塊,以下導入會報錯

import './css/1.css'

打包處理css文件

1

 npm i -d style-loader css-loader

2
在 webpack.config.js 的 module -> rules 數組中，添加 loader 規則如下：
test 表示匹配的文件類型， use 表示對應要調用的 loader

  module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader'] } ] } 

注意:
use 數組中指定的 loader 順序是固定的,既’style-loader’必須在’css-loader’之前

CSS瀏覽器兼容配置

webpack壓縮js代碼，1

npm i -d postcss-loader autoprefixer

2
在項目根目錄中創建 postcss 的配置文件 postcss.config.js

const autoprefixer = require('autoprefixer') // 導入自動添加前綴的插件 
module.exports = { plugins: [ autoprefixer ] // 掛載插件 
} 

3
在 webpack.config.js 的 module -> rules 數組中，修改 css 的 loader 規則

module: { rules: [ { test:/\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader'] } ] 
} 

加載圖片和文字字體

1

npm i -d url-loader file-loader

2
在 webpack.config.js 的 module -> rules 數組中，添加 loader 規則

module: { rules: [ {  test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,  use: 'url-loader?limit=16940' } ] 
} 

nodejs安裝包、其中 ? 之后的是 loader 的參數項。
limit 用來指定圖片的大小，單位是字節(byte),只有小于 limit 大小的圖片，才會被轉為 base64 圖片