Во-первых, ваше сообщение содержит много вопросов.Было бы лучше разделить их на разные.В любом случае, ваши вопросы:
- Разрешить файлы LESS
- Скомпилировать LESS в CSS
- Сократить CSS
- Извлечь CSS в другой файл (Этоне является частью вашего вопроса, но по какой-то причине веб-пакет называется «упаковщик». будет включать CSS в один пакет.)
- Сокращение Javascript
- Перестройте при изменении
Я мог бы просто собрать для вас файл конфигурации, но где в этом удовольствие?
Компиляция LESS в CSS и разрешение LESS
Если вы хотите скомпилировать ваши менее в css с помощью веб-пакета, вы должны импортировать файл в свой Javascript.В противном случае, webpack не будет знать, какие файлы вы хотите включить.Правила просто говорят веб-пакету, что делать с импортом меньшего количества файлов.Он не будет искать их сам по себе.Кроме того, вам нужно установить свой файл Javascript в качестве точки входа.Убедитесь, что файл styles.less импортирует остальные файлы меньшего размера, чтобы получить полный файл CSS, или импортирует все меньше файлов по отдельности.
// scripts.js
import "../styles/styles.less";
...
В конфигурации веб-пакета должна быть установлена точка входа (очень важно, даже если вы просто хотели сделать часть Javascript):
// webpack.config.js
module.exports = {
...
resolve: {
extensions: [".js"],
},
entry: {
'app.min': "./scripts/scripts.js",
},
output: {
filename: "[name].js"
},
...
Ваш меньший загрузчик сделает все остальное.
Минимизируйте CSS
Webpack 5, вероятно, будет содержатьМинификатор, чтобы сделать это для вас, но с Webpack 4 вы должны принести свой собственный.Хорошим оптимизатором CSS может быть optimize-css-assets-webpack-plugin .
Прежде всего, установите плагин, используя npm.
npm install optimize-css-assets-webpack-plugin --save-dev
Затем включитеон находится в верхней части вашего конфигурационного файла.
var OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
И, наконец, установите плагин в качестве собственного собственного ограничителя.
optimization: {
minimizer: [
new OptimizeCSSAssetsPlugin({})
]
},
Извлеките CSS в другой файл
Для этого вам также понадобится плагин.Подходящим для этой задачи будет mini-css-extract-plugin .
Сначала установите плагин.
npm install mini-css-extract-plugin --save-dev
Для этой задачи вам также понадобится загрузчик LESS и CSS, поэтому установите их также.Если у вас уже есть загрузчик less, вам будет достаточно:
npm install css-loader --save-dev
Затем включите его в конфигурацию:
var MiniCssExtractPlugin = require("mini-css-extract-plugin");
После этого включите его в качестве плагина вВаша конфигурация:
plugins: [
new MiniCssExtractPlugin({
filename: 'app.min.css',
})
],
И, наконец, включите загрузчик плагинов в конфигурацию вашего загрузчика.
module: {
rules: [
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'less-loader',
],
}
]
}
Минимизируйте код Javascript
Чтобы минимизировать Javascript, выдолжен включать в себя плагин minify для веб-пакетов.Хорошим примером этого может служить плагин uglifyjs webpack .
Сначала установите плагин с помощью npm.
npm install uglifyjs-webpack-plugin --save-dev
Затем потребуется плагин в верхней частиКонфигурация вашего веб-пакета.
var uglify = require('uglifyjs-webpack-plugin');
Наконец, определите ваш плагин в конфигурации веб-пакета вместе с ранее упомянутым ограничителем CSS.
optimization: {
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: true // set to true if you want JS source maps
}),
new OptimizeCSSAssetsPlugin({})
]
},
Это обеспечит, что при запуске веб-пакета плагинзапущен и минимизирует (используя uglifyjs) ваш код.
Перекомпилируйте ваш код при изменении
Этот самый простой.Webpack поставляется со встроенным флагом, чтобы отслеживать ваш код на предмет изменений.
Просто добавьте -w к вашему звонку, и он будет смотреть ваш код.
webpack -w
Я мог пропуститьво многом из-за большого количества вопросов, но это, по крайней мере, должно помочь вам начать работу.