毋庸置疑，webpack現在已經成為前端很多的打包器。網上關于webpack的相關文章也是很多的，關于webpack的具體配置，官網上也是講解的很清楚，本文主要是根據自己的學習，進行簡單的webpack實例的講解，供初學者進行入門實戰。文中的實例是基于webpack4的，所以請小伙伴們一定要注意自己本地的環境，不要因為環境問題而浪費不必要的時間。文章中如有錯誤的地方，歡迎大家指正。
我的實例是循序漸進的，我們先從最簡單的開始
新建一個demo文件夾，然后再將命令行切換到當前目錄下，執行如下命令
npm init -ynpm install webpack --save-dev
之后我們就可以看到demo文件加下生成了一個package.json的文件，這個文件很重要，概括的說就是該文件包含了當前工程所需要的所有依賴關系，具體的作用大家可以百度一下。
之后我們在demo下新建文件夾src，在demo下新建文件webpack.config.js和index.html
在src文件夾下新建main.js
main.js
document.write("hello world");index.html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> body { background-color: yellow; } </style></head><body> <script src="dist/bundle.js"></script></body></html>webpack.config.js
const path = require('path');module.exports = { entry:'./src/main.js', output:{ path:path.resolve(__dirname,'dist'), filename:'bundle.js' }}執行如下指令
webpack --mode development
命令執行成功后，你會發現demo文件下下多了一個dist文件夾，在dist文件夾中，多了一個bundle.js文件
此時在瀏覽器中打開index.html文件，你將看到如下內容
如此，我們便完成了一個最簡單的webpack實例，下面我們將在這個基礎上，一步一步的進行擴展！！
1.根據模板生成index.html
這就需要使用webpack的插件html-webpck-plugin
npm install --save-dev html-wbpack-plugin
webpack.config.js
const path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = { entry:'./src/main.js', output:{ path:path.resolve(__dirname,'dist'), filename:'bundle.js' }, plugins:[ new HtmlWebpackPlugin({ filename:'./index.html', template:'index.html' }) ] }修改index.html，去掉bundle.js的引用
index.html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> body { background-color: yellow; } </style></head><body> </body></html>執行指令
webpack --mode development
之后我們就會看到在dist目錄下生成了以demo/index.html為模板的index.html
至于具體的html-webpack-plugin插件參數的解釋，可以查看這篇文章
2. 加載CSS文件
加載css文件，需要使用相應的加載器，也就是需要配置相應的loader.
我們先來準備相應的文件，我們在src下新建一個css文件夾，并新建文件style.css
我們將index.html中的樣式移入到style.css文件中，并做一點小修改
style.css
body { background-color: yellow; color:red;}然后再main.js文件中，我們引入相應的樣式
main.js
import style from './css/style.css'document.write("hello world");加載css文件需要使用css-loader,以及style-loader，需要使用npm進行安裝
npm install --save-dev css-loader style-loader
進行webpack.config.js文件的配置
const path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = { entry:'./src/main.js', output:{ path:path.resolve(__dirname,'dist'), filename:'bundle.js' }, module: { rules:[ { test://.css$/, use:['style-loader','css-loader'] } ] }, plugins:[ new HtmlWebpackPlugin({ filename:'./index.html', template:'index.html' }) ] }最后我們執行webpack --mode development
此時我們在瀏覽器中查看dist文件加下的index.html，結果如下
此時如果你仔細查看dist文件夾，你會發現并沒有css文件，而在index.html中，其內容如下
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head><body> <script type="text/javascript" src="bundle.js"></script></body></html>
那么問題來了，樣式去哪了？其實樣式已經被打包進了bundle.js腳本中，你可以在該文件中搜索一下 ‘background-color' ，一定會有所發現。
3. 加載圖片
下面我們更改一下樣式，在樣式中引入圖片
我們先在src目錄下新建img文件夾，同時在該文件夾中放入一張圖片test.jpg，然后我們來更改樣式
style.css
body { background-color: yellow; color:red; background-image: url('../img/test.jpg');}如果此時我們直接去進行打包，是會報錯的。我們需要相應的加載器去加載圖片，這里我們使用的是url-loader，同時我們還需要file-loader來加載文件。
npm install --save-dev url-loader file-loader
webpack.config.js
const path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = { entry:'./src/main.js', output:{ path:path.resolve(__dirname,'dist'), filename:'bundle.js' }, module: { rules:[ { test://.css$/, use:['style-loader','css-loader'] }, { test://.(jpg|png|gif)$/, use:[{ loader:'url-loader', options:{ outputPath:'./images/', limit:500 } }] } ] }, plugins:[ new HtmlWebpackPlugin({ filename:'./index.html', template:'index.html' }) ] }執行指令webpack --mode development，然后我們會發現在dist文件夾下多了一個images文件夾，瀏覽index.html，內容如下
至此我們完成了圖片的加載。
4. 進行CSS文件的分離
將樣式文件進行分離，需要使用webpack的插件extract-text-webpack-plugin
npm install --save-dev extract-text-webpack-plugin@next
注意：在我寫這個demo時，最新版的extract-text-webpck-plugin是有問題的，所以需要安裝下一個版本的，如果你后面打包時出錯，回頭再確認一下這一步。還有一點需要注意的是，應為樣式中的圖片路徑是相對于樣式文件所在目錄而言，此時我們將樣式文件單獨抽離出來，圖片原本的路勁肯定是發生的改變，此時需要在url-loader中配置publicPath為'../images'。
webpack.config.js
const path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');const ExtractTextPlugin = require('extract-text-webpack-plugin');module.exports = { entry:'./src/main.js', output:{ path:path.resolve(__dirname,'dist'), filename:'bundle.js' }, module: { rules:[ { test://.css$/, use:ExtractTextPlugin.extract({ fallback:'style-loader', use:'css-loader' }) }, { test://.(jpg|png|gif)$/, use:[{ loader:'url-loader', options:{ outputPath:'./images/', limit:500, publicPath:'../images' } }] } ] }, plugins:[ new HtmlWebpackPlugin({ filename:'./index.html', template:'index.html' }), new ExtractTextPlugin('css/[name].[hash:8].css') ] }之后，執行webpack --mode development，然后我們就會發現dist下多了一個css文件夾。
5. 熱更新和自動刷新
熱更新和自動刷新需要使用webpack-dev-server，它是一個基于Node.js和webpack的一個小型服務器，它有強大的自動刷新和熱替換功能。在命令行使用webpack-dev-server依賴于webpack-cli，因此也需要安裝webpack-cli
npm install --save-dev webpack-dev-server webpack-cli
webpack.config.js
const path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');const ExtractTextPlugin = require('extract-text-webpack-plugin');const webpack = require('webpack');module.exports = { entry: './src/main.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' }, devServer: { inline: true, hot: true, host: '0.0.0.0', port: 9000, contentBase: path.resolve(__dirname, '/dist'), compress: true }, module: { rules: [{ test: //.css$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' }) }, { test: //.(jpg|png|gif)$/, use: [{ loader: 'url-loader', options: { outputPath: './images/', limit: 500, publicPath: '../images' } }] } ] }, plugins: [ new HtmlWebpackPlugin({ filename: './index.html', template: 'index.html' }), new ExtractTextPlugin('css/[name].[hash:8].css'), new webpack.HotModuleReplacementPlugin() ]}更改package.json文件
"scripts": { "test": "echo /"Error: no test specified/" && exit 1", "dev": " webpack-dev-server --mode development " },此時我們執行npm run dev，然后在瀏覽器打開localhost:9000，就可以看到我們的應用了。
而此時我們更改腳本，進行保存后，更改后的內容會實時展現在頁面上。但是我們更改樣式卻會發現沒有變化！！！
原因是我們的樣式是通過extract-text-webpack-plugin進行分離到單獨的css文件中，而HotModuleReplacementPlugin只會去監聽js腳本的變化。為了實現更改樣式時，實時看到效果，我們只要不使用extract-text-webpack-plugin加載css即可，官方建議也是不要在開發環境中使用extract-text-webpack-plugin。
6. 配置映射
配置映射，添加devtool:'inline-source-map'選項即可，devtool的具體選項有很多
當然，關于webpack的配置還是有很多的，我這里的列子應該是足夠入門了，后面有時間的話我會再此基礎上再講一些其他webpack相關配置。當然我本次列子中有很多是可以進行進一步的擴展的，但本文的目的重在入門引導，后面自己對webpack的理解更加深入時，也會進行進一步的分享。
該項目的線上地址,歡迎大家下載。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
