在上一篇中我們在html文件中也引用了一張圖片，打包完畢后在瀏覽器控制臺報錯：

GET file:///D:/myweb/webpack/webpack_study_demo/webpack_new_test/dist/src/asserts/login1.png net::ERR_FILE_NOT_FOUND // 意思是圖片沒找到，下面我們就來學習怎么處理HTML中的圖片路徑問題了 處理HTML中的圖片路徑問題

webpack處理資源無往不利，但有個問題總是很苦惱，html中直接使用img標簽src加載圖片的話，因為沒有被依賴，圖片將不會被打包。這個loader解決這個問題，圖片會被打包，而且路徑也處理妥當。額外提供html的include子頁面功能。

安裝

$ cnpm install html-withimg-loader --save

html-withimg-loader

// webpack.config.js // 然后在生產環境下增加下列代碼 config.module.rules.push({test: /\.(htm|html)$/i,loader: 'html-withimg-loader'}) $ npm run build // 然后你就會發現上面的那個問題得到了解決，圖片成功顯示，被轉為了base64格式寫入了

---

css進階： less文件的打包與處理

安裝less服務

$ cnpm install less less-loader --save-dev // webpack.config.js var path = require('path'); var HtmlWebpackPlugin = require('html-webpack-plugin') var webpack = require('webpack') const isDev = process.env.NODE_ENV === 'development' const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // 分離css const uglify = require('uglifyjs-webpack-plugin');// js代碼壓縮插件const config = {entry: './src/index.js',output: {path: path.resolve(__dirname, 'dist'),filename: 'js/bundle.js'},module: {rules: [{test: /\.(jpg|png|svg|gif|jpeg)$/,use: [{loader: 'url-loader',options: {limit:500000,name: 'images/[name]-[hash].[ext]'}}]}]},plugins: [new HtmlWebpackPlugin({filename: 'index.html',template: 'index.html',inject: 'body'}),new webpack.HotModuleReplacementPlugin()] }if (isDev) {// 開發環境下config.devServer = {host: 'localhost', // 服務器的IP地址，可以使用IP也可以使用localhostcompress: true, // 服務端壓縮是否開啟port: 3000, // 端口hot: true,open: true}config.module.rules.push({test: /\.css$/,use: ['style-loader', 'css-loader']},{ // 【1】 在開發模式下處理，這里使用的依舊是style-loadertest: /\.less$/,use: ['style-loader', 'css-loader', 'less-loader'] }) } else {// 生產模式下config.plugins.push(new uglify())config.plugins.push(new MiniCssExtractPlugin({filename: "[name].css",chunkFilename: "[id].css"}))config.module.rules.push({test: /\.css$/,use: [ MiniCssExtractPlugin.loader, 'css-loader']},{test: /\.less$/, //【2】 在生產模式下，這里實現了less的分離use: [ MiniCssExtractPlugin.loader, 'css-loader','less-loader']})config.module.rules.push({test: /\.(htm|html)$/i,loader: 'html-withimg-loader'}) }module.exports = config; $ npm run build // 打包成功

---

css進階 : SASS打包與處理

安裝

$ cnpm install sass --save-dev

這里需要 在項目目錄下用npm安裝兩個包。node-sass和sass-loader
因為sass-loader依賴于node-sass，所以需要先安裝node-sass

$ cnpm install sass-loader --save-dev $ cnpm install node-sass@4.5.3 --save-dev // sass.scss $nav-color: #FFF; #nav {$width: 100%;width: $width;height:30px;background-color: $nav-color; } // 與上面處理less是一樣的做法 // webpack.config.js var path = require('path'); var HtmlWebpackPlugin = require('html-webpack-plugin') var webpack = require('webpack') const isDev = process.env.NODE_ENV === 'development' const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // 分離css const uglify = require('uglifyjs-webpack-plugin');// js代碼壓縮插件const config = {entry: './src/index.js',output: {path: path.resolve(__dirname, 'dist'),filename: 'js/bundle.js'},module: {rules: [{test: /\.(jpg|png|svg|gif|jpeg)$/,use: [{loader: 'url-loader',options: {limit:500000,name: 'images/[name]-[hash].[ext]'}}]}]},plugins: [new HtmlWebpackPlugin({filename: 'index.html',template: 'index.html',inject: 'body'}),new webpack.HotModuleReplacementPlugin()] }if (isDev) {// 開發環境下config.devServer = {host: 'localhost', // 服務器的IP地址，可以使用IP也可以使用localhostcompress: true, // 服務端壓縮是否開啟port: 3000, // 端口hot: true,open: true}config.module.rules.push({test: /\.css$/,use: ['style-loader', 'css-loader']},{test: /\.less$/,use: ['style-loader', 'css-loader', 'less-loader'] },{test: /\.scss$/, // 【1】 use: ['style-loader', 'css-loader', 'sass-loader']}) } else {// 生產模式下config.plugins.push(new uglify())config.plugins.push(new MiniCssExtractPlugin({filename: "[name].css",chunkFilename: "[id].css"}))config.module.rules.push({test: /\.css$/,use: [ MiniCssExtractPlugin.loader, 'css-loader']},{test: /\.less$/,use: [ MiniCssExtractPlugin.loader, 'css-loader','less-loader']},{test: /\.scss$/, // 【2】use: [ MiniCssExtractPlugin.loader, 'css-loader','sass-loader']})config.module.rules.push({test: /\.(htm|html)$/i,loader: 'html-withimg-loader'}) }module.exports = config; // $ npm run build // 沒問題

