aui / art-template-loader

art-template loader for webpack
MIT License
107 stars 33 forks source link

webpack 环境中,页面怎么引用Bootstrap、jquery、css、js 插件? #29

Open wscart opened 6 years ago

wscart commented 6 years ago

关键问题: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 标签,这个问题让我感到头疼,你有空看到这个问题,帮忙解决。谢谢

https://segmentfault.com/q/1010000013495506