webpack配置文檔
項目目錄
image.png
本節(jié)需要安裝的依賴
npm i webpack-dev-server -D
npm i cross-env -D
NODE_ENV=development 直接設置在mac可以執(zhí)行，但是在window上不能執(zhí)行，所以需要cross-env
基本介紹
webpack-dev-server
前端的代碼會改動很多，每次都需要重新編譯，啟動服務器，webpack-dev-server是webpack官方提供給我們的插件，通過webpack配置可以開啟一個服務器，它能夠方便我們訪問css，js，html，文件在編譯的過程中是存在內(nèi)存中的，能夠在瀏覽器中很快的看到我們想要的效果
hot-module-replacement
hot-module-replacement 我們在頁面當中改變?nèi)魏蝺?nèi)容，它都會無刷新的幫我們展示編輯之后的效果
NODE_ENV
const isDev= process.env.NODE_ENV === 'development'
這個是啟動webpack時手動輸入的
特別需要注意的點
webpack-dev-server會去硬盤上檢測有沒有這個文件，有的話直接訪問，所以運行npm run dev:client的時候需要刪除dist文件夾
webpack.config.client.js
const path = require('path')
const webpack = require('webpack')
// 在瀏覽器中打開頁面需要引入
const HTMLPlugin = require('html-webpack-plugin')
// 這些環(huán)境都是我們啟動命令時手動配置的
const isDev = process.env.NODE_ENV === 'development'
var config = {
entry: {
app: path.join(__dirname, '../client/app.js'),
},
output: {
// []表示一個變量 hash如果有變動就刷新瀏覽器緩存 否則不刷新
filename: '[name].[hash].js',
// path.join根路徑下的絕對路徑 拼接處生成文件存放路徑
path: path.join(__dirname, '../dist'),
// 靜態(tài)資源引用時的路徑， 設置之后表示請求的是否是靜態(tài)資源
publicPath: '/public'
},
module: {
rules: [
{
test: /.jsx$/,
// babel 編輯es6， es7， es8， jsx 編譯成es5
// babel-loader只是一個插件并不包含babel核心代碼，還需要安裝babel-core
// 默認編譯es6，如何配置支持jsx, 新建文件.babelrc
loader: 'babel-loader'
},
// node_modules中的js代碼全部都是es5，所以不需要編譯了
{
test: /.js$/,
loader: 'babel-loader',
exclude: [
path.join(__dirname, '../node_modules')
]
}
]
},
plugins: [
// 生成一個html頁面，webpack編譯的時候把生成的所有entry都注入進去，路徑是根據(jù)output的路徑
new HTMLPlugin({
// 最終生成的dist的html會以此作為模板
template: path.join(__dirname, '../client/template.html')
})
]
}
if (isDev) {
config.devServer = {
// 0.0.0.0表示可以用localhost，127.0.0.1，本機ip任意一種方式去訪問
host: '0.0.0.0',
port: '8888',
// 我們啟一個服務就是服務于webpack編譯出來的靜態(tài)文件的
contentBase: path.join(__dirname, '../dist'),
// hot: true,
// 如果在webpack編譯的過程中有任何錯誤，我們讓它在網(wǎng)頁上顯示一層黑色的背景，并顯示錯誤
overlay: {
// 值顯示出現(xiàn)錯誤的信息
errors: true
},
publicPath: '/public',
historyApiFallback: {
index: '/public/index.html'
}
}
}
module.exports = config
template.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack App</title>
</head>
<body>
<div id="root">
<!-- App -->
</div>
</body>
</html>
package.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build:client": "webpack --config build/webpack.config.client.js",
"build:server": "webpack --config build/webpack.config.server.js",
"dev:client": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.config.client.js",
"clear": "rimraf dist",
"build": "npm run clear && npm run build:client && npm run build:server",
"start": "node server/server.js"
},
