这次是最后一个需求 架设 webpack 中间服务器(热更新)
先试试这种方式
yarn add webpack-dev-server --dev
这个就是最简单的中间服务器, 我们先把 webpack.config.js 文件修改下
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry: './src/app.jsx',
output: {
path: path.join(__dirname, 'dist'),
filename: 'js/app.js',
+ publicPath: '/dist/'
},
+ devServer: {
+ port: 8088
+ },
module: {
rules: [
{
test: /\.jsx$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env', 'es2015', 'react']
}
}
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'sass-loader']
})
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
name: 'resource/[name].[ext]'
}
}
]
},
{
test: /\.(svg|woff|woff2|eot|ttf|otf)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
name: 'resource/[name].[ext]'
}
}
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
title: 'MY-WEBPACK',
template: './src/index.html'
}),
new ExtractTextPlugin("css/[name].css"),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
})
],
optimization: {
splitChunks: {
chunks: "all",
name: 'common'
}
},
};
我们多了一个 devServer 的键值对 配置了一会要跑起来的中间服务器的端口 不然它默认的是 8080
你可能是上班摸鱼撸这个无脑教程 说不定跑的哪个公司服务就是 8080 端口
另外在 output 里多了一个 publicPath 配置的是 dist, 意思是把 dist 文件夹作为资源索引时的根目录
比如我们原来打包后生成的 index.html 里 script 标签的 src 路径都是 /js/app.js
加上这句以后就会变成 /dist/js/app.js 资源的引用就没问题了
然后打包
node_modules/.bin/webpack
再然后试试跑起来我们的中间服务器
node_modules/.bin/webpack-dev-server
接着在浏览器里输入 http://localhost:8080/dist/ 就能看到你想看到的东西了
热更新实际也有了 比如你去 app.jsx 里把那个字体图标删了 不用重新打包 浏览器里就能自动更新
但是你要是修改的是 webpack.config.js 这种文件还是要重新打包的 中间服务器还没智能到可以热更新配置文件的程度
不过你的项目可能说什么自定义需求比较高啊 webpack-dev-server some time native 啊
那就用另一个方式
yarn add express webpack-dev-middleware --dev
express 我懒得说了
webpack-dev-middleware 是 webpack-dev-server 内部使用的 符合 "自定义需求比较高" 这个需求的东西
现在我们把 webpack-dev-server 从 webpack.config.js 里删了
再改下 publicPath 的路径, 不然之后我们跑服务器的路径会有问题
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry: './src/app.jsx',
output: {
path: path.join(__dirname, 'dist'),
filename: 'js/app.js',
+ publicPath: '/'
},
// devServer: {
// port: 8088
// },
module: {
rules: [
{
test: /\.jsx$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env', 'es2015', 'react']
}
}
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'sass-loader']
})
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
name: 'resource/[name].[ext]'
}
}
]
},
{
test: /\.(svg|woff|woff2|eot|ttf|otf)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
name: 'resource/[name].[ext]'
}
}
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
title: 'MY-WEBPACK',
template: './src/index.html'
}),
new ExtractTextPlugin("css/[name].css"),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
})
],
optimization: {
splitChunks: {
chunks: "all",
name: 'common'
}
},
};
然后在 webpack.config.js 的平级创建一个 server.js 文件
const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const app = express();
const config = require('./webpack.config.js');
const compiler = webpack(config);
app.use(webpackDevMiddleware(compiler, {
publicPath: config.output.publicPath
}));
app.listen(8088, function () {
console.log('port: 8088\n');
});
这个文件就不解释了 不然要牵带的讲一些 node.js 会额外多写很多东西 对我来说比较麻烦 所以各位就自学下吧
最后去 package.json 文件里加几个脚本命令, 以后就不用再手敲长串的指令了
{
"version": "1.0.0",
"main": "index.js",
+ "scripts": {
+ "server": "node server.js",
+ "build": "node_modules/.bin/webpack"
+ },
"author": "TC <thorpe_chen@outlook.com>",
"license": "MIT",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.11",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "^1.1.11",
"html-webpack-plugin": "^3.1.0",
"node-sass": "^4.8.3",
"sass-loader": "^6.0.7",
"style-loader": "^0.20.3",
"url-loader": "^1.0.1",
"webpack": "^4.3.0",
"webpack-cli": "^2.0.13",
"webpack-dev-server": "^3.1.1"
},
"dependencies": {
"font-awesome": "^4.7.0",
"jquery": "^3.3.1",
"react": "^16.2.0",
"react-dom": "^16.2.0"
}
}
指令输入
yarn run server
然后在浏览器里打开 http://localhost:8088/ 就可以了
以上就是全部基础的 webpack 教程
网友评论