<ul> <li><a href="#login" rel="external nofollow" >鲁班</a></li> <li><a href="#home" rel="external nofollow" >提莫</a></li> <li><a href="#list" rel="external nofollow" >剑姬</a></li></ul><div id="app"></div><script>// 监听hash值的不用,让页面显示不同的内容window.onhashchange = function() { let app = document.getElementById('app'); // 获取hash值 let hash = location.hash.substr(1); // 根据标识展现不同的内容 局部更新 switch(hash) { case 'login': app.innerHTML = '托马斯回旋...'; break; case 'home': app.innerHTML = '正在路上...'; break; case 'list': app.innerHTML = '华尔兹...'; break; } }</script> const path = require('path');// 下包并导入插件 npm i html-webpack-plugin -Dconst HtmlWebpackPlugin = require('html-webpack-plugin');// npm i clean-webpack-plugin -D 清除目录中的内容const { CleanWebpackPlugin } = require('clean-webpack-plugin');module.exports = {// 配置打包选项 development开发环境mode: 'development', // production 生产环境// 指定入口文件：要打包的文件entry: './src/js/index.js',// 指定输出文件：打包之后的文件output: { path: path.resolve(__dirname, 'dist'), filename: 'main.min.js'},// 配置资源的加载器 loadermodule: { rules: [ // 配置js的加载器（把ES6转化为ES3/5代码） { test: //.jsx?$/, loader: 'babel-loader', //打包除这个文件之外的文件 exclude: path.join(__dirname, './node_modules'), //打包包括的文件 include: path.join(__dirname, './src') }, // 配置css的加载器 { // 匹配.css结尾的文件 test: //.css$/, // 配置css文件的加载器,处理顺序：从右向左 use: ['style-loader', 'css-loader'] }, // 配置less的加载器 { test: //.less$/, use: ['style-loader', 'css-loader', 'less-loader'] } ]},// 配置插件plugins: [ new CleanWebpackPlugin(), // 动态生成html new HtmlWebpackPlugin({ title: '测试标题', template: 'index.html' })],// 配置实时预览环境 devServer: { contentBase: path.join(__dirname, 'dist'), port: 5000}} 
