webpack - Aurelia CLI 使用 Webpack 和“脚本加载器”的问题
问题描述
我使用 Webpack 创建了一个新的 CLI 项目来尝试使用 Webpack。
我已经“npm 安装”了 Webpack 的“ script-loader ”来加载一个仅包含console.log("Hello World")
. 这是因为我在另一个项目中的最终目标将涉及必须以这种方式加载 JS/JQuery 文件。
当我运行该站点时,日志脚本永远不会执行,也不会发生错误。根据我有限的理解,'script-loader' 应该将脚本插入到每个页面中,从而在每次加载页面时导致日志。
这是我的 webpack.config.js。请注意,它应该是 CLI 创建的默认值,但以下情况除外:{ test: /[\/\\]src[\/\\]helloworld\.js$/, loader: 'script-loader' },
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const project = require('./aurelia_project/aurelia.json');
const { AureliaPlugin, ModuleDependenciesPlugin } = require('aurelia-webpack-plugin');
const { ProvidePlugin } = require('webpack');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
// config helpers:
const ensureArray = (config) => config && (Array.isArray(config) ? config : [config]) || [];
const when = (condition, config, negativeConfig) =>
condition ? ensureArray(config) : ensureArray(negativeConfig);
// primary config:
const title = 'Aurelia Navigation Skeleton';
const outDir = path.resolve(__dirname, project.platform.output);
const srcDir = path.resolve(__dirname, 'src');
const nodeModulesDir = path.resolve(__dirname, 'node_modules');
const baseUrl = '/';
const cssRules = [
{ loader: 'css-loader' },
];
module.exports = ({production, server, extractCss, coverage, analyze} = {}) => ({
resolve: {
extensions: ['.ts', '.js'],
modules: [srcDir, 'node_modules'],
},
entry: {
app: ['aurelia-bootstrapper'],
vendor: ['bluebird'],
},
mode: production ? 'production' : 'development',
output: {
path: outDir,
publicPath: baseUrl,
filename: production ? '[name].[chunkhash].bundle.js' : '[name].[hash].bundle.js',
sourceMapFilename: production ? '[name].[chunkhash].bundle.map' : '[name].[hash].bundle.map',
chunkFilename: production ? '[name].[chunkhash].chunk.js' : '[name].[hash].chunk.js'
},
performance: { hints: false },
devServer: {
contentBase: outDir,
// serve index.html for all 404 (required for push-state)
historyApiFallback: true
},
devtool: production ? 'nosources-source-map' : 'cheap-module-eval-source-map',
module: {
rules: [
// CSS required in JS/TS files should use the style-loader that auto-injects it into the website
// only when the issuer is a .js/.ts file, so the loaders are not applied inside html templates
{
test: /\.css$/i,
issuer: [{ not: [{ test: /\.html$/i }] }],
use: extractCss ? ExtractTextPlugin.extract({
fallback: 'style-loader',
use: cssRules
}) : ['style-loader', ...cssRules],
},
{
test: /\.css$/i,
issuer: [{ test: /\.html$/i }],
// CSS required in templates cannot be extracted safely
// because Aurelia would try to require it again in runtime
use: cssRules
},
{ test: /\.html$/i, loader: 'html-loader' },
{ test: /\.tsx?$/, loader: "ts-loader" },
{ test: /\.json$/i, loader: 'json-loader' },
{ test: /[\/\\]src[\/\\]helloworld\.js$/, loader: 'script-loader' },
// use Bluebird as the global Promise implementation:
{ test: /[\/\\]node_modules[\/\\]bluebird[\/\\].+\.js$/, loader: 'expose-loader?Promise' },
// embed small images and fonts as Data Urls and larger ones as files:
{ test: /\.(png|gif|jpg|cur)$/i, loader: 'url-loader', options: { limit: 8192 } },
{ test: /\.woff2(\?v=[0-9]\.[0-9]\.[0-9])?$/i, loader: 'url-loader', options: { limit: 10000, mimetype: 'application/font-woff2' } },
{ test: /\.woff(\?v=[0-9]\.[0-9]\.[0-9])?$/i, loader: 'url-loader', options: { limit: 10000, mimetype: 'application/font-woff' } },
// load these fonts normally, as files:
{ test: /\.(ttf|eot|svg|otf)(\?v=[0-9]\.[0-9]\.[0-9])?$/i, loader: 'file-loader' },
...when(coverage, {
test: /\.[jt]s$/i, loader: 'istanbul-instrumenter-loader',
include: srcDir, exclude: [/\.{spec,test}\.[jt]s$/i],
enforce: 'post', options: { esModules: true },
})
]
},
plugins: [
new AureliaPlugin(),
new ProvidePlugin({
'Promise': 'bluebird'
}),
new ModuleDependenciesPlugin({
'aurelia-testing': [ './compile-spy', './view-spy' ]
}),
new HtmlWebpackPlugin({
template: 'index.ejs',
metadata: {
// available in index.ejs //
title, server, baseUrl
}
}),
...when(extractCss, new ExtractTextPlugin({
filename: production ? '[contenthash].css' : '[id].css',
allChunks: true
})),
...when(production, new CopyWebpackPlugin([
{ from: 'static/favicon.ico', to: 'favicon.ico' }])),
...when(analyze, new BundleAnalyzerPlugin())
]
});
我的用法或我对如何实现目标的理解是否错误?
谢谢!
解决方案
@rabah-g 是正确的。
我忽略了导入语句。webpack.config.js 是正确的。
我正在使用 TypeScript 和一个不是模块的 JS 文件。为了让它工作,我只需要添加:
import 'helloworld.js';
我希望将其添加到视图的模型顶部。
推荐阅读
- python - 子类化一个python类来改变初始化器是最好的模式吗?
- javascript - 如何使用 sequelize 和节点插入由多个对象组成的数组?
- ios - Objective-C 数据类型问题
- postgresql - 完全重新安装后 psql 无法连接到服务器 [Ubuntu 21.10 / PostgreSQL 13]
- android - drawableLeft图标和文本之间的Android MaterialButton填充
- python - Pymongo update_many 没有为地理空间过滤器添加新字段
- javascript - 如何将 react-to-print 库转换为下一个 js
- django - 当用户上传更多图片时,如何在 django gridview 中保持图像的一致显示,而不是传递给 forloop 的条件
- r - 如何在 R 中使用 dplyr 过滤 2 个模式之间的所有行
- javascript - 从子组件访问父组件中的状态