解析ES6使用babel-loaderbabel的配置檔案是：.babelrc在webpack.config.js中使用babel-loader

 module.exports = {        module:{            rules:[{                test:/\.js$/,                use:'babel-loader'            }]        }    }

安裝babel

npm install @babel/core @babel/preset-env babel-loader -D

在根目錄建立.babelrc

    {        "presets":[            "@babel/preset-env"  // 增加ES6的babel preset 配置        ]    }

打包:npm run build 即可

解析react jsx安裝@babel/preset-react

 npm i react react-dom @babel/preset-react -D

在.babelrc中增加react的babel preset配置

    {        "presets":[            "@babel/preset-react"        ]    }

書寫react程式碼

打包: npm run build 即可解析css lesscss-loader:用於載入.css檔案，並且轉換為commonjs物件style-loader:將樣式透過標籤插入到head中安裝css-loader style-loader

 npm i css-loader style-loader -D

在webpack.config.js中配置

style-loader 必須在css-loader前面

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

解析less: 安裝less-loader

npm i less less-loader -D

在webpack.config.js中配置less-loader

 module.exports = {    module:{        rules:[{            test:/\.js$/,            use:'babel-loader'        },{            test:/\.css$/,            use:[                'style-loader',                'css-loader'            ]        },{            test:/\.less$/,            use:[                'style-loader',                'css-loader',                'less-loader'            ]        }]    }}

書寫less檔案

打包：npm run build 即可

解析圖片解析圖片：file-loader安裝file-loader

npm i file-loader -D

在webpack.config.js中配置file-loader

module.exports = {        module:{            rules:[{                test:/\.(png|jpg|jpeg|gif)$/,                use:'file-loader'            }]        }    }

在js中引入圖片

打包：npm run build 即可解析字型使用file-loader在webpack.config.js中配置file-loader

module.exports = {        module:{            rules:[{                test:/\.(woff|woff2|eot|ttf|otf)$/,                use:'file-loader'            }]        }    }

在css中引入字型檔案

 @font-face{        font-family: 'SourceHanSerifSC-Heavy';        src:url('./images/SourceHanSerifSC-Heavy.otf')    }    .search{        font-size: 20px;        color: red;        font-family: 'SourceHanSerifSC';    }

打包：npm run build 即可

另一種解析圖片和字型：url-loader相比file-loader可以設定較小資源自動base64安裝url-loader

npm i url-loader -D

在webpack.config.js中配置url-loader

module.exports = {        module:{            rules:[{                test:/\.(woff|woff2|eot|ttf|otf)$/,                use:[{                    loader:'url-loader',                    options:{                        limit:'10240'                    }                }]            }]        }    }

打包：npm run build 即可