Webpack生成企业站静态页面 - 项目搭建

        现在Web前端流行的三大框架有Angular、React、Vue，很多项目经过这几年的洗礼，已经都 转型使用这三大框架进行开发，那为什么还要写纯静态页面呢？比如Vue中除了SPA单页面开发，也可以使用nuxt.js实现SSR服务端渲染，满足SEO优化。但是对于那些还是在维护老项目，使用MVC、MVP进行开发，或者觉得使用nuxtjs成本较高小型项目，从历史原因和项目实际情况考虑，会退而求其次，让前端快速完成页面框架和样式，交付后端进行数据渲染。

        虽然现在市面上开发静态页面需求量不大，作为个学习和了解，还是决定写下使用webpack如果快速完成静态页面搭建，并能像三大框架一样能实现组件化开发，并使用less/sass/styuls完成样式的预编译，提升静态页面开发效率。

一、环境搭建

1.1 创建项目

        在您的电脑上创建一个项目目录，这里命名为“island"，如下图：

1.2 初始化项目

        打开cmd或者IDE编辑工具，打开命令控制台操作界面，初始化生成package.json文件，输入命令”npm init“，如下图：

        命令执行完毕后，目录中就已生成了package.json，如下较：

1.3 安装webpack

        操作命令如下：

npm i -D webpack webpack-cli

        待命令执行完毕后，项目目录中则会生成node_modules，此时webpack已安装成功，如下图：

二、webpack配置文件

2.1 创建配置文件

        在island目录下面创建webpack.config.js文件，以及源文件目录src，先在src目录下创建一个index.js文件作测试，如下l图：

        代码如下：

const { resolve } = require('path');

module.exports = {
    entry: [resolve(__dirname, './src/index.js')],
    mode: 'production'
}

        此时webpack已经可以正常运行了，在命令行中输入webpack即可，如下图：

        此时island目录中则会多出一个dist目录，在不配置情况下，默认输出目录名称为“dist”。由于output还未配置，webpack默认输出入口文件为main.js，如下图：

2.2  output配置

        output 位于对象顶级键(key)，包括了一组选项，指示 webpack 如何去输出、以及在哪里输出你的「bundle、asset 和其他你所打包或使用 webpack 载入的任何内容」。

        将output对js文件输出结果进行修改，代码如下：

const { resolve } = require('path');

module.exports = {
    entry: [resolve(__dirname, './src/index.js')],
    output: {
        filename: 'app.bundle.js',      // 对入口名称进行命名,
        clean: true                     // 在生成文件之前清空 output 目录
    },
    mode: 'production'
}

        此时运行结果生成入口的js则从main.js变成app.bundle.js，如下图：

2.3 js资源输出

        如下图，当我们写静态页面时，全有首页、列表页、详情页、联系我们、预约等页面，每个页面有公共资源，也有独有资源，所以这时就需要进行多谁的输出了。

        

        首衔根据上图，把所有html页面和对应页面的js创建好，如下图：

        然后在webpack.config.js中，配置好多入口文件，即可生成对应js文件了（注意：因为现在entry中是多入口文件，所以output中filename不能写死，需要改成[name]动态取对应入口文件名称），代码如下：

const { resolve } = require('path');

module.exports = {
    entry: {
        index: resolve(__dirname, './src/js/index.js'),
        list: resolve(__dirname, './src/js/list.js'),
        article: resolve(__dirname, './src/js/article.js'),
        contact: resolve(__dirname, './src/js/contact.js'),
        message: resolve(__dirname, './src/js/message.js'),
    },
    output: {
        filename: '[name].bundle.js',      // 对入口名称进行命名,
        clean: true                     // 在生成文件之前清空 output 目录
    },
    mode: 'production'
}

        此时执行webpack命令，则dist会生成对应的js文件。由于chunkfilename是根据chunk发送的请示去生成的，所以现在还不是根据此格式进行命名，这块后面再讲。如下图：

2.4 提取html页面

        提取生成html文件，需要安装html-loader和html-webpack-plugin，命令如下：

npm i -D html-loader html-webpack-plugin

       html-webpack-plugin配置参数：

