鍍金池/ 問(wèn)答/網(wǎng)絡(luò)安全  HTML/ artTemplate 的 webpack 環(huán)境中,頁(yè)面怎么引用Bootstra

artTemplate 的 webpack 環(huán)境中,頁(yè)面怎么引用Bootstrap、jquery、css、js 插件?

關(guān)鍵問(wèn)題:artTemplate 的 webpack 環(huán)境中,頁(yè)面怎么引用Bootstrap、jquery、css、js 插件
我看了artTemplate官方?jīng)]有提供webpack 參考項(xiàng)目,文檔有點(diǎn)少,沒(méi)辦法做到完全解決。
我項(xiàng)目代碼如下:
圖片描述

webpack 配置

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

module.exports = {
    //入口文件的配置項(xiàng)
    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')
    },

    //出口文件的配置項(xiàng)
    output: {
        filename: '[name].js',
    },
    //模塊:例如解讀CSS,圖片如何轉(zhuǎn)換,壓縮
    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']
            }
        ]
    },
    //插件,用于生產(chǎn)模版和各項(xiàng)功能
    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開發(fā)服務(wù)功能
    devServer: {}
}

首頁(yè)代碼:
路徑:src/views/index/index.js

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

路徑:src/view/index/index.art
這個(gè)采用類似ejs模板引擎的模板,這不是關(guān)鍵問(wèn)題。

在 index.js 里面寫了require('bootstrap'),但是打包出來(lái)沒(méi)看到style 標(biāo)簽,這個(gè)問(wèn)題讓我感到頭疼,所以在這里拜托各位大神幫忙,謝謝了

回答
編輯回答
來(lái)守候

CSS 可以直接引入

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

jQuery 可以通過(guò) 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  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>

常用的開源免費(fèi) CDN bootcdn

http://www.bootcdn.cn/

2017年10月12日 00:26