webpack4学习笔记(六)
Libary打包
在对库打包时，为了使用者可以方便使用打包后对库，我们需要在库文件中webpack配置里做如下配置.
const path = require('path');
module.exports = {
mode: 'production',
entry: './src/index.js',
externals: ['lodash'],
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'library.js',
library: 'root',
libraryTarget: 'umd'
}
}
2
3
4
5
6
7
8
9
10
11
12
13
library的配置是为了支持使用者可以通过script标签来引用该库
libraryTarget的配置是为了支持使用者可以通过AMD或CommonJs来引用库。umd的意思不管是AMD或CommonJs等形式引入，都可以引用到库。
externals是为打包过程中如果遇到lodash，则忽略lodash而不打包进库文件中。externals既可以是一个数组也可以是一个对象。
PWA
PWA全称progressive Web Application,pwa实现的功能是即便服务器挂掉，还是可以通过在本地的缓存来访问到页面。首先安装插件,然后在webpack.prod.js中Plugins中配置,因为该功能只在线上使用
cnpm install workbox-webpack-plugin --save-dev
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[name].chunk.css'
}),
new WorkboxPlugin.GenerateSW({
clientsClaim: true,
skipWaiting: true
})
],
2
3
4
5
6
7
8
9
10
运行命令打包后会多处两个文件precache-manifest.js和service-worker.js, service-worker这个文件就可以让我们的页面被缓存住。
TypeScript打包
安装ts-loader,配置webpack
const path = require('path');
module.exports = {
mode: 'production',
entry: './src/index.tsx',
module: {
rules: [{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
}]
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
当打包ts文件时，不要忘了在根目录下配置一个tsconfig.json的文件
{
"compilerOpitons": {
"outDir": "./dist", // 打包文件放在dist文件中
"module": "es6", // 用es6语法的模块引入方式引用
"target": "es5", // 打包成es5语法
"allowJs": true, // 运行映入js文件
}
}
2
3
4
5
6
7
8
webpackDevServer实现请求转发
当我们在业务开发中进行ajax请求时，我们不需要每次请求都把请求路径写死写成绝对路径，我们可以写成相对路径，然后通过devserver中都proxy来实现转发。
devServer: {
contentBase: './dist',
open: true,
port: 8089,
hot: true,
hotOnly: true,
proxy: {
'/react/api': {
target: 'http://www.dell-lee.com',
secure: false, // 对https起作用
pathRewrite: {
'header.json': 'demo.json'
}，
bypass: function(req, res, proxyOptions) { // 对于浏览器请求，你想要提供一个 HTML 页面，但是对于 API 请求则保持代理
if (req.headers.accept.indexOf("html") !== -1) {
console.log("Skipping proxy for browser request.");
return "/index.html";
}
},
changeOrigin: true, // 解决网站对origin的限制
}
}
},
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
上面配置都意思就是，当请求遇到/react/api开头的路径时，webpack就会通过prosy将这个请求转发到'http://www.dell-lee.com'，pathRewrite配置的意思是虽然请求的是'/react/api/header.json'，但是实际上回去请求'/react/api/demo.json'.
注意一点的是，devserver的转发配置只在dev环境下生效，对线上的代码不起作用 proxy不仅仅可以做转发的配置，还可以配置请求头headers和cookie的设置
单页面路由
在devserver中配置historyApiFallback: true的作用是任意的 404 响应都可能需要被替代为 index.html，
通过传入一个对象，比如使用 rewrites 这个选项，此行为可进一步地控制：
historyApiFallback: {
rewrites: [
{ from: /^\/$/, to: '/views/landing.html' },
{ from: /^\/subpage/, to: '/views/subpage.html' },
{ from: /./, to: '/views/404.html' }
]
}
2
3
4
5
6
7