名称类型默认值描述
title{String}Webpack App要用于生成的HTML文档的标题
filename{String|Function}'index.html'要写入HTML的文件。默认为index.html。你也可以在这里指定一个子目录(例如:assets/admin.html)。[name]占位符将被条目名称替换。也可以是函数，例如(entryName) => entryName + '.html'。
template{String}``Webpack模板的相对或绝对路径。默认情况下，它将使用src/index。如果它存在的话。详情请参阅文档
templateContent{string|Function|false}false是否可以使用代替模板来提供内联模板
templateParameters{Boolean|Object|Function}false允许覆盖模板中使用的参数
inject{Boolean|String}truetrue || 'head' || 'body' || false将所有资源注入给定模板或templateContent中。当传递'body'时，所有javascript资源将被放置在body元素的底部。'head'将把脚本放在head元素中。传入true将根据scriptLoading选项将其添加到头部/主体。通过false将禁用自动注入。-参见inject:false示例
publicPath{String|'auto'}'auto'用于脚本和链接标记的publicPath
scriptLoading{'blocking'|'defer'|'module'|'systemjs-module'}'defer'现代浏览器支持非阻塞javascript加载('defer')以提高页面启动性能。设置为'module'添加属性type="module"。这也意味着“defer”，因为模块是自动延迟的。
favicon{String}``将给定的图标路径添加到输出HTML中
meta{Object}{}允许注入元标签。例如meta: {viewport: 'width=device-width, initial-scale=1, shrink-to-fit=no'}
base{Object|String|false}false注入一个基本标签。例如:“https://example.com/path/page.html
minify{Boolean|Object}true if mode is 'production', otherwise false控制是否以及以何种方式减少输出。
hash{Boolean}false如果为true，则在所有包含的脚本和CSS文件中附加一个唯一的webpack编译哈希值(即main.js?hash=compilation_hash)。这对缓存很有用
cache{Boolean}true只有在文件被更改时才发出该文件
showErrors{Boolean}true错误详细信息将写入HTML页面
chunks{?}?允许你只添加一些块(例如只添加单元测试块)
chunksSortMode{String|Function}auto允许控制块在包含到HTML之前应该如何排序。允许的值为'none' | 'auto' | 'manual' | {Function}
excludeChunks{Array.<string>}``允许你跳过一些块(例如不添加单元测试块)
xhtml{Boolean}false如果为真，则将链接标记呈现为自关闭(符合XHTML)

        首先我们使用html-webpack-plugin来提取html文件，在webpack.config.js中引用，代码如下：

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        index: resolve(__dirname, './src/js/index.js'),
        list: resolve(__dirname, './src/js/list.js'),
        article: resolve(__dirname, './src/js/article.js'),
        contact: resolve(__dirname, './src/js/contact.js'),
        message: resolve(__dirname, './src/js/message.js'),
    },
    output: {
        filename: 'js/[name].bundle.js',      // 对入口名称进行命名,
        clean: true                     // 在生成文件之前清空 output 目录
    },
    plugins: [
        new HtmlWebpackPlugin({
            inject: 'body',
            template: resolve(__dirname, `./src/index.html`),
            filename: 'index.html',
            chunks: ['index'],
            minify: false
        }),
        new HtmlWebpackPlugin({
            inject: 'body',
            template: resolve(__dirname, `./src/list.html`),
            filename: 'list.html',
            chunks: ['list'],        // chunk发送请求生成对应js文件，并引入html中
            minify: false
        })
    ],
    mode: 'production'
}

        如上，先生成首页和列表页的html页面，执行webpack，结果如下图：

        此时在dist目录中已生成了index.html和list.html页面，并且打开index.html页面发现index.bundle.js也自动添加到html页面中了。

2.5 html中图片资源处理

        首先，在src目录下创建images目录用于存储图片资源，并且在index.html页面中添加几张图片引入代码，如下图：

        执行webpack命令后，结果如下图：

        从上图可以看出生成的index.html页面中，资源路径还是和源文件index.html中路径一样，未根据dist目录重构，而且dist目录中也没生成对应images目录及图上资源。从而得出结论html-webpack-plugin并未处理html内容中的图片资源，这里我们将使用html-loader来实现图片资源的提取。

        html-loader配置参数：

