携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第29天，点击查看活动详情

源码问题和分析

1.css和js资源较多，且全部采用同步加载，渲染时需多次请求和加载，降低页面加载性能

2.css和js源码未压缩

3.开发模式陈旧，需要同时维护html、css和js，代码逻辑和结构不清晰，迭代困难

4.项目不支持source-map，调试困难，手动维护source-map成本大

接下来将html项目改造成单页面应用项目

项目初始化

1.创建Npm项目

mkdir zbest
cd zbest
npm init -y

2.安装webpack依赖

npm install webpack webpack-cli

3.创建js入口文件

touch src/index.js

4.创建webpack配置文件

const path = require('path')
module.exports = {
    mode: 'development',
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname,'dist')
    }
}

5.配置package.json中的build命令

"scripts": {
    "build": "webpack"
  },

6.执行 npm run build 打包

首页移植

1.资源文件拷贝,将源码中的 html/css/js/img 文件拷贝到新项目中：

a. 将 index.html 拷贝到 src/index.html

b. 将 js 目录拷贝到 src/js

c. 将css 目录拷贝到 src/css

d. 将 img 目录拷贝到 src/img

2.删除Inde.html中的Link和script

3.安装html-webpack-plugin插件

npm install html-webpack-plugin --save-dev

4.配置html-webpack-plugin，配置好后，重新 npm run build，就可以看到在 dist目录下创建了index.html，

并且自动把打包好的 bundle.js加入到了 dist/index.html中

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    mode: 'development',
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname,'dist')
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: './src/index.html'
        })
    ]
}

5.在src/index.js中添加css引用。

5.1 安装需要的loader

npm install css-loader style-loader --save-dev

5.2 在webpack.config.js中进行配置

 module: {
        rules: [
            {
                test: /.css$/,
                use: ['style-loader', 'css-loader']
            }
        ]
    },

5.3 webpack使用file-loader或者img-loader处理图片打包，webpack5中提供了ModuleAssets来处理图片

这里使用ModuleAssets来处理图片

module: {
        rules: [
            {
                test: /.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /.(png|svg|jpg|jpeg|gif)$/i,
                type: 'asset',
                parser: {
                    dataUrlCondition: {
                        maxSize: 8 * 1024,
                    },
                },
                generator: {
                    filename: 'images/[name][hash:6][ext]',
                },
            }
        ]
    },

5.4 重新执行 npm run build后看下打包效果,小于8kb的就会打包成base64，大于8kb的就会打包成图片文件

6.在src/index.js中添加js引用

import './js/jquery-1.12.4.min.js';
import './js/public';
import './js/nav';
import './js/jquery.flexslider-min';

这里有个问题就是 jquery中的 $ 问题

使用webpack内置的一个插件 ProvidePlugin

首先安装下需要的jquery和flexsilder插件

npm install jquery flexslider

接着在webpack.config.js中配置这两个库

new webpack.ProvidePlugin({
            $:'jquery',
            jQuery:'jquery'
        })

重新执行 npm run build后打包看下效果

7.调整index.html中的图片路径,将 index.html中的图片路径全部改成 ../src/img/

这样首页就改造完成了

登录页面移植：

1.拷贝login至src/login.html

2.删除css引用

3.修改图片链接img改完../src/img

4.在src/index.js中添加import './css/login.css'

5.修改webpack配置，添加login.html的配置

Html项目改造成单页面应用(1)

源码问题和分析

项目初始化

首页移植