我在Webpack中做了一个简单的任务来捆绑我所有的JS文件。控制台日志显示文件创建成功,但加载html页面时它不工作。
下面是代码:
const path = require('path');
const TerserPlugin = require("terser-webpack-plugin");
module.exports = {
entry:[
'/src/assets/js/libraries/aos.js',
'/src/assets/js/libraries/jquery.mask.js',
'/src/assets/js/libraries/slick.js',
'/src/assets/js/scripts/email.js',
'/src/assets/js/scripts/google-analytics.js',
'/src/assets/js/scripts/modernizr-3.11.2.min.js',
'/src/assets/js/scripts/scripts.js',
],
output: {
path: path.resolve(__dirname, './public/core/assets/js'),
filename: 'bundle.js'
},
optimization: {
minimize: true,
minimizer: [new TerserPlugin()],
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}],
},
watch: true,
mode: 'production'
}
这是控制台显示的内容(一切似乎都编译得很好):
$ npm run build
> project@1.0.0 build
> webpack --config webpack.config.js
asset bundle.js 161 KiB [emitted] [minimized] (name: main) 1 related asset
runtime modules 123 bytes 1 module
modules by path ./src/assets/js/ 126 KiB
modules by path ./src/assets/js/scripts/*.js 13.5 KiB
./src/assets/js/scripts/email.js 393 bytes [built] [code generated]
./src/assets/js/scripts/google-analytics.js 209 bytes [built] [code generated]
./src/assets/js/scripts/modernizr-3.11.2.min.js 11.7 KiB [built] [code generated]
./src/assets/js/scripts/scripts.js 1.22 KiB [built] [code generated]
modules by path ./src/assets/js/libraries/*.js 113 KiB
./src/assets/js/libraries/aos.js 21 KiB [built] [code generated]
./src/assets/js/libraries/jquery.mask.js 19.5 KiB [built] [code generated]
./src/assets/js/libraries/slick.js 72.2 KiB [built] [code generated]
./node_modules/jquery/dist/jquery.js 283 KiB [built] [code generated]
webpack 5.74.0 compiled successfully in 3199 ms
屁股你可以看到这是一个非常基本的任务。
我的html页面的所有路径都是正确的(我在没有Webpack的情况下进行了测试),但是当我捆绑Webpack时就不工作了。
2条答案
按热度按时间z31licg01#
请使用publicPath选项尝试
k10s72fa2#
HtmlWebpack插件
您正在正确地导入所有的.js文件,webpack只是不知道这一点。当您与webpack捆绑时,您需要使用脚本标记将.js文件自动插入到html中。因此,当您运行output.html文件时,模块将自动加载,您不必在构建. See HtmlWebpackPlugin之前手动插入到.html文件中。
装载机
当你用webpack导入html和图像以及其他文件时,加载器就派上用场了。
1.文件加载器(用于图像和其他类似文件)