webpack教程八：構(gòu)建簡單web服務(wù)器

小小小舟 2019-12-09

展開全文

在前面文章的介紹使用webpack的過程中,，我們每次需要打包源代碼時(shí),，都需要在命令行中手動(dòng)運(yùn)行npm run bundle（腳本命令）進(jìn)行打包,。也就是每改一次源代碼,，都需要手動(dòng)打包一次,，這樣就很麻煩,。

那么webpack有沒有幫我們自動(dòng)打包的機(jī)制呢？有的,。,。。,。

webpack有幾種不同的選項(xiàng),，能夠在代碼發(fā)生變化后自動(dòng)打包代碼：

webpack's Watch Mode —— 觀察模式
webpack-dev-server —— 簡單web服務(wù)器
webpack-dev-middleware —— 簡單web服務(wù)器

一、觀察模式

webpack的觀察模式能夠在源代碼改變時(shí),，自動(dòng)進(jìn)行代碼重新打包,。

首先，需要添加一個(gè)用于啟動(dòng)webpack的觀察模式的npm script腳本：

package.json:

{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"private": true,
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"bundle": "webpack",
"watch": "webpack --watch"
},
"author": "ag_dubs <[email protected]>",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^9.5.1",
"clean-webpack-plugin": "^2.0.2",
"css-loader": "^2.1.1",
"file-loader": "^3.0.1",
"html-webpack-plugin": "^3.2.0",
"node-sass": "^4.12.0",
"postcss-loader": "^3.0.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"stylus": "^0.54.5",
"url-loader": "^1.1.2",
"webpack": "^4.31.0",
"webpack-cli": "^3.3.2"
}
}

修改webpack.config.js:

webpack.config.js:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');  // 導(dǎo)入HtmlWebpackPlugin
const CleanWebpackPlugin = require('clean-webpack-plugin');  // 導(dǎo)入CleanWebpackPlugin
module.exports = {
mode: 'development',
devtool: 'cheap-module-eval-source-map',
entry: {
main: './src/index.js',
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.(png|svg|jpg|gif$)/,           // 文件后綴名匹配通配符
use: [{
loader: 'url-loader',               // 使用的loader
options: {
limit: 10240                    // 當(dāng)圖片小于10kb時(shí),，使用base64的方式進(jìn)行打包
}
}]
},
{
test: /\.scss$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 2
}
},
'sass-loader',
'postcss-loader'
]
},
{
test: /\.(woff|woff2|eot|ttf)$/,
use: [
'file-loader'
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
filename: 'dist.html',              // 將自動(dòng)生成的html文件的文件名改為dist.html
template: './src/template.html'     // 模板
}),
new CleanWebpackPlugin()
]
};

修改index.js:

index.js:

console.log('hello world!');

然后使用npm run watch腳本命令進(jìn)行打包：

使用瀏覽器打開dist.html:

控制臺(tái)打印了"hello world!",。

現(xiàn)在修改index.js:

index.js:

console.log('hello webpack!');

然后刷新瀏覽器（注意沒有進(jìn)行重新打包操作），可以看到控制臺(tái)：

瀏覽器控制臺(tái)也成功打印了"hello webpack!",。

說明webpack在觀察模式下會(huì)監(jiān)聽源代碼,，源代碼一發(fā)生變化就自動(dòng)進(jìn)行重新打包操作,。

但是觀察模式有一個(gè)唯一的缺點(diǎn)：為了看到修改后的實(shí)際效果，我們需要手動(dòng)刷新瀏覽器,。

webpack-dev-server不僅能自動(dòng)打包,，還可以實(shí)現(xiàn)自動(dòng)刷新瀏覽器的功能。

二,、webpack-dev-server

webpack的webpack-dev-server其實(shí)是在為我們構(gòu)建了一個(gè)簡單的web服務(wù)器,，能夠?qū)崟r(shí)監(jiān)聽我們的代碼變化，并能自動(dòng)進(jìn)行源代碼打包,。

使用webpack-dev-server需要先安裝webpack-dev-server：

然后修改webpack.config.js：

webpack.config.js:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');  // 導(dǎo)入HtmlWebpackPlugin
const CleanWebpackPlugin = require('clean-webpack-plugin');  // 導(dǎo)入CleanWebpackPlugin
module.exports = {
mode: 'development',
devtool: 'cheap-module-eval-source-map',
entry: {
main: './src/index.js',
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
},
devServer: {
contentBase: './dist'   // 告訴dev-server在哪里查找文件
},
module: {
rules: [
{
test: /\.(png|svg|jpg|gif$)/,           // 文件后綴名匹配通配符
use: [{
loader: 'url-loader',               // 使用的loader
options: {
limit: 10240                    // 當(dāng)圖片小于10kb時(shí),，使用base64的方式進(jìn)行打包
}
}]
},
{
test: /\.scss$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 2
}
},
'sass-loader',
'postcss-loader'
]
},
{
test: /\.(woff|woff2|eot|ttf)$/,
use: [
'file-loader'
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
filename: 'dist.html',              // 將自動(dòng)生成的html文件的文件名改為dist.html
template: './src/template.html'     // 模板
}),
new CleanWebpackPlugin()
]
};

上面的devServer的配置告知webpack-dev-server，在localhost:8080下建立服務(wù),，將dist目錄下的文件,，作為可訪問文件。

