Routing & webpack distal Basic Configuration

1. SPA

• SPA is a single-page application (single page application), popular terms is a page in the development of a complete website functionality
• advantage:
  • You do not need to jump page, partial page update content
  • Front-end components of
• Disadvantages:
  • The first screen to load slowly (slow first visit, demand loading)
  • Developing complex (All functions are completed in a page, use webpack Modular Development)
  • SEO is not conducive to search engine optimization (using server-side rendering)

2. The front end of the route:

• Depending on the URL identifier rendering components (different web content) unused
• The principle route:
  • hash hash (anchor) through hashchange monitor URL identifier changed to display different content

    <ul>
        <li><a href="#login">鲁班</a></li>
        <li><a href="#home">提莫</a></li>
        <li><a href="#list">剑姬</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>
    复制代码

3. The modular front end

• CommonJS
  • Export module
    • module.exports
    • exports
  • Import module
    • require()
• ES6 Module
  • Export module
    • export
  • Import module
    • import

4. webpack Basic Configuration

• Initialize the project

  npm init -y
  复制代码

• Installation dependencies

  npm install webpack -D
  
  npm install webpack-cli -D
  复制代码

• Package files webpack command: modular converter, code compression merger
  • webpack.config.js

  const path = require('path');
  // 下包并导入插件 npm i html-webpack-plugin -D
  const 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'
  },
  // 配置资源的加载器 loader
  module: {
      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
  }
  }
  复制代码

  • package.json file configuration

  "scripts": {
      "dev": "npx webpack-dev-server --open"
  }
  复制代码

5. How to determine the configuration webpack

• Specify the source file is added to the process is controlled webpack constructed, arranged entry
• The location and name of the output file, configuration output
• Custom parse and convert files, configuration module, usually configured module.rules in the Loader. (Resource loader)
• Configuring the plug-configured through plugins
• When looking dependent module configured to resolve