在服务器上运行代码
模拟后端服务器
安装
npm install http-server --save-dev
src/index.js
console.log('hello')
webpack.common.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
module.exports = {
entry: {
app: './src/index.js',
},
output: {
filename: '[name].bundle.js', //入口文件走这里
chunkFilename: '[name].chunk.js', // 间接生成的文件走这里
path: path.resolve(__dirname, '../dist'),
//publicPath也会在服务器脚本用到,确保资源能够在 http://localhost:3000下正确访问
// publicPath: '/'
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
}),
new CleanWebpackPlugin(),
],
//代码分割
optimization: {
usedExports: true,
splitChunks: {
//对异步代码实现代码分割 //initial: 同步代码 //all: 对同步异步代码都进行代码分割
//使用all对同步代码实现代码分割时,还会走cacheGroups这里,需要在这里做一些配置
chunks: "all",
minSize: 30000, //大于该值做代码分割
minChunks: 1,
maxAsyncRequests: 5,
maxInitialRequests: 3,
automaticNameDelimiter: '~',
name: true,
cacheGroups: {
vendors: { //同步代码走这里
//引入的库文件是否在node_modules中,是就放在vendor组中
test: /[\\/]node_modules[\\/]/,
priority: -10,
// filename: 'vendors.js'
},
default: {
priority: -20,
reuseExistingChunk: true,
}
}
}
}
}
webpack.dev.js
const webpack = require('webpack')
const merge = require('webpack-merge')
const commonConfig = require('./webpack.common.js')
const devConfig = {
//默认没有Tree Shaking功能, devtool: cheap-module-eval-source-map
mode: 'development',
devtool: 'cheap-module-eval-source-map',
devServer: {
contentBase: './dist',
open: true,
port: 8080,
hot: true,
hotOnly: true
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader', //babel-loader:babel和webpack中间的桥梁
options: {
"presets": [
[
//es6=>es5
"@babel/preset-env", {
"targets": {
// "edge": "17",
// "firefox": "60",
// "chrome": "67",
"safari": "11.1", //以上版本已经支持es6,不需要再做es6=>es5
},
"corejs": "2", //declaring corejs
useBuiltIns: 'usage'
}
],
"@babel/preset-react", //转化react代码
],
}
},
{
test:/\.css$/,
use: [
'style-loader',
'css-loader'
]
},
]
},
plugins: [
new webpack.HotModuleReplacementPlugin() //要先引入webpack,是webpack自带的插件
],
//Tree Shaking配置项
// optimization: {
// usedExports: true
// }
}
module.exports = merge(commonConfig, devConfig)
webpack.prod.js
const commonConfig = require('./webpack.common.js')
const merge = require('webpack-merge')
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const prodConfig = {
mode: 'production',
devtool: 'cheap-module-source-map',
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader', //babel-loader:babel和webpack中间的桥梁
options: {
"presets": [
[
//es6=>es5
"@babel/preset-env", {
"targets": {
// "edge": "17",
// "firefox": "60",
// "chrome": "67",
"safari": "11.1", //以上版本已经支持es6,不需要再做es6=>es5
},
"corejs": "2", //declaring corejs
useBuiltIns: 'usage'
}
],
"@babel/preset-react", //转化react代码
],
}
},
{
test:/\.css$/,
use: [
// 'style-loader',
MiniCssExtractPlugin.loader,
'css-loader'
],
},
]
},
}
module.exports = merge(commonConfig, prodConfig)
在dist目录下开启一个http-server,让dist生成的文件在http-server上启动
package.json
{
"scripts":{
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --config ./build/webpack.dev.js",
"build": "webpack --config ./build/webpack.prod.js",
"start": "http-server dist"
}
}
运行npm run start
,就可以访问页面内容, 而当我们断开服务器, 则不能访问页面内容
PWA
PWA技术: 第一次访问网站成功了, 再次访问网站时,服务器挂掉了, 当第二次重新访问网站的时候会在本地有一份缓存, 可以利用缓存将之前访问的页面展现出来
workbox-webpack-plugin
使用workbox-webpack-plugin实现PWA技术(要上线的代码才考虑PWA)
安装:
npm i workbox-webpack-plugin --save-dev
webpack.prod.js
//...
const WorkboxPlugin = require('workbox-webpack-plugin')
const prodConfig = {
//...
plugins: [
new WorkboxPlugin.GenerateSW({
clientsClaim: true,
skipWaiting: true
})
],
}
module.exports = merge(commonConfig, prodConfig)
运行npm run build
,生成的dist目录下多处了两个文件:
通过这两个文件可以让serviceworker生效,使项目支持PWA
添加业务代码:
src/index.js
console.log('hello')
if('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('./../dist/service-worker.js')
.then(registeration => {
console.log('service-worker registed')
}).catch(error => {
console.log('service-worker registed error')
})
})
}
重新运行npm run build
打包
再运行npm run start
访问:http://127.0.0.1:8080
当关闭服务器时,之前的页面已经缓存下来, 就可以继续访问页面了~