У меня есть три файла конфигурации webpack.Один для производства, один для разработки и один для общих конфигураций.Когда я запускаю конфигурацию dev, загружается js-файл, я вижу это в инструментах dev браузера, но он не выполняется.Если я запускаю производственный конфигурационный файл, все работает нормально.
Я использую: узел v10.3.0, пряжа v1.7.0, веб-пакет 4.19.1, веб-пакет cli 3.1.0
webpack.common.js вот мои записи мой вывод и мои загрузчики:
const path = require("path");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
entry: {
app: ['./src/javascript/entry.js', './src/scss/main.scss', './src/images/entryImages.js'],
},
output: {
filename: "javascript/[name].js",
path: path.resolve(__dirname, "./dist"),
},
module: {
rules: [
{
test: /\.(scss|css)$/,
use: [
{
loader: 'style-loader'
},
{
loader: MiniCssExtractPlugin.loader
},
{
loader: 'css-loader',
options: {
sourceMap: true
}
},
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
sourceMap: true,
plugins: [
require('autoprefixer')({'browsers': ['> 1%', 'last 2 versions']}),
]
}
},
{
loader: 'resolve-url-loader',
},
{
loader: 'sass-loader',
options: {
sourceMap: true
}
}
]
},
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['babel-preset-env'],
}
}
},
{
test: /\.(png|svg|jpe?g|gif)$/,
loader: 'file-loader',
options: {
name: 'images/[name].[ext]',
publicPath: '/public/resources/themes/zimet/dist/',
}
},
]
},
}
webpack.dev.js:
const LiveReloadPlugin = require('webpack-livereload-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const WebpackShellPlugin = require('webpack-shell-plugin');
module.exports = merge(common, {
devtool: 'source-map',
mode: 'development',
watch: true,
optimization: {
splitChunks: {
chunks: "all"
}
},
plugins: [
new LiveReloadPlugin({
protocol: 'http',
hostname: '127.0.0.1',
appendScriptTag: true
}),
new CleanWebpackPlugin(['dist']),
new MiniCssExtractPlugin({
filename: 'css/[name].css',
chunkFilename: "[id].css"
}),
new WebpackShellPlugin({onBuildExit:['cd ../.. && composer vendor-expose']})
]
})
webpack.production.js:
const glob = require('glob-all');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const {ImageminWebpackPlugin} = require("imagemin-webpack");
const imageminOptipng = require("imagemin-optipng");
const imageminGifsicle = require("imagemin-gifsicle");
const imageminJpegtran = require("imagemin-jpegtran");
const imageminSvgo = require("imagemin-svgo");
const PurifyCSSPlugin = require("purifycss-webpack");
const WebappWebpackPlugin = require('webapp-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const common = require('./webpack.common.js');
const merge = require('webpack-merge')
const RemoveHeadTagPlugin = require('./removeHeadTagPlugin');
const WebpackShellPlugin = require('webpack-shell-plugin');
const templateBaseDirName = __dirname + '/templates/'
let Files = glob.sync([templateBaseDirName + "**/*.ss"]);
module.exports = merge(common, {
mode: 'production',
optimization: {
splitChunks: {
chunks: "all"
}
},
plugins: [
new CleanWebpackPlugin(['dist']),
new MiniCssExtractPlugin({
filename: 'css/[name].css',
chunkFilename: "[id].css"
}),
new PurifyCSSPlugin({
paths: (Files),
purifyOptions: {
minify: true,
info: true,
rejected: true,
whitelist: ['*js*']
}
}),
new ImageminWebpackPlugin({
imageminOptions: {
plugins: [
imageminOptipng({
optimizationLevel: 5
}),
imageminGifsicle({
interlaced: true
}),
imageminJpegtran({
progressive: true
}),
imageminSvgo({
removeViewBox: true
})
]
}
}),
new HtmlWebpackPlugin({
excludeChunks: ['app'],
filename: 'icons.ss',
template: './src/icons/icons.html',
}),
new WebappWebpackPlugin({
logo: './src/icons/icon.svg',
prefix: 'icons/',
emitStats: false,
persistentCache: true,
inject: 'true',
background: '#fff',
title: 'Webpack App',
icons: {
android: true,
appleIcon: true,
appleStartup: true,
coast: false,
favicons: true,
firefox: true,
opengraph: false,
twitter: false,
yandex: false,
windows: false
}
}),
new RemoveHeadTagPlugin(),
new WebpackShellPlugin({onBuildExit: ['cd ../.. && composer vendor-expose']}),
],
})
Мой код JS, который я хочу запустить:
document.addEventListener("DOMContentLoaded", () => {
alert('hello world');
console.log('now');
});
Мой entry.js:
// get all files from same directory that end with .js
// this will save us from requiring every js file
function requireAll(r) { r.keys().forEach(r); }
requireAll(require.context('./', false, /\.(js)$/));
Есть идеи, что пошло не так?