前端路由&webpack基礎(chǔ)配置詳解

<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>
// 監(jiān)聽hash值的不用,讓頁面顯示不同的內(nèi)容
window.onhashchange = function() {
  let app = document.getElementById('app');
  // 獲取hash值
  let hash = location.hash.substr(1);
  // 根據(jù)標識展現(xiàn)不同的內(nèi)容 局部更新
  switch(hash) {
    case 'login':
      app.innerHTML = '托馬斯回旋...';  
      break;
    case 'home':
      app.innerHTML = '正在路上...';
      break;
    case 'list':
      app.innerHTML = '華爾茲...';
      break;
    }
  }
</script>

npm init -y

npm install webpack -D

npm install webpack-cli -D

const path = require('path');
// 下包并導入插件 npm i html-webpack-plugin -D
const HtmlWebpackPlugin = require('html-webpack-plugin');
// npm i clean-webpack-plugin -D 清除目錄中的內(nèi)容
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
// 配置打包選項 development開發(fā)環(huán)境
mode: 'development', // production 生產(chǎn)環(huán)境
// 指定入口文件：要打包的文件
entry: './src/js/index.js',
// 指定輸出文件：打包之后的文件
output: {
  path: path.resolve(__dirname, 'dist'),
  filename: 'main.min.js'
},
// 配置資源的加載器 loader
module: {
  rules: [
  // 配置js的加載器（把ES6轉(zhuǎn)化為ES3/5代碼）
  {
    test: /\.jsx?$/,
    loader: 'babel-loader',
    //打包除這個文件之外的文件
    exclude: path.join(__dirname, './node_modules'),
    //打包包括的文件
    include: path.join(__dirname, './src')
  },
  // 配置css的加載器
  {
    // 匹配.css結(jié)尾的文件
    test: /\.css$/,
    // 配置css文件的加載器,處理順序：從右向左
    use: ['style-loader', 'css-loader']
  },
  // 配置less的加載器
  {
    test: /\.less$/,
    use: ['style-loader', 'css-loader', 'less-loader']
  }
  ]
},
// 配置插件
plugins: [
  new CleanWebpackPlugin(),
  // 動態(tài)生成html
  new HtmlWebpackPlugin({
  title: '測試標題',
  template: 'index.html'
  })
],
// 配置實時預覽環(huán)境 
devServer: {
  contentBase: path.join(__dirname, 'dist'),
  port: 5000
}
}

"scripts": {
  "dev": "npx webpack-dev-server --open"
}