名称类型默认值描述
sources{Boolean|Object}true启用/禁用 sources 处理
preprocessor{Function}     undefined允许在处理前对内容进行预处理
minimize{Boolean|Object}在生产模式下为 true，其他情况为 false通知 html-loader 压缩 HTML
esModule{Boolean} true启用/禁用 ES modules 语法

        代码如下：

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        index: resolve(__dirname, './src/js/index.js'),
        list: resolve(__dirname, './src/js/list.js'),
        article: resolve(__dirname, './src/js/article.js'),
        contact: resolve(__dirname, './src/js/contact.js'),
        message: resolve(__dirname, './src/js/message.js'),
    },
    output: {
        filename: 'js/[name].bundle.js',      // 对入口名称进行命名,
        clean: true                     // 在生成文件之前清空 output 目录
    },
    module: {
        rules: [
            // 匹配图片资源，指定构建后存储位置和命名
            {
                test: /\.(png|jpg|jpeg|svg|gif)$/i,
                type: 'asset/resource',
                generator: {
                    filename: 'images/[name].[ext]'
                }
            }, 
            // 匹配html页面，并提取内部资源文件
            {
                test: /\.html$/i,
                loader: "html-loader",
                exclude: /node_modules/,
                options: {
                    minimize: false,        // 不压缩html内容
                }
            },
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            inject: 'body',
            template: resolve(__dirname, `./src/index.html`),
            filename: 'index.html',
            chunks: ['index'],
            minify: false
        }),
        new HtmlWebpackPlugin({
            inject: 'body',
            template: resolve(__dirname, `./src/list.html`),
            filename: 'list.html',
            chunks: ['list'],
            minify: false
        })
    ],
    mode: 'production'
}

        此时再运行webpack命令，图片资源就可以构建到dist目录指定位置了，并且index.html中图片资源也一起更新成dist目录中新路径，如下图：

2.6 优化配置文件

         由于后期项目中页面会不断增加，webpack.config.js中同需不断在entry和plugins中添加新内容，久而久之代码会显示的很臃肿，这里将页面部分独立出来，在island目录中新建static.config.js文件，如下图：

        static.config.js文件代码如下，后期有新增页面时，在此配置即可。

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

// 引用JS文件
const scripts = ["index", "list", "article", "contact", "message"];
// 需要生成的静态页面
const htmls = [
    {name: "index.html", chunks: ['index']},
    {name: "list.html", chunks: ['list']},
    {name: "article.html", chunks: ['article']},
    {name: "contact.html", chunks: ['contact']},
    {name: "message.html", chunks: ['message']}
];
/**
 * 静态页面配置
 */
module.exports = {
    // 重组js入口文件
    entrys: () => {
        let params = {};
        scripts.forEach(name => {
            params[name] = resolve(__dirname, `./src/js/${name}.js`);
        })
        return params;
    },
    // 重组静态页面文件
    staticHtmls: () =>  htmls.map(item => {
        return new HtmlWebpackPlugin({
            inject: 'body',
            template: resolve(__dirname, `./src/${item.name}`),
            filename: item.name,
            chunks: item.chunks,
            minify: false
        });
    })
}

        webpack.config.js文件代码如下：

const { resolve } = require('path');
const { entrys, staticHtmls } = require('./static.config');

module.exports = {
    entry: {
        ...entrys()
    },
    output: {
        filename: 'js/[name].bundle.js',      // 对入口名称进行命名,
        clean: true                     // 在生成文件之前清空 output 目录
    },
    module: {
        rules: [
            // 匹配图片资源，指定构建后存储位置和命名
            {
                test: /\.(png|jpg|jpeg|svg|gif)$/i,
                type: 'asset/resource',
                generator: {
                    filename: 'images/[name].[ext]'
                }
            }, 
            // 匹配html页面，并提取内部资源文件
            {
                test: /\.html$/i,
                loader: "html-loader",
                exclude: /node_modules/,
                options: {
                    minimize: false,        // 不压缩html内容
                }
            },
        ]
    },
    plugins: [
        ...staticHtmls()
    ],
    mode: 'production'
}

        优化完成后，此时再运行webpack，所有页面则全部生成，如下图：

2.7 css文件引入

        处理css样式文件，需要安装三个loader，命令如下：

npm i -D style-loader css-loader less-loader

        webpack.config.js中添加处理样式文件的loader，代码如下：

const { resolve } = require('path');
const { entrys, staticHtmls } = require('./static.config');

module.exports = {
    entry: {
        ...entrys()
    },
    output: {
        filename: 'js/[name].bundle.js',      // 对入口名称进行命名,
        clean: true                     // 在生成文件之前清空 output 目录
    },
    module: {
        rules: [
            // style-loader 把 CSS 插入到 DOM 中。
            // css-loader 会对 @import 和 url() 进行处理，就像 js 解析 import/require() 一样。
            {
                test: /\.css$/i,
                use: ["style-loader", 'css-loader']
            },
            // webpack 将 Less 编译为 CSS 的 loader。
            {
                test: /\.less$/i,
                use: ["style-loader", 'css-loader', 'less-loader']
            },
            // 匹配图片资源，指定构建后存储位置和命名
            {
                test: /\.(png|jpg|jpeg|svg|gif)$/i,
                type: 'asset/resource',
                generator: {
                    filename: 'images/[name].[ext]'
                }
            }, 
            // 匹配html页面，并提取内部资源文件
            {
                test: /\.html$/i,
                loader: "html-loader",
                exclude: /node_modules/,
                options: {
                    minimize: false,        // 不压缩html内容
                }
            },
        ]
    },
    plugins: [
        ...staticHtmls()
    ],
    mode: 'production'
}

        在src目录下创建css目录用于存储样式文件，并创建index.less文件，在js/index.js中引入。

        index.less代码如下：

