Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
wscart opened this issue Mar 2, 2018 · 0 comments

Comments

@wscart
Copy link

wscart commented Mar 2, 2018

关键问题: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

@wscart wscart changed the title artTemplate 的 webpack 环境中,页面怎么引用Bootstrap、jquery、css、js 插件? webpack 环境中,页面怎么引用Bootstrap、jquery、css、js 插件? Mar 2, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant