artTemplate 的 webpack 环境中,页面怎么引用Bootstrap、jquery、css、js 插件？

发布于 2022-09-06 19:31:10 字数 3332 浏览 70 评论 0

关键问题：artTemplate 的 webpack 环境中,页面怎么引用Bootstrap、jquery、css、js 插件
我看了artTemplate官方没有提供webpack 参考项目，文档有点少，没办法做到完全解决。
我项目代码如下：
图片描述

webpack 配置

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

module.exports = {
    //入口文件的配置项
    entry: {
        'index': resolve(__dirname, './src/views/index/index.js'),
        'about': resolve(__dirname, './src/views/about/index.js'),
        'contact': resolve(__dirname, './src/views/contact/index.js')
    },

    //出口文件的配置项
    output: {
        filename: '[name].js',
    },
    //模块：例如解读CSS,图片如何转换，压缩
    module: {
        rules: [
            {
                test: /\.(jpg|png)$/,
                loader: "file-loader"
            }, {
                test: /\.art$/,
                loader: "art-template-loader",
                options: {
                    // art-template options (if necessary)
                    // @see https://github.com/aui/art-template
                }
            },
            {
                test: /\.(jsx|js)$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            "env", "react"
                        ]
                    }
                },
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
                loader: "file"
            },
            {
                test: /\.(woff|woff2)$/,
                loader: "url?prefix=font/&limit=5000"
            },
            {
                test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
                loader: "url?limit=10000&mimetype=application/octet-stream"
            },
            {
                test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
                loader: "url?limit=10000&mimetype=image/svg+xml"
            },
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            },
            {
                test: /\.scss$/,
                use: ['style-loader', 'css-loader', 'scss-loader']
            }
        ]
    },
    //插件，用于生产模版和各项功能
    plugins: [
        new HtmlWebpackPlugin({
            template: resolve(__dirname, './src/views/index/index.art'),
            filename: './index.html',
        }),
        new HtmlWebpackPlugin({
            template: resolve(__dirname, './src/views/about/index.art'),
            filename: './about.html',
        }),
        new HtmlWebpackPlugin({
            template: resolve(__dirname, './src/views/contact/index.art'),
            filename: './contact.html',
        })
    ],
    //配置webpack开发服务功能
    devServer: {}
}

首页代码:
路径：src/views/index/index.js

const render = require('./index.art');
require('bootstrap')
module.exports = render;

路径：src/view/index/index.art
这个采用类似ejs模板引擎的模板，这不是关键问题。

在 index.js 里面写了require('bootstrap')，但是打包出来没看到style 标签，这个问题让我感到头疼，所以在这里拜托各位大神帮忙，谢谢了

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

如此安好 2022-09-13 19:31:10

CSS 可以直接引入

`requier('bootstrap/dist/css/bootstrap.css')`

jQuery 可以通过 webpack.ProvidePlugin 插件

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

https://webpack.js.org/plugins/provide-plugin/#usage-jquery

或者可以在 layout.art 中使用 CDN 资源

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>{{block 'title'}}My Site{{/block}}</title>
    <link href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    {{block 'head'}}
    <link rel="stylesheet" href="main.css">
    {{/block}}
</head>
<body>
    {{block 'content'}}{{/block}}
</body>
</html>

常用的开源免费 CDN bootcdn

http://www.bootcdn.cn/

回复收藏 0

~没有更多了~