这样，webpack配置的title就可以动态的添加到html页面中了，这里我要说一下在new HtmlWebpackPlugin中我们添加了chunks数组，这个数组就是我们要打包进页面的js，main和about分别代表入口的名字，vender就是我们定义optimization时里面cacheGroups属性值中vendors中定义的name,当代码超过30000b时就会生成vender.js文件。 此时我们执行npm run build，打包结束后将会生成2个html页面，对应的文件依赖也会引入，在浏览器中打开，亲测有效～
这样，一个基本的多页面打包工具就开发完成了，不过还有几点优化：
代码压缩，
第三方模块懒编译，我们可以使用webpack提供的dll技术做优化
pwa技术引入 下面分别是相关实现： 1.代码压缩，我们使用terser-webpack-plugin压缩js，用optimize-css-assets-webpack-plugin压缩css
npm install terser-webpack-plugin optimize-css-assets-webpack-plugin -D
我们在webpack.prod.js中添加一下配置：
// 导入模块 // 压缩css const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); // 压缩js const TerserPlugin = require('terser-webpack-plugin'); // 配置module.exports,添加配置如下 optimization: { minimizer: [ new TerserPlugin({ // 压缩js代码 cache: true, // 启用文件缓存 parallel: true, // 使用多进程并行执行任务来提高构建效率 sourceMap: true, // 将错误消息位置映射到模块 terserOptions: { drop_console: true, // 打包时剔除所有console.log drop_debugger: true // 打包时剔除所有debugger } }), new OptimizeCSSAssetsPlugin({})] // 压缩css代码 },
pwa：渐进式网络应用程序(progressive web application - PWA)，是一种可以提供类似于native app(原生应用程序) 体验的 web app(网络应用程序)。首先我们安装依赖：
npm install workbox-webpack-plugin --save-dev
在需要做pwa的页面里加入如下脚本启动：
if ('serviceWorker' in navigator) { window.addEventListener('load', () => { navigator.serviceWorker.register('/service-worker.js').then(registration => { console.log('SW registered: ', registration); }).catch(registrationError => { console.log('SW registration failed: ', registrationError); }); }); }
dll文件优化打包速度 关于dll问题，我们可以在官网上查询具体的使用方法，这里就不具体说明了。
至此，我们关于开发基于ES6+JQuery+Less/Scss的单页/多页脚手架就告于段落了，下面我们来集成对react/vue/typescript的支持。
1.支持react
我们首先安装一个babel模块：
npm install --save-dev @babel/preset-react
然后在.babelrc中加入如下配置：
{ "presets": [ [ "@babel/preset-react", { "pragma": "dom", // default pragma is React.createElement "pragmaFrag": "DomFrag", // default is React.Fragment "throwIfNamespace": false // defaults to true } ] ] }
然后在index.js中写入一段react代码：
import React, {Component} from 'react' import ReactDOM from 'react-dom' class App extends Component { render() { return <div>react frame content.</div> } } ReactDOM.render(<App />, document.getElementById('root'));
打包后即可在浏览器中看到效果。
2.支持vue
首先先安装对应npm包：
npm install -D vue-loader vue-template-compiler
之后在webpack的配置文件中写入如下代码：
// webpack.base.js const VueLoaderPlugin = require('vue-loader/lib/plugin') module.exports = { module: { rules: [ // ... other rules { test: /\.vue$/, loader: 'vue-loader' } ] }, plugins: [ // make sure to include the plugin! new VueLoaderPlugin() ] }
如果要想解析.vue文件中的style，我们需要使用vue-style-loader模块，安装之后将其添加到loder中即可。 接下来我们写个简单的vue试一下吧：
<template> <div> {{ msg }} <img src="https://www.jb51.net/~/images/logo.png" /> <img :src="imgSrc" /> </div> </template> <script> import Logo from 'images/logo.png'; import 'css/common.css'; export default { data () { return { msg: 'Hello world!单独的', imgSrc: Logo } } } </script> <style lang="less"> .example { color: red; img { border: 2px solid #000; } } </style>
运行dev在浏览器中即可看到效果。 值得注意的是vue文件中引入资源的问题，使用相对路径会有问题，这里我们可以使用~/images/logo.png的方式或者require的方式来引入图片。
3.支持typescript
这里我们使用awesome-typescript-loader来编译typescript文件，也是官方推荐的一个加载器：
npm install awesome-typescript-loader --save-dev
然后我们在webpack的配置文件base中，在module的rules里加入如下代码：
{ test: /\.tsx?$/, loader: 'awesome-typescript-loader' }
最后一步，添加tsconfig.json文件：
{ "compilerOptions": { "noImplicitAny": true, "removeComments": true }, "awesomeTypescriptLoaderOptions": { /* ... */ } }