我正在阅读 webpack 的“条目”页面,但没有任何内容告诉我该文件的这一部分在做什么。可能这就是我需要知道的,但我不知道:D
entry: {
'../../Resources/Public/Frontend/js/main.dist': './src/js/main.js',
'/dist/assets/images/': glob.sync(path.resolve(__dirname, 'src/assets/images/**/*.*')),
'../../Resources/Public/Frontend/css/main.min': './src/sass/main.scss',
'/dist/handlebars': glob.sync(path.resolve(__dirname, 'src/templates/routes/**/index.handlebars'))
},
...
为什么这个物体的两边都有路径?
我试图弄清楚为什么这个 webpack.config.js 没有将 src/assets/images 上的图像复制到我的 /Resources/Public/Frontend/assets/images 文件夹中。我知道 CopyWebpackPlugin 就是这样做的。该脚本是否也在复制之前删除了所有内容,因此它不会复制已删除的文件?
我知道我可以添加 CopyWebpackPlugin (from to) 并将我的图像复制到我的 /Frontend 文件夹但是如果我从 /src 中删除一个图像并不会删除图像
这是整个文件。
let webpack = require('webpack');
let webPackSettings = require('./webpack.settings.js');
const path = require('path');
const glob = require('glob');
const fs = require('fs');
const LIVE = process.env.NODE_ENV === 'live';
let DEBUG = true;
if (LIVE) {
DEBUG = false;
}
const CleanWebpackPlugin = require('clean-webpack-plugin');
const SpriteLoaderPlugin = require('svg-sprite-loader/plugin');
const LiveReloadPlugin = require('webpack-livereload-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const WatchExternalFilesPlugin = require('webpack-watch-files-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const extractSass = new ExtractTextPlugin({
filename: '[name].css',
disable: false //Remove debug option in case of source map issues
});
const pluginArrayGeneric = [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
}),
new CleanWebpackPlugin([
'./dist'
], {
root: __dirname,
verbose: true, //WRITE CONSOLE LOGS
dry: false //TEST EMULATE DELETE - ONLY CONSOLE LOGS WHAT SHOULD BE DELETED
}),
extractSass,
new SpriteLoaderPlugin({ plainSprite: true })
];
let pluginArrayDebug = [
new WatchExternalFilesPlugin.default({
files: [
path.resolve(__dirname, 'src/templates/partials/**/*.handlebars'),
path.resolve(__dirname,'data/**/*.json')
]
}),
new LiveReloadPlugin(webPackSettings.config.reload)
];
pluginArrayDebug = pluginArrayDebug.concat(pluginArrayGeneric);
let pluginArrayLive = [
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false })
];
const deploySettingsFilepath = './deploy.settings.js';
if (fs.existsSync(deploySettingsFilepath)) {
pluginArrayLive.push(new CopyWebpackPlugin([{
from: deploySettingsFilepath,
to: './dist'
}]));
}
pluginArrayLive = pluginArrayLive.concat(pluginArrayGeneric);
module.exports = {
entry: {
'../../Resources/Public/Frontend/js/main.dist': './src/js/main.js',
'/dist/assets/images/': glob.sync(path.resolve(__dirname, 'src/assets/images/**/*.*')),
'../../Resources/Public/Frontend/css/main.min': './src/sass/main.scss',
'/dist/handlebars': glob.sync(path.resolve(__dirname, 'src/templates/routes/**/index.handlebars'))
},
output: {
path : path.resolve(__dirname),
filename: '[name].js'
},
watchOptions: {
poll: true
},
devtool: (DEBUG) ? 'source-map' : 'none',
module : {
rules: [{
test: /\.js$/,
loader: 'babel-loader',
exclude: '/node_modules/',
options: {
presets: [
'es2015',
'stage-2'
],
plugins: ['transform-object-assign']
}
},{
test: /\.scss$/,
include: path.resolve('./src/sass/critical.scss'),
use: [{
loader: 'style-loader'
}, {
loader: 'css-loader'
}, {
loader: 'sass-loader'
}]
}, {
test: /\.scss$/,
exclude: path.resolve('./src/sass/critical.scss'),
use: extractSass.extract({
use: [{
loader: 'css-loader',
options: {
sourceMap: DEBUG,
importLoaders: 2
}
}, {
loader: 'postcss-loader',
options: {
sourceMap: DEBUG
}
}, {
loader: 'resolve-url-loader'
}, {
loader: 'sass-loader',
options: {
sourceMap: true //must be enabled for resolve-ur-loader to work see: https://github.com/bholloway/resolve-url-loader#important
}
},{
loader: 'cleanup-loader',
options: {
test: /\.s?css$/i
}
}],
// use style-loader in development
fallback: {
loader: 'style-loader',
options: {
sourceMap: DEBUG
}
}
})
}, {
test: /\.svg$/i,
include: path.resolve('./src/assets/images/svg'),
use:[{
loader: 'svg-sprite-loader'
}, {
loader: 'svgo-loader',
options: {
plugins: [{
removeAttrs: { attrs: '(fill|stroke|fill-opacity)' }
}]
}
}]
}, {
test: /\.(eot|ttf|woff|woff2?)$/i,
loader: 'file-loader',
include: [
path.resolve('./src/assets/fonts/')
],
options: {
name: '[name].[ext]',
publicPath: '../assets/fonts/',
outputPath: 'dist/assets/fonts/',
}
}, {
test: /\.(jpe?g|png|gif|svg|ico)$/i,
exclude: path.resolve('./src/assets/images/svg'),
include: [
path.resolve('./node_modules'),
path.resolve('./src/assets/images/')
],
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
publicPath: '../assets/images/',
outputPath: 'dist/assets/images/'
}
}, {
loader: 'image-webpack-loader',
options: {
mozjpeg: {
progressive: true,
quality: 65
},
optipng: {
enabled: true
},
pngquant: {
quality: '65-90',
speed: 4
},
gifsicle: {
interlaced: true
}
}
}, {
loader: 'cleanup-loader',
options: {
test: /\.(jpe?g|png|gif|svg|eot|ttf|woff2?)$/i
}
}]
}, {
test: /\.handlebars$/,
use: [{
loader: 'webpack-handlebars-loader',
options: {
//Note: use partials without trailing slash
partials: path.resolve(__dirname, 'src/templates/partials/**/*.handlebars'),
relativePathTo: path.resolve(__dirname, 'src/templates/routes'),
outputpath: 'dist',
data: path.resolve(__dirname,'data/**/*.json'),
rootData: webPackSettings.config.defaultLanguage
}
}]
}, {
test: /\.mp4/i,
include: [
path.resolve('./src/assets/videos/')
],
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
publicPath: '../assets/videos/',
outputPath: 'dist/assets/videos/'
}
}]
}, {
test: /\.php$/i,
loader: 'file-loader',
include: [
path.resolve('./src/php'),
],
options: {
name: '[name].[ext]',
outputPath: 'dist/php/',
}
}]
},
plugins: DEBUG ? pluginArrayDebug : pluginArrayLive
};