Я пытаюсь использовать webpack-dev-server с parallel-webpack , но это немного сложно.Я хотел бы собрать несколько небольших проектов в разные папки, но первая проблема, которая у меня возникла, заключается в том, что файл CSS не внедряется в файл шаблона HTML.Вторая проблема заключается в том, что я не уверен, как использовать папку build
в webpack-dev-server.Конфигурация devServer
выглядит следующим образом:
devServer: {
contentBase: path.resolve(process.cwd(), 'build'),
compress: false,
port: 3000
},
Конфигурация веб-пакета для параллельного веб-пакета:
const brands = [{ title: 'Brand1', path: 'brand1' }, { title: 'Brand2', path: 'brand2' }];
const mainWebpackConfig = process.env.NODE_ENV === 'development' ? 'dev' : 'prod';
module.exports = brands.map((brand) =>
merge({
name: brand.path,
entry: { brand: `./app/${brand.path}/app.js`, vendor: ['@babel/polyfill', 'react', 'react-dom', 'react-redux'] },
output: {
path: path.resolve(process.cwd(), `./build/${brand.path}`),
filename: 'main.[hash:8].js',
sourceMapFilename: 'main.[hash:8].map',
chunkFilename: '[id].[hash:8].js',
},
plugins: [
new HTMLWebpackPlugin({
inject: true,
title: brand.title,
template: path.join(__dirname, '../app/index.html'),
filename: 'index.html',
chunks: [
'vendor',
`${brand.path}`
],
}),
]
}, require(`./webpack.${mainWebpackConfig}.babel`))
);
Базовая конфигурация веб-пакета:
const path = require('path');
const slash = require('slash');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = options => ({
mode: options.mode,
optimization: options.optimization,
module: {
rules: options.rules.concat([
{
test: /\.(js|jsx)$/,
exclude: /node_modules\/(?!reform-core)/,
use: {
loader: 'babel-loader'
},
},
// Eslint
// {
// test: /\.js$/,
// exclude: /node_modules/,
// use: ['babel-loader', 'eslint-loader'],
// },
{
test: /\.(scss|sass|css)$/,
exclude: /node_modules\/(?!reform-core)/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'sass-loader',],
})
},
{
// Preprocess 3rd party .css files located in node_modules
test: /\.css$/,
// include: /node_modules/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader',
}),
},
{
test: /\.(ico|gz)$/,
exclude: /node_modules/,
use: [
{
loader: 'file-loader',
options: {
// slash - this package replace backslashes with slash ('\' -> '/')
name: (fullPath) => { console.log('fullPath', fullPath); return `./${slash(fullPath).replace(/.*?app\//, '')}` },
},
},
],
},
{
test: /\.(jpe?g|png|gif|svg)$/,
loaders: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: '/assets/images/',
publicPath: '/',
},
},
],
}, {
test: /\.(ttf|otf|eot|svg|woff2?)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
exclude: /node_modules\/(?!reform-core)/,
use: {
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: '/assets/fonts/',
publicPath: '/',
},
},
},
]),
},
plugins: options.plugins.concat([
new ExtractTextPlugin({
filename: 'assets/css/[hash].css',
ignoreOrder: true,
allChunks: true,
}),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(process.env.NODE_ENV),
EMAILER_ENV: process.env.EMAILER_ENV ? JSON.stringify(process.env.EMAILER_ENV) : JSON.stringify('https://forms.morethan.com'),
},
ENVIRONMENT: (process.env.NODE_ENV || 'production').match(/(prod)/ig) ? JSON.stringify('production') : JSON.stringify('staging'),
}),
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
]),
devServer: Object.assign({}, options.devServer),
resolve: {
modules: ['node_modules', 'app'],
extensions: ['.js', '.jsx', '.react.js'],
mainFields: ['browser', 'main'],
alias: {
react: path.resolve('./node_modules/react'),
Utils: path.join(__dirname, '../app/utils'),
},
},
devtool: options.devtool,
target: 'web', // Make web variables accessible to webpack, e.g. window
performance: options.performance || {},
});
Кто-нибудь знает, где я могу найти примеры использования параллельного веб-пакета?
Спасибо!