В этой статье:
Webpack-merge нужен чтобы отделять билд и дев разработку. Это нужно делать обязательно. Иначе рано или поздно случиться то, что иллюстрировано на гифке выше. Самый банальный пример - сжатие картинок, если мы будем сжимать их при dev
разработки вебпак будет значительно дольше собирать наш проект это нужно делать только при build
разработке. Поэтому очень важно разделять эти 2 этапа.
В консоли:
npm i webpack-merge --save-dev
Теперь создадим 3 файла конфигураций:
В исходном файле package.json обновим ярлык dev и build:
"scripts": {
"dev": "webpack-dev-server --open --config build/webpack.dev.conf.js",
"build": "webpack --config build/webpack.build.conf.js"
},
webpack.base.conf.js
будет выглядеть так:
const path = require('path')
module.exports = {
entry: {
app: './src/index.js'
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, './dist'),
publicPath: '/dist'
},
module: {
rules: [{
test: /\.js$/,
loader: 'babel-loader',
exclude: '/node_modules/'
}, {
test: /\.scss$/,
use: [
'style-loader',
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: { sourceMap: true }
}, {
loader: 'postcss-loader',
options: { sourceMap: true, config: { path: 'src/js/postcss.config.js' } }
}, {
loader: 'sass-loader',
options: { sourceMap: true }
}
]
}, {
test: /\.css$/,
use: [
'style-loader',
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: { sourceMap: true }
}, {
loader: 'postcss-loader',
options: { sourceMap: true, config: { path: 'src/js/postcss.config.js' } }
}
]
},
}]
}
}
В build
мы укажем mode: 'production’,
который мы удалили из ярлыков в package.json
. Также объявим webpack-merge
в константу merge.
Таким образом webpack.build.conf.js
выглядит так:
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
const buildWebpackConfig = merge(baseWebpackConfig, {
// BUILD settings gonna be here
mode: 'production',
plugins: []
});
// export buildWebpackConfig
module.exports = new Promise((resolve, reject) => {
resolve(buildWebpackConfig)
})
В dev
мы укажем mode: ‘development’,
который мы точно также удалили из ярлыков в package.json
.
Также объявим webpack-merge
в константу merge
. Добавим порт 8081 и настроим overlay.
Таким образом webpack.build.conf.js
выглядит так:
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
const devWebpackConfig = merge(baseWebpackConfig, {
// DEV settings gonna be here
mode: 'development',
devServer: {
// historyApiFallback: true,
// noInfo: true,
overlay: {
warnings: true,
errors: true
},
port: 8081,
}
// export devWebpackConfig
module.exports = new Promise((resolve, reject) => {
resolve(devWebpackConfig)
})
Webpack devtool пригодиться чтобы чтобы подключить карту для CSS файлов. Посколько мы используем SASS нельзя просто так написать:
devtool: 'cheap-module-eval-source-map',
Потому что в таком случае у нас не будет работать вложенные sass модули в в файл main.scss.
Для того чтобы import ‘./example.scss’
Отображался корректно объявим вебпак в константу. Обратимся к вебпаку чтобы вытащить палагин SourceMapDevToolPlugin
. Выглядеть это будет так:
// Source map
devtool: 'cheap-module-eval-source-map',
plugins: [
new webpack.SourceMapDevToolPlugin({
filename: "[file].map"
}),
]
Здесь не обязательно создавать саму карту или же делать ярлык на который ссылается file. Теперь, если запустить дев разработку можно увидеть что на каждую строчку css кода выводится корректный scss файл!
Чтобы обработать картинки в Webpackе. нам нужно поставить обработчик для наших img файлов. Для этого установим пакет
file-loader`.
В консоли:
npm install --save-dev file-loader
Далее в базовом файле конфигураций:
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]',
},
Теперь мы можем вставлять файлы без ошибок, но что делать с копированием этих изображений?
Давайте установим и настроим сopy-webpack-plugin
в сборку webpack. С помощь этого плагина мы будем копировать наши изображения и статичные файлы из dev в build. Чтобы в последующем мы могли к ним обращаться.
В консоли:
npm install copy-webpack-plugin --save-dev
Объявим:
const CopyWebpackPlugin = require('copy-webpack-plugin');
Обратимся к плагину
new CopyWebpackPlugin([
{ from: PATHS.src + '/img', to: `img` },
{ from: PATHS.src + '/static' },
]),
Вот и все, теперь наши файлы копируются и мы можем обращаться к ним через dist
Этот плагин нам понадобиться чтобы избавиться от index.html
в корне проекта и перенести его в папку src и в дальнейшем скопировать его в dist.
Чтобы установить плагин html-webpack-plugin
в консоли пропишем:
npm install html-webpack-plugin --save-dev
Объявим:
const HtmlWebpackPlugin = require('html-webpack-plugin');
В основном файле конфига напишем, что и куда должен копировать webpack 4:
new HtmlWebpackPlugin({
hash: false,
template: './src/index.html',
filename: 'index.html',
}),
Теперь мы можем писать код в главном хтмл - ’./src/index.html'
и он будет автоматический копироваться в папку dist и также будет работать live-reload для html.
Исходный код: https://github.com/vedees/webpack-template
Если вам нравятся материалы на сайте, вы можете помочь. Средства пойдут на оплату сервера, на котором функционирует сайт, а также на продвижение ресурса и корм коту!