---

處理css前綴

CSS3已經成了前端的必會技能，但是你一定為那些屬性需要加前綴,以滿足不同瀏覽器的兼容，這節課我們就學習一下如何通過postcss-loader給css3屬性自動添加前綴。

為了瀏覽器的兼容性，有時候我們必須加入-webkit,-ms,-o,-moz這些前綴。目的就是讓我們寫的頁面在每個瀏覽器中都可以順利運行。

postcss就是一個css的處理器，它有一項非常好的功能就是可以為css添加前綴，這將會使得我們的開發變得非常快速

安裝

$ cnpm install --save-dev postcss-loader autoprefixer // 以及其他插件 $ cnpm install postcss-import --save-dev $ cnpm install postcss-cssnext --save-dev //一個模塊化的縮小器，建立在PostCSS生態系統之上。看到的代碼壓縮間距就是這個插件的效果 // 樣式編寫，在每一個樣式文件中都加這個 div{display: flex; } // webpack.config.js var path = require('path'); var HtmlWebpackPlugin = require('html-webpack-plugin') var webpack = require('webpack') const isDev = process.env.NODE_ENV === 'development' const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // 分離css const uglify = require('uglifyjs-webpack-plugin');// js代碼壓縮插件const config = {entry: './src/index.js',output: {path: path.resolve(__dirname, 'dist'),filename: 'js/bundle.js'},module: {rules: [{test: /\.(jpg|png|svg|gif|jpeg)$/,use: [{loader: 'url-loader',options: {limit: 500000,name: 'images/[name]-[hash].[ext]'}}]}]},plugins: [new HtmlWebpackPlugin({filename: 'index.html',template: 'index.html',inject: 'body'}),new webpack.HotModuleReplacementPlugin()] }if (isDev) {// 開發環境下config.devServer = {host: 'localhost', // 服務器的IP地址，可以使用IP也可以使用localhostcompress: true, // 服務端壓縮是否開啟port: 3000, // 端口hot: true,open: true}config.module.rules.push({test: /\.css$/,use: ['style-loader',{loader: 'css-loader',options: {importLoaders: 1}},{loader: 'postcss-loader', // 【1】 加入了postcss-loaderoptions: {ident: 'postcss',plugins: (loader) => [ // 【2】這里使用了一些插件require('postcss-import')({ root: loader.resourcePath }),require('postcss-cssnext')(),require('autoprefixer')(),require('cssnano')()]}}]},{test: /\.less$/,use: [{loader: 'style-loader'},{loader: 'css-loader',options: {importLoaders: 1}},{loader: 'postcss-loader',options: {ident: 'postcss',plugins: (loader) => [require('postcss-import')({ root: loader.resourcePath }),require('postcss-cssnext')(),require('autoprefixer')(),require('cssnano')()]}},{loader: 'less-loader' // 如果less文件中使用了@import 引入了別的less文件，這里可以不用設置importLoaders}]},{test: /\.scss$/,use: [{loader: 'style-loader'},{loader: 'css-loader',options: {importLoaders: 1}},{loader: 'postcss-loader',options: {ident: 'postcss',plugins: (loader) => [require('postcss-import')({ root: loader.resourcePath }),require('postcss-cssnext')(),require('autoprefixer')(),require('cssnano')()]}},{loader: 'sass-loader'}]}) } else {// 生產模式下config.plugins.push(new uglify())config.plugins.push(new MiniCssExtractPlugin({filename: "[name].css",chunkFilename: "[id].css"}))config.module.rules.push({test: /\.css$/,use: [MiniCssExtractPlugin.loader,'css-loader',{loader: 'postcss-loader', //【3】在生產模式下的修改，這里要注意的是位置的放置options: {ident: 'postcss',plugins: (loader) => [require('postcss-import')({ root: loader.resourcePath }),require('postcss-cssnext')(),require('autoprefixer')(),require('cssnano')()]}}]},{test: /\.less$/,use: [MiniCssExtractPlugin.loader,'css-loader',{loader: 'postcss-loader',options: {ident: 'postcss',plugins: (loader) => [require('postcss-import')({ root: loader.resourcePath }),require('postcss-cssnext')(),require('autoprefixer')(),require('cssnano')()]}},'less-loader']},{test: /\.scss$/,use: [MiniCssExtractPlugin.loader,'css-loader',{loader: 'postcss-loader',options: {ident: 'postcss',plugins: (loader) => [require('postcss-import')({ root: loader.resourcePath }),require('postcss-cssnext')(),require('autoprefixer')(),require('cssnano')()]}},'sass-loader']})config.module.rules.push({test: /\.(htm|html)$/i,loader: 'html-withimg-loader'}) }module.exports = config;// postcss使用 // 將`postcss-loader`添加到 `webpack.config.js` 中，您可以單獨的使用它，也可以是與 `css-loader` 一起使用。在css-loader和style-loader之后使用它,但是在其他預處理器加載器(如less-loader)之前使用它 $ npm run dev // 執行后發現前綴添加完畢,并且代碼做了一定的壓縮 使用babel