#app{
    margin: 0;
    padding: 0;
}

        js/index.js代码如下：

import '../css/index.less';

        添加后，运行webpack.config.js会发现，构建后的css内容是写在js/index.js文件中，并且index.html在浏览器中打开时，样式内容被动态注入到html页面中，如下图：

2.8 提取CSS为单独文件

        如何提出CSS为单独文件，并能像js文件一样，将引用链接自动添加到html内容中呢？这里就要用到一个新插件：mini-css-extract-plugin，通过命令进行安装，代码如下：

npm i -D mini-css-extract-plugin

        安装完成后，也是通过new实例并放在pugins。另外需要注意的是module中style-loader要替换成mini-css-extract-plugin插件的loader，这个插件将CSS提取到单独的文件中，为每个包含CSS的JS文件创建一个CSS文件，它支持按需加载CSS和SourceMaps。

        它建立在webpack v4新特性(模块类型)之上，需要webpack 4及以上版本才能工作。

        webpack.config.js 代码如下：

const { resolve } = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { entrys, staticHtmls } = require('./static.config');

module.exports = {
    entry: {
        ...entrys()
    },
    output: {
        filename: 'js/[name].bundle.js',      // 对入口名称进行命名,
        clean: true                     // 在生成文件之前清空 output 目录
    },
    module: {
        rules: [
            // style-loader 把 CSS 插入到 DOM 中。
            // MiniCssExtractPlugin.loader 提取CSS为独立文件
            // css-loader 会对 @import 和 url() 进行处理，就像 js 解析 import/require() 一样。
            {
                test: /\.css$/i,
                use: [MiniCssExtractPlugin.loader, 'css-loader']
            },
            // webpack 将 Less 编译为 CSS 的 loader。
            {
                test: /\.less$/i,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
            },
            // 匹配图片资源，指定构建后存储位置和命名
            {
                test: /\.(png|jpg|jpeg|svg|gif)$/i,
                type: 'asset/resource',
                generator: {
                    filename: 'images/[name].[ext]'
                }
            }, 
            // 匹配html页面，并提取内部资源文件
            {
                test: /\.html$/i,
                loader: "html-loader",
                exclude: /node_modules/,
                options: {
                    minimize: false,        // 不压缩html内容
                }
            },
        ]
    },
    plugins: [
        ...staticHtmls(),
        // 提取css文件
        new MiniCssExtractPlugin({
            filename: 'css/[name]_bundle.css',      //输出文件
        })
    ],
    mode: 'production'
}

        此时运行webpack，样式文件则提取了来了，结果如下图：

2.9 alias别名

        创建 import 或 require 的别名，来确保模块引入变得更简单。例如，指定样式文件src/css 文件夹下的常用模块：

const { resolve } = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { entrys, staticHtmls } = require('./static.config');

module.exports = {
    entry: {
        ...entrys()
    },
    output: {
        filename: 'js/[name].bundle.js',      // 对入口名称进行命名,
        clean: true                     // 在生成文件之前清空 output 目录
    },
    module: {
        rules: [
            // style-loader 把 CSS 插入到 DOM 中。
            // MiniCssExtractPlugin.loader 提取CSS为独立文件
            // css-loader 会对 @import 和 url() 进行处理，就像 js 解析 import/require() 一样。
            {
                test: /\.css$/i,
                use: [MiniCssExtractPlugin.loader, 'css-loader']
            },
            // webpack 将 Less 编译为 CSS 的 loader。
            {
                test: /\.less$/i,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
            },
            // 匹配图片资源，指定构建后存储位置和命名
            {
                test: /\.(png|jpg|jpeg|svg|gif)$/i,
                type: 'asset/resource',
                generator: {
                    filename: 'images/[name].[ext]'
                }
            }, 
            // 匹配html页面，并提取内部资源文件
            {
                test: /\.html$/i,
                loader: "html-loader",
                exclude: /node_modules/,
                options: {
                    minimize: false,        // 不压缩html内容
                }
            },
        ]
    },
    plugins: [
        ...staticHtmls(),
        // 提取css文件
        new MiniCssExtractPlugin({
            filename: 'css/[name]_bundle.css',      //输出文件
        })
    ],
    resolve: {
        alias: {
            // 样式目录路径别名
            $css: resolve(__dirname, 'src/css')
        }
    },
    mode: 'production'
}

        将index.js中引入的样式文件路径，用$css替换，代码如下：

