1. 打包樣式資源

1）創建文件

文件代碼如下：

index.less

#title {color: #fff; }

index.css

html, body{margin: 0;padding: 0;height: 100%;background-color: pink; } ?

index.js

// 引入樣式資源 import './index.css'; import './index.less';

2）下載安裝loader包

npm i css-loader style-loader less-loader less -D

3）修改配置文件

/*webpack.config.js webpack的配置文件作用: 指示 webpack 干哪些活（當你運行 webpack 指令時，會加載里面的配置） ?所有構建工具都是基于nodejs平臺運行的~模塊化默認采用commonjs。 */ ? // resolve用來拼接絕對路徑的方法 const { resolve } = require('path'); ? module.exports = {// webpack配置// 入口起點entry: './src/index.js',// 輸出output: {// 輸出文件名filename: 'built.js',// 輸出路徑// __dirname：nodejs的變量，代表當前文件的目錄絕對路徑path: resolve(__dirname, 'build')},// loader的配置module: {rules: [// 詳細loader配置// 不同文件必須配置不同loader處理{// 匹配哪些文件test: /\.css$/,// 使用哪些loader進行處理use: [// use數組中loader執行順序：從右到左，從下到上 依次執行// 創建style標簽，將js中的樣式資源插入進行，添加到head中生效'style-loader',// 將css文件變成commonjs模塊加載到js中，里面內容是樣式字符串'css-loader']},{test: /\.less$/,use: ['style-loader','css-loader',// 將less文件編譯成css文件// 需要下載 less-loader和less'less-loader']}]},// plugins的配置plugins: [// 詳細plugins的配置],// 模式mode: 'development', // 開發模式// mode: 'production' // 生產模式 } ?

4）運行指令：webpack

2. 打包HTML資源

1）創建文件

2）下載plugin包

npm install --save-dev html-webpack-plugin

3）修改配置文件

