我目前正在尝试设置一个使用webpack 4的基本Vue项目。 Vue框架基于Microsoft SPA模板dotnet core构建。似乎一切都正常运行,但是外部CSS文件未能正确加载进入项目中。这个问题困扰了我很长时间,并且让我一直在思考这些CSS文件为什么没有加载。
我所做的基本上就是使用命令'dotnet new vue'(需要安装Microsoft SPA模板),然后在创建项目后开始更新软件包。目前,我有以下package.json文件:
{
"name": "Dashboard",
"private": true,
"version": "0.0.1",
"scripts": {
"build:development": "webpack"
},
"devDependencies": {
"@types/webpack-env": "^1.13.6",
"ajv": "^6.5.2",
"aspnet-webpack": "^3.0.0",
"awesome-typescript-loader": "^5.2.0",
"bootstrap": "^4.1.1",
"coa": "^2.0.1",
"css-loader": "^1.0.0",
"event-source-polyfill": "^0.0.12",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "^1.1.11",
"isomorphic-fetch": "^2.2.1",
"jquery": "^3.3.1",
"mini-css-extract-plugin": "^0.4.1",
"popper.js": "^1.14.3",
"style-loader": "^0.21.0",
"typescript": "^2.9.2",
"url-loader": "^1.0.1",
"vue": "^2.5.16",
"vue-loader": "^15.2.4",
"vue-property-decorator": "^7.0.0",
"vue-router": "^3.0.1",
"vue-style-loader": "^4.1.0",
"vue-template-compiler": "^2.5.16",
"webpack": "^4.16.0",
"webpack-cli": "^3.0.8",
"webpack-dev-middleware": "^3.1.3",
"webpack-hot-middleware": "^2.22.2",
"webpack-merge": "^4.1.3",
"webpack-node-externals": "^1.7.2"
},
"dependencies": {}
}
这是我的webpack配置文件:
const path = require('path');
const webpack = require('webpack');
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;
const bundleOutputDir = './wwwroot/dist';
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
mode: 'development',
stats: {
modules: false
},
context: __dirname,
resolve: {
extensions: [ '.js', '.ts' ]
},
entry: {
'main': './ClientApp/boot.ts'
},
module: {
rules: [
{
test: /\.vue\.html$/,
include: /ClientApp/,
loader: 'vue-loader',
options: { loaders: { js: 'awesome-typescript-loader?silent=true' } }
},
{
test: /\.ts$/,
include: /ClientApp/,
use: 'awesome-typescript-loader?silent=true'
},
{
test: /\.css$/,
use: ['vue-style-loader', 'css-loader']
},
{
test: /\.(png|jpg|jpeg|gif|svg)$/,
use: 'url-loader?limit=25000'
}
]
},
output: {
path: path.join(__dirname, bundleOutputDir),
filename: '[name].js',
publicPath: 'dist/'
},
plugins: [
new VueLoaderPlugin(),
new CheckerPlugin(),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"development"'
}
}),
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./wwwroot/dist/vendor-manifest.json')
}),
new webpack.SourceMapDevToolPlugin({
filename: '[file].map',
moduleFilenameTemplate: path.relative(bundleOutputDir, '[resourcePath]')
})
]
};
我已经按以下方式将CSS文件包含在其中:
在app.ts中(我添加了它们只是为了测试):
import '../navmenu/navmenu.css';
require('../navmenu/navmenu.css');
在boot.ts中。
import './components/navmenu/navmenu.css';
require('./components/navmenu/navmenu.css');
或者在原始文件中(navmenu.vue.html)(当生成了默认的单页应用程序骨架时):
<style src="./navmenu.css" />
在所有这些位置上,CSS文件都没有被包含/在前端中使用。我也尝试了不同的方法在webpack.config文件中,例如使用extract-text-webpack-plugin。
基本思路是Microsoft的SPA模板使用Webpack 2(以及其他不同软件包的旧版本),而我正在尝试将它们更新到最新版本。
希望有人能帮助我解决问题 :-)