Webpack: избегайте копирования глобальных статических файлов в папку dist
Я борюсь с веб-пакетом, чтобы избежать копирования файлов из статических папок в папку dist в производственном режиме.
В процессе разработки статические поля должны быть загружены в папку dist, что сделано с загрузчиками файлов. Но как это возможно, что файл css загружает tree.jpg из статической папки, и изображение не будет скопировано в папку dist?
webpack.config.js
const WebpackBaseConfig = {
mode: 'production',
target: 'web',
entry: {
main: path.resolve(Utils.paths.src, 'index.js')
},
output: {
path: Utils.paths.build,
filename: '[name].[hash:8].js',
chunkFilename: '[name].[hash].js',
publicPath: '/',
},
performance: {
maxEntrypointSize: 1000 * 1024,
hints: process.env.NODE_ENV === 'production' ? false : 'warning'
},
resolve: {
extensions: ['.js', '.json'],
alias: {
'~': Utils.paths.src,
'@': Utils.paths.src
},
modules: [Utils.paths.modules]
},
resolveLoader: {
modules: [Utils.paths.modules]
},
module: {
noParse: /es6-promise\.js$/, // Avoid webpack shimming process
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
include: [Utils.paths.src]
},
{
test: /\.css$/,
use: [Utils.styleLoader, Utils.cssLoader, Utils.postcssLoader]
},
{
test: /\.scss$/,
use: [Utils.styleLoader, Utils.cssLoader, Utils.postcssLoader, Utils.scssLoader]
},
{
test: /\.(png|jpe?g|gif)$/,
use: [
{
loader: 'file-loader',
options: {
limit: 1000,
name: '[name].[ext]',
publicPath: '/'
}
}
]
},
]
}
}
Структура папки:
webpack-demo
|- package.json
|- webpack.config.js
|- /static
|- tree.jpg
|- /dist
|- bundle.js
|- index.html
|- /src
|- style.css
|- index.js
|- /node_modules