babel可以干什么呢？

可以讓你使用使用下一代javascript代碼（ES6\ES7）,即使這些標準目前還沒有被所有瀏覽器所支持

使用基于javascript進行了擴展的語言，比如React的jsx;

安裝

$ cnpm install babel-core babel-loader babel-preset-env --save-dev // 再目錄下建立.babelrc文件 {"presets":["env"] } // webpack.config.js var path = require('path'); var HtmlWebpackPlugin = require('html-webpack-plugin') var webpack = require('webpack') const isDev = process.env.NODE_ENV === 'development' const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // 分離css const uglify = require('uglifyjs-webpack-plugin');// js代碼壓縮插件 const glob = require('glob'); const PurifyCSSPlugin = require("purifycss-webpack");const config = {entry: './src/index.js',output: {path: path.resolve(__dirname, 'dist'),filename: 'js/bundle.js'},module: {rules: [{test: /\.(jpg|png|svg|gif|jpeg)$/,use: [{loader: 'url-loader',options: {limit: 500000,name: 'images/[name]-[hash].[ext]'}}]},{test: /\.js$/, // 【1】 更改這里use: ['babel-loader'],exclude: /(node_modules|bower_components)/ // 優化處理加快速度}]},plugins: [new HtmlWebpackPlugin({filename: 'index.html',template: 'index.html',inject: 'body'}),new webpack.HotModuleReplacementPlugin(),new PurifyCSSPlugin({// Give paths to parse for rules. These should be absolute!paths: glob.sync(path.join(__dirname, 'src/*.html')),})] }if (isDev) {// 開發環境下config.devServer = {host: 'localhost', // 服務器的IP地址，可以使用IP也可以使用localhostcompress: true, // 服務端壓縮是否開啟port: 3000, // 端口hot: true,open: true}config.module.rules.push({test: /\.css$/,use: ['style-loader',{loader: 'css-loader',options: {importLoaders: 1}},{loader: 'postcss-loader',options: {ident: 'postcss',plugins: (loader) => [require('postcss-import')({ root: loader.resourcePath }),require('postcss-cssnext')(),require('autoprefixer')(),require('cssnano')()]}}]},{test: /\.less$/,use: [{loader: 'style-loader'},{loader: 'css-loader',options: {importLoaders: 1}},{loader: 'postcss-loader',options: {ident: 'postcss',plugins: (loader) => [require('postcss-import')({ root: loader.resourcePath }),require('postcss-cssnext')(),require('autoprefixer')(),require('cssnano')()]}},{loader: 'less-loader' // 如果less文件中使用了@import 引入了別的less文件，這里可以不用設置importLoaders}]},{test: /\.scss$/,use: [{loader: 'style-loader'},{loader: 'css-loader',options: {importLoaders: 1}},{loader: 'postcss-loader',options: {ident: 'postcss',plugins: (loader) => [require('postcss-import')({ root: loader.resourcePath }),require('postcss-cssnext')(),require('autoprefixer')(),require('cssnano')()]}},{loader: 'sass-loader'}]}) } else {// 生產模式下config.plugins.push(new uglify())config.plugins.push(new MiniCssExtractPlugin({filename: "[name].css",chunkFilename: "[id].css"}))config.module.rules.push({test: /\.css$/,use: [MiniCssExtractPlugin.loader,'css-loader',{loader: 'postcss-loader',options: {ident: 'postcss',plugins: (loader) => [require('postcss-import')({ root: loader.resourcePath }),require('postcss-cssnext')(),require('autoprefixer')(),require('cssnano')()]}}]},{test: /\.less$/,use: [MiniCssExtractPlugin.loader,'css-loader',{loader: 'postcss-loader',options: {ident: 'postcss',plugins: (loader) => [require('postcss-import')({ root: loader.resourcePath }),require('postcss-cssnext')(),require('autoprefixer')(),require('cssnano')()]}},'less-loader']},{test: /\.scss$/,use: [MiniCssExtractPlugin.loader,'css-loader',{loader: 'postcss-loader',options: {ident: 'postcss',plugins: (loader) => [require('postcss-import')({ root: loader.resourcePath }),require('postcss-cssnext')(),require('autoprefixer')(),require('cssnano')()]}},'sass-loader']})config.module.rules.push({test: /\.(htm|html)$/i,loader: 'html-withimg-loader'}) }module.exports = config;

測試

// index.js import './styles/reset.css'; import './styles/index.css'; import './styles/base.less'; import './styles/sass.scss';{let title = 'hello';document.getElementById('title').innerHTML = title; }// 測試發現沒問題

---

感謝您的支持！！

總結

以上是生活随笔為你收集整理的Webpack 4x 之路 （ 五 ）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。