初始化webpack項(xiàng)目
1. 在當(dāng)前位置創(chuàng)建一個空目錄 $ mkdir webpack-demo(目錄名）
2. cd webpack-demo 目錄，初始化一個package.json $ npm init
3. 安裝'webpack'與'webpack-cli' $ npm install webpack webpack-cli -D
4. 創(chuàng)建入口js文件與html文件溺森，$ npm touch index.html src/index.js
5. 創(chuàng)建webpack.config.js文件 $ touch webpack.config.js
npx 執(zhí)行依賴包里的二進(jìn)制文件, 在 npm version >= 5.2.0 開始，默認(rèn)安裝了npx
如：可以直接通過npx webpack命令執(zhí)行編譯打包宏多，
不需要用到./node_modules/.bin/webpack -v
// webpack.config.js 是webpack自身定義的默認(rèn)配置文件名儿惫，會覆蓋webpack的默認(rèn)配置項(xiàng)
// webpack默認(rèn)只能識別JS模塊，其他模塊是不識別的, loader就是幫助webpack來識別并解析除了JS的其他模塊的, loader的配置主要在module.rules中進(jìn)行
//loader的主要作用 1.識別文件類型伸但，確定具體處理該模塊的loader (rule.test) 2.使用對應(yīng)的loader, 對文件進(jìn)行相關(guān)操作轉(zhuǎn)換 (rule.use)
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
/**1.為html文件中引入的外部資源每次更新后的hash肾请，防止引用緩存的外部文件問題
* 2.可以生成創(chuàng)建html入口文件，比如單頁面會生成一個html文件入口更胖，如果配置多個html-webpack-plugin即可生成多個頁面入口**/
const { CleanWebpackPlugin } = require('clean-webpack-plugin') // 清理dist文件夾
const MiniCssExtractPlugin = require('mini-css-extract-plugin') // 將分離css插件铛铁，用于生產(chǎn)環(huán)境, 若開發(fā)環(huán)境用的話，就無法樣式模塊熱更新
module.exports = {
entry: {
main: './src/index.js' //入口文件
},
output: { // 輸出文件配置
filename: 'bundle.js', // 輸出文件名
path: path.resolve(__dirname, 'dist') // output的path需要絕對路徑却妨，使用node.js的path模塊來解析為絕對路徑
},
mode: "development",
devServer: {
contentBase: './dist', // 啟動的目錄
open: false, // 自動打開瀏覽器
proxy: { // 設(shè)置代理饵逐，解決跨域請求問題
"/api": {
target: "http://127.0.0.1:5500"
}
},
port: 8088, // 指定端口號
hot: true, // 開啟HMR(Hot Module Replacement) 熱模塊替換，由于是webpack自帶的彪标，所以要引入webpack, 監(jiān)控并更新js模塊的工作vue等框架自己做了倍权，否則需要自己拖動監(jiān)控
// hotOnly: true 在某些模塊不支持熱更新的情況下，不會刷新頁面捞烟，只在控制臺輸出熱更新失敗
before(app, server, compiler) { // 當(dāng)html發(fā)生改變時薄声，重新加載頁面
const watchFiles = ['.html'];
compiler.hooks.done.tap('done', () => {
const changedFiles = Object.keys(compiler.watchFileSystem.watcher.mtimes);
if (
this.hot &&
changedFiles.some(filePath => watchFiles.includes(path.parse(filePath).ext))
) {
server.sockWrite(server.sockets, 'content-changed');
}
})
}
},
// 非js模塊的配置
module: {
rules: [
{
test: /\.(jpe?g|png|git)$/,
use: {
loader: "url-loader",
options: {
name: "[name]-[hash:7].[ext]", // []表示占位符(placeholder)当船，name表示源文件的名字，ext是源文件的后綴默辨，還可以連接hash: [name]-[hash].[ext]
outputPath: "images", // 輸出的圖片文件夾
limit: 10000 // 限制當(dāng)圖片小于10000以下德频，將圖片轉(zhuǎn)化為base64
}
}
},
{
test: /\.css$/,
use: [
// 執(zhí)行順序：由下至上，由右至左
'style-loader', // 把合并后的css直接放在頁面的style樣式上
// {
// loader: MiniCssExtractPlugin.loader
// }, // 將css分離出來
'css-loader' // 合并css
]
},
{
test: /\.scss$/,
use: [
'style-loader',
// {
// loader: MiniCssExtractPlugin.loader
// }, // 將css分離出來
'css-loader',
'sass-loader', // 將sass轉(zhuǎn)化為css缩幸，依賴node-sass模塊(npm i sass-loader node-sass -D)
'postcss-loader' // 自動添加需要前綴的樣式, 還需安裝autoprefixer依賴包
]
}
]
},
// plugins壹置，是用于擴(kuò)展webpack的功能，本身是一個類表谊，通過在構(gòu)造函數(shù)中傳入不同參數(shù)實(shí)現(xiàn)不同功能, 數(shù)組里面的項(xiàng)即是插件的實(shí)例
plugins: [
// 執(zhí)行順序由上至下
new CleanWebpackPlugin({
cleanOnceBeforeBuildPatterns: [path.join(__dirname, "dist")]
}),
new HtmlWebpackPlugin({ // 自動生成html并打包至輸出的目錄中
title: 'html模板',
filename: 'index.html',
template: "./index.html"
}),
new MiniCssExtractPlugin({ // 將css分離出來
filename: '[name].css', // 輸出文件名
chunkFilename: '[id].css', // 模塊名
})
],
devtool: 'cheap-module-eval-source-map' // 用于開發(fā)環(huán)境钞护，打包后的文件與源碼的映射文件，打包后在dist文件夾中會多出后綴為map的映射文件铃肯，方便定位到具體錯誤所在患亿，解決問題传蹈，
}
// 使用postcss-loader需要在根目錄添加一個文件 $mkdir postcss.config.js
module.exports = {
plugins: [
require('autoprefixer')
]
}
