Open wscart opened 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
关键问题:artTemplate 的 webpack 环境中,页面怎么引用Bootstrap、jquery、css、js 插件 我看了artTemplate官方没有提供webpack 参考项目,文档有点少,没办法做到完全解决。 我项目代码如下: webpack 配置
首页代码: 路径:src/views/index/index.js
路径:src/view/index/index.art 这个采用类似ejs模板引擎的模板,这不是关键问题。
在 index.js 里面写了require('bootstrap'),但是打包出来没看到style 标签,这个问题让我感到头疼,你有空看到这个问题,帮忙解决。谢谢
https://segmentfault.com/q/1010000013495506