import '../css/index.less';

替换为

import '$css/index.less';

        此时再运行webpack，结果还是一样的，样式文件正常构建成功。

2.10 本地服务(devServer)

        webpack-dev-server 能够用于快速开发应用程序，创建本地服务运行；当服务启动时，会解析指定dist目录。

        要想使用devServer，要先安装webpack-dev-server，安装命令：

npm i -D webpack-dev-server

        webpack.config.js 代码如下：

const { resolve } = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { entrys, staticHtmls } = require('./static.config');

module.exports = {
    entry: {
        ...entrys()
    },
    output: {
        filename: 'js/[name].bundle.js',      // 对入口名称进行命名,
        clean: true                     // 在生成文件之前清空 output 目录
    },
    module: {
        rules: [
            // style-loader 把 CSS 插入到 DOM 中。
            // MiniCssExtractPlugin.loader 提取CSS为独立文件
            // css-loader 会对 @import 和 url() 进行处理，就像 js 解析 import/require() 一样。
            {
                test: /\.css$/i,
                use: [MiniCssExtractPlugin.loader, 'css-loader']
            },
            // webpack 将 Less 编译为 CSS 的 loader。
            {
                test: /\.less$/i,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
            },
            // 匹配图片资源，指定构建后存储位置和命名
            {
                test: /\.(png|jpg|jpeg|svg|gif)$/i,
                type: 'asset/resource',
                generator: {
                    filename: 'images/[name].[ext]'
                }
            }, 
            // 匹配html页面，并提取内部资源文件
            {
                test: /\.html$/i,
                loader: "html-loader",
                exclude: /node_modules/,
                options: {
                    minimize: false,        // 不压缩html内容
                }
            },
        ]
    },
    plugins: [
        ...staticHtmls(),
        // 提取css文件
        new MiniCssExtractPlugin({
            filename: 'css/[name]_bundle.css',      //输出文件
        })
    ],
    resolve: {
        alias: {
            // 样式路径目录别名
            $css: resolve(__dirname, 'src/css')
        }
    },
    mode: 'production',
    devServer: {
        static: {
            // 指定服务运行目录
            directory: resolve(__dirname, 'dist')
        },
        compress: true,     //gzip压缩
        port: 3000,         //指定端口号
        open: true,         //服务启动后自动在浏览器打开
        hot: true           //开启热更
    }
}

        devServer添加完成后，在控制台输入命名npx webpack serve，等待服务开始即可。运行结果如下：

2.11 公共文件

        在项目中，会有公共的样式和js功能，所以创建common.js和common.less文件（注意common.less文件需要在common.js文件中引入），如下图：

        common.js文件代码如下：

import '$css/common.less';

        另外将common.js放入到htmlWebpackPlugin的chunks中（注意：entry入口中也要添加common，这里放在scipts数组中）。

        static.config.js 代码如下：

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

// 引用JS文件
const scripts = ["common", "index", "list", "article", "contact", "message"];
// 需要生成的静态页面
const htmls = [
    {name: "index.html", chunks: ['index']},
    {name: "list.html", chunks: ['list']},
    {name: "article.html", chunks: ['article']},
    {name: "contact.html", chunks: ['contact']},
    {name: "message.html", chunks: ['message']}
];
/**
 * 静态页面配置
 */
module.exports = {
    // 重组js入口文件
    entrys: () => {
        let params = {};
        scripts.forEach(name => {
            params[name] = resolve(__dirname, `./src/js/${name}.js`);
        })
        return params;
    },
    // 重组静态页面文件
    staticHtmls: () =>  htmls.map(item => {
        return new HtmlWebpackPlugin({
            inject: 'body',
            template: resolve(__dirname, `./src/${item.name}`),
            filename: item.name,
            chunks: ['common', ...item.chunks],
            minify: false
        });
    })
}

        此时运行webpack，common.js和common.css则已生成出来，并且引入到所有html内容中，如下图：

2.12 引用jquery

        由于静态页面中资源都打包到一个文件中，体积会越积越大，所以这里将jquery整体暴露给window，这就需要使用到另个loader，首先先安装jquery和expose-loader，命令如下:

