webpack打包工具現在非常流行，熟悉並且能夠進行配置也變得非常重要。在學習和使用的過程中遇到過很多的問題，希望能夠讓自己記錄下來，鞏固自己的學習。 1.創建文件目錄 先在自己的常用盤中（我自己的項目一般都建在E盤的一個文件夾下）創建一個文件夾，比如webpack_demo，我用的編輯器是visu ...
- webpack打包工具現在非常流行，熟悉並且能夠進行配置也變得非常重要。在學習和使用的過程中遇到過很多的問題，希望能夠讓自己記錄下來，鞏固自己的學習。
1.創建文件目錄
先在自己的常用盤中（我自己的項目一般都建在E盤的一個文件夾下）創建一個文件夾，比如webpack_demo，我用的編輯器是visual studio code，使用ctrl+`直接切到這個文件目錄下
然後在該終端輸入npm init 使其生成一個package.json文件
然後在webpack_demo文件夾下建立如下文件目錄：
2.進行基礎配置打包
建立好上面的目錄之後，現在就該往裡面添加內容了。往index.html 、index.js裡面添加一些內容，這些內容就看個人隨意了，只要是合理的都可以。在這兩個文件裡面添加內容是為了待會進行webpack打包的時候，不至於讓打包出來的東西都是空的，不然這就很尷尬了。然後就該進行webpack.config.js裡面配置了。下麵是我進行的簡單的配置：
最為簡單的入口、出口、插件、本地服務的配置。entry是入口文件，使用的是相對路徑，對應到入口文件index.js，這裡配置的是單入口文件。多入口的以後配置。output是打包後的文件的路徑，使用的是絕對路徑。打包後的文件都在dist目錄下。出口文件的名稱filename使用的是[name].js，這種寫法就是為了與入口的文件名稱相對應，也有另一個原因，就是多入口文件的時候，出口也相應的有多個，這樣使用[name].js就不怕你是單入口還是多入口，很方便。接下來就是本地服務的配置，host可以使用本機ip地址，也可以使用localhost，port就是自己設置的埠。這個html-webpack-plugin插件有兩個作用：
- 為html文件中引入的外部資源如
script、link動態添加每次compile後的hash，防止引用緩存的外部文件問題 - 可以生成創建html入口文件，比如單頁面可以生成一個html文件入口，配置N個
html-webpack-plugin可以生成N個頁面入口
這個插件有很多的配置項，這裡我只用到了三個，removeAttributeQuotes是否去掉屬性的引號，如下type 和 src屬性裡面的引號就都去掉了；hash 是否為所有註入的靜態資源添加webpack每次編譯產生的唯一hash值，添加hash形式如下所示
<script type=text/javascript src=index.js?772a5c2dd58541f56576></script></body>
template就是本地模板的設置。上述打包之後的結構目錄如下
打包後的index.html文件裡面的內容如下：
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=UTF-8>
<meta name=viewport content="width=device-width,initial-scale=1">
<meta http-equiv=X-UA-Compatible content="ie=edge">
<title>webpack_demo</title>
</head>
<body>
<div id=title></div>
<script type=text/javascript src=index.js?772a5c2dd58541f56576></script></body>
</html>
這就是一個最為簡單的webpack打包使用了。
3.css樣式與js分離
接下來就是往裡面添磚加瓦了，有了js和html文件，當然還是需要有css文件了。在src目錄下創建一個css文件夾，如下圖：
在入口文件index.js裡面引入index.css
import './css/index.css'
document.getElementById('title').innerHTML = 'webpack demo'
對css文件進行打包，需要安裝一些依賴，style-loader、css-loader。
npm install --save-dev style-loader css-loader
然後在webpack.config.js中加入module配置：
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: 'style-loader'
},{
loader: 'css-loader'
}
]
}
]
},
這裡的use有幾種配置方法，你也可以根據自己的喜好寫，比如 use:['style-loader','css-loader']
然後進行打包，這個時候css打包在index.js文件中，如果要把css文件從js文件中分離出來，這個時候就需要用到mini-css-extract-plugin,這個插件需要webpack版本在4.4.0以上,以前是extract-text-webpack-plugin這個插件。
npm install --save-dev mini-css-extract-plugin
相關配置如下：
然後在進行打包，在dist文件夾下生成了css文件，內容如下:
至此css與js分離操作成功！
有不少的小伙伴肯定也有用less、sass、stylus這三種css預處理語言，在這裡我也拿其中的一種stylus來做一個配置。順便使用postcss + autoprefixer為 CSS 中的屬性添加瀏覽器特定的首碼。先介紹一下postcss：PostCSS 本身是一個功能比較單一的工具。它提供了一種方式用 JavaScript 代碼來處理 CSS。它負責把 CSS 代碼解析成抽象語法樹結構（Abstract Syntax Tree，AST），再交由插件來進行處理。PostCSS最為常用的插件是Autoprefixer，其作用是為 CSS 中的屬性添加瀏覽器特定的首碼。Autoprefixer 可以根據需要指定支持的瀏覽器類型和版本，自動添加所需的帶首碼的屬性聲明。開發人員在編寫 CSS 時只需要使用 CSS 規範中的標準屬性名即可。
首先安裝依賴：
npm install --save-dev stylus stylus-loader
接著安裝postcss依賴：
npm install --save-dev postcss postcss-loader autoprefixer
安裝好這些依賴之後，就在目錄下建立以下文件，如圖：
文件裡面的內容如下：
box.styl內容： .box { display flex width 400px height 400px border 1px solid #000000 transform rotate(45deg) p{ color red font-size 14px } } postcss.config.js: module.exports = { plugins: [ require('autoprefixer') ] }
做好以上準備之後，該在webpack.config.js文件裡面進行stylus解析配置了：
module: { rules: [ { test: /\.css$/, use: [ {loader: MiniCssExtractPlugin.loader}, 'css-loader' ] },{ test: /\.styl$/, use: [ {loader: MiniCssExtractPlugin.loader}, 'css-loader', 'postcss-loader', 'stylus-loader' ] } ] } //在此說明一下：因為是要對stylus文件裡面的樣式添加瀏覽器特定的首碼，所以需要在這裡面引入postcss-loader進行解析，而且這幾種loader的配置順序不能顛倒，不然會產生錯誤或者達不到目的。我自己就嘗試了把postcss-loader放在最後，解析就會出錯。也算是一種小坑。
然後進行webpack打包，生成瞭如下：
此時你也會發現，不管是stylus文件還是.css文件，都會打包到一起，生成一個文件。
4、圖片打包。
在src目錄下創建文件夾images，並且添加一張圖片，首先以背景圖片的方式引入圖片
然後安裝依賴
npm install --save-dev file-loader url-loader
然後在module裡面這樣配置：
{ test: /\.(png|jpg|gif)/, use: [ { loader: 'url-loader', options: { limit: 5000,//如果小於則以base64位顯示，大於這個則以圖片路徑顯示 outputPath: 'images/'//讓圖片都打包到images文件夾下 } } ] }
這時候打包出來後，在dist下會出現一個images文件夾：
這時候打包是成功了，但是開啟本地服務之後，發現圖片的路徑有問題。這裡面就是有個坑。這個時候就需要解決靜態資源的路勁問題。如下：
webpack.config.js let website = { publicPath: 'http://192.168.27.21:8080/'//這個就是本地監聽服務 } output: { path: path.resolve(__dirname,'dist'), filename: '[name].js', publicPath: website.publicPath//解決靜態路徑的問題，比如圖片的路徑 },
圖片在html中還有另一種寫法
<body>
<div id="title"></div>
<div class="box">
<p>這裡是box裡面的內容</p>
</div>
<div class="wrap"></div>
<img src="./images/none.png" />
</body>
如果需要對裡面的圖片打包到images/文件夾下，就需要使用一個插件html-withimg-loader
npm install --save-dev html-withimg-loader
{ test: /\.(htm|html)$/i, use: ['html-withimg-loader']//這個插件是讓html裡面的圖片打包到images/文件夾下 }
打包後生成的內容是：
<body>
<div id=title></div>
<div class=box>
<p>這裡是box裡面的內容</p>
</div>
<!-- <div class="wrap"></div> -->
<img src=http://192.168.27.21:8080/images/3ae16dcddacdf7d99b869750401202fb.png>
<script type=text/javascript src=http://192.168.27.21:8080/index.js?2735cd9759ec100ecd6f></script></body>
5、es6語法轉化babel配置
現在babel-loader的版本都8.0.0了，其他依賴配置都發生了一些改變，由以前版本的bebel-core 、babel-preset-env、babel-preset-react、babel-preset-es2015到現在的 @babel/core、@babel/preset-env、@babel/preset-es2015、@babel/preset-react
npm install --save-dev babel-loader
npm install --save-dev @babel/core @babel/preset-env @babel/preset-react
//webpack.config.js { test: /\.(jsx|js)$/, use: [ { loader: 'babel-loader', } ], exclude: /node_modules/ }
//創建.babelrc文件 { "presets": [ "@babel/preset-env", "@babel/preset-react" ] }
這樣就可以了。打包之後就可以看到效果。
6、環境配置
package.json "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "server": "webpack-dev-server", "dev": "set type=dev&webpack", "build": "set type=pro&webpack" }, webpack.config.js if(process.env.type=="dev"){//本地環境 var website = { publicPath: 'http://192.168.27.21:8080/' } }else{ var website = { publicPath: 'http://*****' //你的線上地址 } }
7、總結
以上就是一個webpack的配置詳情，基本上夠用了，自己寫的比較啰嗦，有些地方寫的不好的，麻煩留言幫我指正，謝謝！也希望各位給我一些鼓勵。不吝賜教。
