4-1 Library 的打包
除了打包应用程序代码，webpack 还可以用于打包 JavaScript library
前面的步骤跟普通的打包工程项目一致，先npm init -y初始化文件夹，帮助我们将这个文件变成node_module
// package.json
{
"name": "library",
"version": "1.0.0",
"description": "",
"main": "./dist/library.js", // 入口文件是打包后的dist目录下的library.js文件
"scripts": {
"build": "webpack"
},
"author": "yose",
"license": "MIT",
"dependencies": {
"lodash": "^1.0.0",
"webpack": "^4.32.2",
"webpack-cli": "^3.3.2"
}
}
创建一个名为library的库，里面有一些计算方法和字符串处理的方法
// webpack.config.js
const path = require('path');
module.exports = {
mode: "production",
entry: './src/index.js',
externals: ["lodash"], // 打包的时候忽略lodash，业务上加载lodash，但是必须将lodash命名为lodash
// externals: {
// lodash: {
// root: '_', // 全局script标签变量定义为“_”
// commonjs: 'lodash' // 如果这个库在commonjs环境下使用，
// }
// },
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'librart.js',
library: 'root', // 挂载在全局library变量上，一般写root，让该库可以通过script标签加载
libraryTarget: 'umd' // 通用库，兼容commonjs,seajs等语法
}
}
// math.js
export function add(a, b){
return a + b;
}
export function minus(a, b){
return a - b;
}
export function multiply(a, b){
return a * b;
}
export function division(a, b){
return a / b;
}
// string.js
import _ from 'lodash';
export function join(a, b) {
return _.join([a, b], " ");
}
// index.js
import * as math from './math';
import * as string from './string';
export default {math, string};
开发完后执行npm adduser，输入账号密码后，执行npm publish就能将自己的项目添加到npm的仓库上去
能力不足，我还达不到造轮子的能力，所以这块就不深究了，点到即可
4-2 PWA 的打包配置
PWA是Progressive Web App的英文缩写，也就是渐进式增强WEB应用。
要搭建pwa，可是使用workboxl来简化我们一系列的操作
执行npm i workbox-webpack-plugin -S进行安装
由于我们只需要在线上环境运用pwa，所以我们只更改webpack.prod.js
const WorkboxPlugin = require('workbox-webpack-plugin');
plugins: [
new WorkboxPlugin.GenerateSW({ // serviceWorker
clientsClaim: true,
skipWaiting: true
})
]
// index.js
console.log("this is a pwa");
if('serviceWorker' in navigator){
window.addEventListener('load', () => {
navigator.serviceWorker.register('/service-worker.js')
.then(registration => { // 注册成功返回值
console.log('service-worker registed');
}).catch(error => {
console.log('service-worker registed error');
})
})
}
这里要验证又需要使用http-server来模拟了，前面vue里有说过这里为就不再重新说了，也可以自行百度，反正很简单。为了方便这里在命令行里加入一个start-server命令（记得先把本地文件执行webpack打包，因为这里直接将服务开启在dist目录里）
// package.json
"scripts": {
"start-server": "http-server dist"
}
先运行本地服务器，正常启动后访问页面，此时页面执行出console.log，关闭本地服务，继续访问，此时虽然服务已经关闭，但也没依然能正常执行出console.log
由于开启的http-server并不会自动识别index.html，所以记得浏览器地址加上/index.html，比如完整地址：http://127.0.0.1:8080/index.html
4.3 TypeScript 的打包配置
由于还没学typeScript，这节先不看了，否则记录了也不懂，先跳过
4.4 使用 WebpackDevServer 实现请求转发
这节直接参考vue即可，即路由转发，前面其实也说到过了，这里也不再重复记录。其实就是使用 devServe
的proxy，具体参数官网看一下就会了
底层实际是使用了 webpack-dev-middleware，所以也需要进行阅读
4.5 WebpackDevServer 解决单页面应用路由问题
对于 Vue 这类渐进式前端开发框架，为了构建SPA（单页面应用），需要引入前端路由系统，这也就是Vue-router存在的意义。前端路由的核心，就在于改变视图的同时不会向后端发出请求。
路由的实现由两种方式，一种是hash，另外一种是history
hash，就是我们平时所说的锚点，hash 虽然出现URL中，但不会被包含在HTTP请求中，对后端完全没有影响，因此改变hash不会重新加载页面
history，利用了HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。history模式，会出现404 的情况，因此需要在webpack中进行配置
history 需要使用的是devServer中的 historyApiFallback，大部分文档里看一下就懂了，有个注意的点，to当中的路径是不能带.的，也就是 to: './dist/list'需要写成 to: '/dist/list'
关于vue的vue-router配置，也可以参考该文章：vue-router（路由）详细教程
4.6&4.7 ESLint在webpack中的配置
关于ESLint和ESLint使用上的痛，只有经历过的同学才懂（代码写完，eslint通不过，一直在改代码格式）。vscode也支持eslint插件，用于约束代码书写规范，而这里只讲webpack中的ESLint
4.8~4.11 webpack 性能优化
- 跟上技术迭代（Node，npm，Yarn）
- 在尽可能少的模块上应用Loader
- Plugin尽可能精简并确保可靠（尽可能使用官网推荐的插件）
- resolve参数合理配置（module.exports中的resolve，省略相关文件字段，自动搜索）
// 比如下面这些，需要合理使用
module.exports = {
resolve: {
extensions: ['.js', '.jsx'],
mainFiles: ['index', 'child'], //直接在引入文件的时候只写路径，让wenpack自动帮我们搜索名为index或child的文件
alias: { // 别名
child: path.resolve(__dirname, '../src/child') // 这里直接将组件起别名
}
}
}
- 使用DllPlugin提高打包速度
转载于:https://www.jianshu.com/p/d6548ed68407