// 安装jquery插件
npm i -S jquery
// 安装expose-loader
npm i -D expose-loader

        安装完成后，我们先在common.js文件中添加浏览器控制台输入，并且将jquery构建到dist/js目录中。

        webpack.config.js文件中添加jquery入口文件，如下图：

        static.config.js文件中将jquery添加到每个html谁的的chunks中，如下图

        common.js文件代码如下：

import '$css/common.less';

console.log('jquery', jQuery);

        此是运行npx webpack serve，在浏览器打开控制台查看，如下图：

        结果显示jquery不存在，这是因为我们安装的jquery还没有暴露给window对象，现在把expose-loader添加到webpack.config.js中再看看效果，代码如下：

const { resolve } = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { entrys, staticHtmls } = require('./static.config');

module.exports = {
    entry: {
        jquery: ['jquery'],
        ...entrys()
    },
    output: {
        filename: 'js/[name].bundle.js',      // 对入口名称进行命名,
        clean: true                     // 在生成文件之前清空 output 目录
    },
    module: {
        rules: [
            // style-loader 把 CSS 插入到 DOM 中。
            // MiniCssExtractPlugin.loader 提取CSS为独立文件
            // css-loader 会对 @import 和 url() 进行处理，就像 js 解析 import/require() 一样。
            {
                test: /\.css$/i,
                use: [MiniCssExtractPlugin.loader, 'css-loader']
            },
            // webpack 将 Less 编译为 CSS 的 loader。
            {
                test: /\.less$/i,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
            },
            // 匹配图片资源，指定构建后存储位置和命名
            {
                test: /\.(png|jpg|jpeg|svg|gif)$/i,
                type: 'asset/resource',
                generator: {
                    filename: 'images/[name].[ext]'
                }
            }, 
            // 匹配html页面，并提取内部资源文件
            {
                test: /\.html$/i,
                loader: "html-loader",
                exclude: /node_modules/,
                options: {
                    minimize: false,        // 不压缩html内容
                }
            },
            // 将jquery暴露给全局对象（self、window 和 global）
            {
                test: require.resolve('jquery'),
                loader: "expose-loader",
                options: {
                    exposes: ["$", "jQuery"]
                }
            }
        ]
    },
    plugins: [
        ...staticHtmls(),
        // 提取css文件
        new MiniCssExtractPlugin({
            filename: 'css/[name]_bundle.css',      //输出文件
        })
    ],
    resolve: {
        alias: {
            // 样式路径目录别名
            $css: resolve(__dirname, 'src/css')
        }
    },
    mode: 'production',
    devServer: {
        static: {
            // 指定服务运行目录
            directory: resolve(__dirname, 'dist')
        },
        compress: true,     //gzip压缩
        port: 3000,         //指定端口号
        open: true,         //服务启动后自动在浏览器打开
        hot: true           //开启热更
    }
}

        expose-loader添加完成后，再运行npx webpack serve，此时jquery在浏览器中则可以全局调用了，如下图：

三、package.json

        最后整理一下项目中所需要的loader、plugin，以及其对应的版本和功能描述。

名称版本描述
webpack^5.91.0webpack
webpack-cli^5.1.4webpack脚手架
webpack-dev-server^5.0.4构建本地开发服务
css-loader^6.10.0处理css文件（css-loader会像import/require()一样解释@import和url()，并解析它们。）
style-loader^3.3.4通过注入<style>标签向DOM添加CSS
less-loader^12.2.0处理 less 的 webpack loader。将 Less 编译为 CSS。
mini-css-extract-plugin^2.8.1将CSS提取到单独的文件中
html-loader^5.0.0HTML导出为字符串。当编译器需要时，提取HTML内容中资源文件。
html-webpack-plugin^5.6.0生成 HTML5 文件
expose-loader^5.0.0允许暴露一个模块（整体或者部分）给全局对象（self、window 和 global）

        本篇内容就先讲到这，如果还需其他功能做进一步完善，可以去webpack了解，地址：webpack 中文文档(@印记中文) https://docschina.org/

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/501452.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

CrossOver2024最新免费版虚拟机软件 Mac和Linux系统上运行Windows 应用/游戏 CrossOver是什么软件

CrossOver2024最新免费版虚拟机软件 Mac和Linux系统上运行Windows 应用/游戏 CrossOver是什么软件

CrossOver是一款由CodeWeavers公司开发的&#xff0c;运行在Mac和Linux操作系统下&#xff0c;能够模拟Windows系统应用运行环境的软件。它不需要用户单独安装Windows操作系统&#xff0c;就能让Windows平台上的应用程序在Mac和Linux上顺畅运行。CrossOver在技术上使用了Wine&a…
阅读更多...
module ‘numpy‘ has no attribute ‘int‘

