A.安裝style-loader,css-loader來處理樣式文件
? ? ? ? npm install style-loader css-loader -D
B.安裝less,less-loader處理less文件
????????npm install less-loader less -D
C.安裝sass-loader,node-sass處理less文件
? ? ? ? npm install sass-loader node-sass -D
D.安裝post-css自動添加css的兼容性前綴（-ie-,-webkit-）
? ? npm install postcss-loader autoprefixer -D
E.打包樣式表中的圖片以及字體文件
在樣式表css中有時候會設(shè)置背景圖片和設(shè)置字體文件，一樣需要loader進行處理
使用url-loader和file-loader來處理打包圖片文件以及字體文件
? ? npm install url-loader file-loader -D
F.打包js文件中的高級語法：在編寫js的時候铜异，有時候我們會使用高版本的js語法
有可能這些高版本的語法不被兼容碎浇，我們需要將之打包為兼容性的js代碼
我們需要安裝babel系列的包
A.安裝babel轉(zhuǎn)換器
? ? npm install babel-loader @babel/core @babel/runtime -D
B.安裝babel語法插件包
? ? npm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
C.在項目根目錄創(chuàng)建并配置babel.config.js文件
????????module.exports = {
? ? ? ? presets:["@babel/preset-env"],
? ? ? ? plugins:[ "@babel/plugin-transform-runtime", "@babel/plugin-proposal-class-properties" ]
? ? }
配置規(guī)則：更改webpack.config.js的module中的rules數(shù)組
module: {
? ? ? ? rules: [{
? ? ? ? ? ? ? ? //test設(shè)置需要匹配的文件類型窘茁，支持正則
? ? ? ? ? ? ? ? test: /\.css$/,
? ? ? ? ? ? ? ? //use表示該文件類型需要調(diào)用的loader
? ? ? ? ? ? ? ? use: ['style-loader', 'css-loader', 'postcss-loader']
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? ? test: /\.less$/,
? ? ? ? ? ? ? ? use: ['style-loader', 'css-loader', 'less-loader']
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? ? test: /\.scss$/,
? ? ? ? ? ? ? ? use: ['style-loader', 'css-loader', 'sass-loader']
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? ? test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
? ? ? ? ? ? ? ? //limit用來設(shè)置字節(jié)數(shù)瘟斜，只有小于limit值的圖片，才會轉(zhuǎn)換
? ? ? ? ? ? ? ? //為base64圖片
? ? ? ? ? ? ? ? use: "url-loader?limit=16940"
? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? test: /\.js$/,
? ? ? ? ? ? ? ? use: "babel-loader",
? ? ? ? ? ? ? ? //exclude為排除項，意思是不要處理node_modules中的js文件
? ? ? ? ? ? ? ? exclude: /node_modules/
? ? ? ? ? ? },
? ? ? ? ]
? ? }