接下來,，還要添加一個(gè)npm script 腳本,，用于直接運(yùn)行webpack-dev-server服務(wù)器：

package.json:

{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"private": true,
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"bundle": "webpack",
"watch": "webpack --watch",
"server": "webpack-dev-server"
},
"author": "ag_dubs <[email protected]>",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^9.5.1",
"clean-webpack-plugin": "^2.0.2",
"css-loader": "^2.1.1",
"file-loader": "^3.0.1",
"html-webpack-plugin": "^3.2.0",
"node-sass": "^4.12.0",
"postcss-loader": "^3.0.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"stylus": "^0.54.5",
"url-loader": "^1.1.2",
"webpack": "^4.31.0",
"webpack-cli": "^3.3.2",
"webpack-dev-server": "^3.6.0"
}
}

然后使用npm run server進(jìn)行打包，并開啟webpack-dev-server服務(wù)器：

打開瀏覽器,，在地址欄輸入http://localhost:8080/dist.html：

控制臺(tái)成功打印了hello webpack!,。

接下來，修改index.js：

index.js:

console.log('hello world!');

我們可以看到,，瀏覽器無需刷新而成功打印出hello world!：

剛才webpack-dev-server服務(wù)器是在8080的端口號(hào)上構(gòu)建的,，我們也可以修改成其他端口號(hào)：

webpack.config.js:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');  // 導(dǎo)入HtmlWebpackPlugin
const CleanWebpackPlugin = require('clean-webpack-plugin');  // 導(dǎo)入CleanWebpackPlugin
module.exports = {
mode: 'development',
// devtool: 'cheap-module-eval-source-map',
entry: {
main: './src/index.js',
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
},
devServer: {
contentBase: './dist',   // 告訴dev-server在哪里查找文件
port: '8085'             // 端口號(hào)
},
module: {
rules: [
{
test: /\.(png|svg|jpg|gif$)/,           // 文件后綴名匹配通配符
use: [{
loader: 'url-loader',               // 使用的loader
options: {
limit: 10240                    // 當(dāng)圖片小于10kb時(shí)，使用base64的方式進(jìn)行打包
}
}]
},
{
test: /\.scss$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 2
}
},
'sass-loader',
'postcss-loader'
]
},
{
test: /\.(woff|woff2|eot|ttf)$/,
use: [
'file-loader'
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
filename: 'dist.html',              // 將自動(dòng)生成的html文件的文件名改為dist.html
template: './src/template.html'     // 模板
}),
new CleanWebpackPlugin()
]
};

重新使用npm run server命令重啟服務(wù)器：

可以看到端口改變成8085,。

三,、webpack-dev-middleware + express

除了使用流行的webpack-dev-server，還可以使用webpack-dev-middleware配合express server構(gòu)建簡單的web服務(wù)器,。

webpack-dev-middleware是一個(gè)容器（wrapper）,，它可以把webpack處理后的文件傳遞給一個(gè)服務(wù)器（server）。webpack-dev-server在內(nèi)部使用了它,，同時(shí),，它也可以作為一個(gè)單獨(dú)的包來使用，以便進(jìn)行更多自定義設(shè)置來實(shí)現(xiàn)更多的需求,。

接下來使用webpack-dev-middleware + express server構(gòu)建簡單的web服務(wù)器,。

首先，安裝webpack-dev-middleware和express：

然后在webpack-demo的根目錄下新建一個(gè)server.js文件用于設(shè)置自定義的express服務(wù)：

server.js:

const express = require('express');
const webpackDevMiddleware = require('webpack-dev-middleware');
const webpack = require('webpack');
const config = require('./webpack.config.js');
// webpack編譯器
const compiler = webpack(config);
// 實(shí)例化一個(gè)express實(shí)例
const app = express();
// 告訴express使用webpack-dev-middleware
app.use(webpackDevMiddleware(compiler, {
// 這里可以填寫更多配置項(xiàng)
}));
// 在3000端口號(hào)上啟動(dòng)服務(wù)器
app.listen(3000, () => {
console.log('express server is running');
});

再添加一個(gè)npm script,，用于運(yùn)行服務(wù)：

package.json:

{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"private": true,
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"bundle": "webpack",
"watch": "webpack --watch",
"server": "webpack-dev-server",
"express": "node server.js"
},
"author": "ag_dubs <[email protected]>",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^9.5.1",
"clean-webpack-plugin": "^2.0.2",
"css-loader": "^2.1.1",
"express": "^4.17.1",
"file-loader": "^3.0.1",
"html-webpack-plugin": "^3.2.0",
"node-sass": "^4.12.0",
"postcss-loader": "^3.0.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"stylus": "^0.54.5",
"url-loader": "^1.1.2",
"webpack": "^4.33.0",
"webpack-cli": "^3.3.3",
"webpack-dev-middleware": "^3.7.0",
"webpack-dev-server": "^3.4.0"
}
}

現(xiàn)在,，可以使用npm script運(yùn)行服務(wù)：

使用瀏覽器打開http://localhost:3000/dist.html，可以發(fā)現(xiàn)控制臺(tái)也打印成功：

本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間,，所有內(nèi)容均由用戶發(fā)布,，不代表本站觀點(diǎn),。請注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息,，謹(jǐn)防詐騙,。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點(diǎn)擊一鍵舉報(bào),。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來自：小小小舟 > 《webpack》

舉報(bào)/認(rèn)領(lǐng)