module ‘numpy‘ has no attribute ‘int‘

在 NumPy 中&#xff0c;如果遇到了错误提示 "module numpy has no attribute int"&#xff0c;这通常意味着正在尝试以错误的方式使用 NumPy 的整数类型。从 NumPy 1.20 版本开始&#xff0c;numpy.int 已经不再是一个有效的属性&#xff0c;因为 NumPy 不再推荐使用…
阅读更多...
五、基于KubeAdm搭建多节点K8S集群

五、基于KubeAdm搭建多节点K8S集群

如需查阅上一步骤，请点击下面链接：四、戴尔R630本地服务器Linux Centos7.9系统安装docker-ce-20.10.10-3.el7版本-CSDN博客文章浏览阅读727次，点赞12次，收藏13次。1、准备工作3、Linux Centos7.9系统的iDRAC远程管理、网络设置、SecureCRT远程登录终端、企业级静态ip地址配…
阅读更多...
20240329-科技咨询：比亚迪第五代DMi；央视AI《周处除三害》；带屏幕苹果耳机爆火

20240329-科技咨询：比亚迪第五代DMi；央视AI《周处除三害》；带屏幕苹果耳机爆火

一、比亚迪5月份即将推出第五代DMi技术 近日&#xff0c;比亚迪举行了2023年财报投资人沟通会。会议纪要显示&#xff0c;比亚迪董事长王传福在会上透露&#xff0c;今年5月将推出第五代DMI混动技术&#xff0c;预计馈电油耗将降至2.9升/百公里&#xff0c;而满油满电续航将达…
阅读更多...
第十四届蓝桥杯省赛C++ C组所有题目以及题解（C++）【编程题均通过100%测试数据】

第十四届蓝桥杯省赛C++ C组所有题目以及题解（C++）【编程题均通过100%测试数据】

第一题《求和》【简单模拟】 【问题描述】 求1&#xff08;含&#xff09;至20230408&#xff08;含&#xff09;中每个数的和。 【答案提交】 这是一道结果填空的题&#xff0c;你只需要算出结果后提交即可。本题的结果为一个整数&#xff0c;在提交答案时只填写这个整数&…
阅读更多...
“地干天知”干旱监测与预警技术研讨及系统产品发布

“地干天知”干旱监测与预警技术研讨及系统产品发布

3月28日&#xff0c;由国家气候中心气象灾害风险管理室、北京慧天卓特科技有限公司主办的“地干天知”干旱监测与预警技术研讨及系统产品发布活动在北京市海淀区中关村壹号隆重举办。活动旨在面向公众讲解干旱监测与预警技术原理&#xff0c;展示监测范围和预警能力。来自国家气…
阅读更多...
protobuf学习笔记（二）：结合grpc生成客户端和服务端

protobuf学习笔记（二）：结合grpc生成客户端和服务端

上一篇文章大概讲了如何将自定义的protobuf类型的message转换成相应的go文件&#xff0c;这次就结合grpc写一个比较认真的客户端和服务器端例子 一、项目结构 client存放rpc服务的客户端文件 server存放rpc服务的服务端文件 protobuf存放自定义的proto文件 grpc存放生成的g…
阅读更多...
【LeetCode: 面试题 16.05. 阶乘尾数 + 阶乘】

【LeetCode: 面试题 16.05. 阶乘尾数 + 阶乘】

&#x1f680; 算法题 &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕风和炜&#xff0c;…
阅读更多...
ThreadPool-线程池使用及原理

ThreadPool-线程池使用及原理

1. 线程池使用方式 示例代码&#xff1a; // 一池N线程 Executors.newFixedThreadPool(int) // 一个任务一个任务执行&#xff0c;一池一线程 Executors.newSingleThreadExecutorO // 线程池根据需求创建线程&#xff0c;可扩容&#xff0c;遇强则强 Executors.newCachedThre…
阅读更多...
谷歌seo站内优化需要做什么？

谷歌seo站内优化需要做什么？

说一个比较重要的点&#xff0c;那就是页面的标签优化&#xff0c;网站的title标签跟Descriptions标签的重要性不言而喻&#xff0c;但其他页面的标签也是同样重要&#xff0c;毕竟客户看见在谷歌搜索引擎里看见的就是你的页面标题以及描述 所以页面的标题以及描述是很重要的&a…
阅读更多...
电机试验平台的结构

电机试验平台的结构