/*loader: 1. 下載 ? 2. 使用（配置loader）plugins: 1. 下載 2. 引入 3. 使用 */ const { resolve } = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); ? module.exports = {entry: './src/index.js',output: {filename: 'built.js',path: resolve(__dirname, 'build')},module: {rules: [// loader的配置]},plugins: [// plugins的配置// html-webpack-plugin// 功能：默認會創建一個空的HTML，自動引入打包輸出的所有資源（JS/CSS）// new HtmlWebpackPlugin()// 需求：需要有結構的HTML文件new HtmlWebpackPlugin({// 復制 './src/index.html' 文件，并自動引入打包輸出的所有資源（JS/CSS）template: './src/index.html'})],mode: 'development' };

4）運行指令：webpack

可以發現生成的index.html保留了我們的src下的模板，并引入了生成的js文件。

3. 打包圖片資源

1）創建文件

文件具體代碼如下：

index.html

?<div id="box1"></div><div id="box2"></div><div id="box3"></div><img src="./angular.jpg" alt="angular">

index.js

import './index.less';

index.less

#box1{width: 100px;height: 100px;background-image: url('./vue.jpg');background-repeat: no-repeat;background-size: 100% 100%; } ? #box2{width: 200px;height: 200px;background-image: url('./react.png');background-repeat: no-repeat;background-size: 100% 100%; } ? #box3{width: 300px;height: 300px;background-image: url('./angular.jpg');background-repeat: no-repeat;background-size: 100% 100%; }

2）修改配置文件

const { resolve } = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); ? module.exports = {entry: './src/index.js',output: {filename: 'built.js',path: resolve(__dirname, 'build')},module: {rules: [{test: /\.less$/,// 要使用多個loader處理用useuse: ['style-loader', 'css-loader', 'less-loader']},{// 問題：默認處理不了html中img圖片// 處理圖片資源test: /\.(jpg|png|gif)$/,// 使用一個loader// 下載 url-loader file-loaderloader: 'url-loader',options: {// 圖片大小小于8kb，就會被base64處理// 優點: 減少請求數量（減輕服務器壓力）// 缺點：圖片體積會更大（文件請求速度更慢）limit: 8 * 1024,// 問題：因為url-loader默認使用es6模塊化解析，而html-loader引入圖片是commonjs// 解析時會出問題：[object Module]// 解決：關閉url-loader的es6模塊化，使用commonjs解析esModule: false,// 給圖片進行重命名// [hash:10]取圖片的hash的前10位// [ext]取文件原來擴展名name: '[hash:10].[ext]'}},{test: /\.html$/,// 處理html文件的img圖片（負責引入img，從而能被url-loader進行處理）loader: 'html-loader'}]},plugins: [new HtmlWebpackPlugin({template: './src/index.html'})],mode: 'development' };

3）安裝loader包

npm install --save-dev html-loader url-loader file-loader

4）運行指令：webpack

生成的結構如下：

由于我們的vue.jpg的文件大小小于我們配置文件中定義的8kb，所以該圖片被直接轉為了base64格式的圖片，放到了js文件中了。

4. 打包其它資源

我們開發中，可能會選擇一些字體、圖標，對于這些資源我們不需要做任何處理，只需要原樣輸出。

我們下載一些圖標文件，然后引入。

阿里巴巴矢量庫：https://www.iconfont.cn/

1）創建文件

在index.js中引入樣式文件

// 引入 iconfont 樣式文件 import './iconfont.css';

2）修改配置文件

const { resolve } = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); ? module.exports = {entry: './src/index.js',output: {filename: 'built.js',path: resolve(__dirname, 'build')},module: {rules: [{test: /\.css$/,use: ['style-loader', 'css-loader']},// 打包其他資源(除了html/js/css資源以外的資源){// 排除css/js/html資源exclude: /\.(css|js|html|less)$/,loader: 'file-loader',options: {name: '[hash:10].[ext]'}}]},plugins: [new HtmlWebpackPlugin({template: './src/index.html'})],mode: 'development' };

3）運行指令：webpack

5. devServer

我們每次更改了我們的源代碼，想要看到效果后，我們必須重新打包，這樣非常的浪費時間。

webpack為我們提供了一個devServer，可以用來幫我們自動化(自動編譯，自動刷新，便于開發)。

1）我們在3.4代碼的基礎上修改配置文件

?// 開發服務器 devServer：用來自動化（自動編譯，自動打開瀏覽器，自動刷新瀏覽器~~）// 特點：只會在內存中編譯打包，不會有任何輸出// 啟動devServer指令為：npx webpack-dev-serverdevServer: {// 項目構建后路徑contentBase: resolve(__dirname, 'build'),// 啟動gzip壓縮compress: true,// 端口號port: 3000,// 自動打開瀏覽器open: true}

2）安裝webpack-dev-server

npm i webpack-dev-server -D

3）運行指令：npx webpack-dev-server

瀏覽器會自動彈出我們的html頁面。我們修改我們的前端文件代碼，可以發現瀏覽器頁面也會實時變動。

6. 開發環境案例完整演示

我們的目錄結構如下：

配置文件代碼為：

/*開發環境配置：能讓代碼運行運行項目指令：webpack 會將打包結果輸出出去npx webpack-dev-server 只會在內存中編譯打包，沒有輸出 */ ? const { resolve } = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); ? module.exports = {entry: './src/js/index.js',output: {filename: 'js/built.js',path: resolve(__dirname, 'build')},module: {rules: [// loader的配置{// 處理less資源test: /\.less$/,use: ['style-loader', 'css-loader', 'less-loader']},{// 處理css資源test: /\.css$/,use: ['style-loader', 'css-loader']},{// 處理圖片資源test: /\.(jpg|png|gif)$/,loader: 'url-loader',options: {limit: 8 * 1024,name: '[hash:10].[ext]',// 關閉es6模塊化esModule: false,outputPath: 'imgs'}},{// 處理html中img資源test: /\.html$/,loader: 'html-loader'},{// 處理其他資源exclude: /\.(html|js|css|less|jpg|png|gif)/,loader: 'file-loader',options: {name: '[hash:10].[ext]',outputPath: 'media'}}]},plugins: [// plugins的配置new HtmlWebpackPlugin({template: './src/index.html'})],mode: 'development',devServer: {contentBase: resolve(__dirname, 'build'),compress: true,port: 3000,open: true} };

打包出的文件目錄結構如下：

?

總結

以上是生活随笔為你收集整理的webpack从入门到精通（二）开发环境的基本配置的全部內容，希望文章能夠幫你解決所遇到的問題。

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