电机试验平台的结构通常包括以下部分&#xff1a; 1.电机&#xff1a;试验平台主要是为了对电机进行各种试验&#xff0c;因此电机是平台的核心组成部分。电机通常由定子和转子组成&#xff0c;根据试验需要可以是直流电机、交流电机或者是特殊类型的电机。 2.控制系统&#…
阅读更多...
一次性了解C语言中文件和文件操作

一次性了解C语言中文件和文件操作

P. S.&#xff1a;以下代码均在VS2019环境下测试&#xff0c;不代表所有编译器均可通过。 P. S.&#xff1a;测试代码均未展示头文件stdio.h的声明&#xff0c;使用时请自行添加。 文件及文件操作 前言1. 文件分类1.1 文本文件1.2 二进制文件1.3 文本文件和二进制文件的区别 2…
阅读更多...
Linux：程序地址空间详解

Linux：程序地址空间详解

目录 一、堆、栈、环境参数所在位置 二、进程地址空间底层实现原理 ​编辑 三、什么是地址空间 四、为什么要有进程地址空间 五、细谈写实拷贝的实现及意义 在C/C学习中&#xff0c;都学习过如上图所示的一套存储结构&#xff0c;我们大致知道一般存储空间分为堆区&#…
阅读更多...
数据结构:归并排序

数据结构:归并排序

归并排序 时间复杂度O(N*logN) 如果两个序列有序,通过归并,可以让两个序列合并后也有序,变成一个有序的新数组 对于一个数组,如果他的左右区间都有序,就可以进行归并了 归并的方法 将数组的左右两个有序区间比较,每次都取出一个最小的,然后放入临时数组(不能在原数组上修改…
阅读更多...
纯小白蓝桥杯备赛笔记--DAY8（必备排序算法）

纯小白蓝桥杯备赛笔记--DAY8（必备排序算法）

冒泡排序 算法思想 每次将最大的一下一下地运到最右边&#xff0c;然后确定这个最大的&#xff0c;接着可以发现该问题变成一个更小的子问题。具体操作&#xff1a;从左向右扫描&#xff0c;如a[i]>a[i1]&#xff0c;执行swap操作。代码格式 #include<bits/stdc.h> …
阅读更多...
Mamba: Linear-Time Sequence Modeling with Selective State Spaces(论文笔记)

Mamba: Linear-Time Sequence Modeling with Selective State Spaces(论文笔记)

What can I say? 2024年我还能说什么&#xff1f; Mamba out! 曼巴出来了&#xff01; 原文链接&#xff1a; [2312.00752] Mamba: Linear-Time Sequence Modeling with Selective State Spaces (arxiv.org) 原文笔记&#xff1a; What&#xff1a; Mamba: Linear-Time …
阅读更多...
双非本，拿到美团测开实习了——经验分享

双非本，拿到美团测开实习了——经验分享

前言 最近是春招、暑期实习的高峰期&#xff0c;自己也凭借着持续的准备和一部分运气&#xff0c;较早拿到了美团的测开暑期实习。 以前接到美团的短信&#xff0c;都是外卖送达的通知&#xff0c;没想到自己有一天&#xff0c;也能收到offer录用的通知。虽然是测试开发的岗位…
阅读更多...
考研数学｜《1800》+《660》精华搭配混合用（经验分享）

考研数学｜《1800》+《660》精华搭配混合用（经验分享）

肯定不行&#xff0c;考研数学哪有这么容易的&#xff01; 先说说这两本习题册&#xff0c;李永乐老师推出的新版660题&#xff0c;相较于18年前的版本&#xff0c;难度略有降低&#xff0c;更加适合初学者。因此&#xff0c;对于处于基础阶段的学习者来说&#xff0c;新版660…
阅读更多...
2、Cocos Creator 下载安装

2、Cocos Creator 下载安装

Cocos Creator 从 v2.3.2 开始接入了全新的 Dashboard 系统&#xff0c;能够同时对多版本引擎和项目进行统一升级和管理&#xff01;Cocos Dashboard 将做为 Creator 各引擎统一的下载器和启动入口&#xff0c;方便升级和管理多个版本的 Creator。还集成了统一的项目管理及创建…
阅读更多...
算法之并查集

算法之并查集

并查集&#xff08;Union-find Data Structure&#xff09;是一种树型的数据结构。它的特点是由子结点找到父亲结点&#xff0c;用于处理一些不交集&#xff08;Disjoint Sets&#xff09;的合并及查询问题。 Find&#xff1a;确定元素属于哪一个子集。它可以被用来确定两个元…
阅读更多...
最新文章

Copyright @ 2022~2023