参考
编译less
webpack编译less需要使用到的loader:
style-loader
创建style标签，并将模块的导出的样式添加到 标签中；
让CSS在页面生效,让样式变成页面中的style标签;css-loader
解析CSS文件后，使用import加载，并且返回CSS代码；
加载CSS文件，包装成webpack能够识别的CSS,但不能让CSS文件产生效果;
*less-loader
将less文件编译成CSS；
配置
1.创建本地项目webpack-demo
mkdir webpack-demo
cd webpack-demo
2.在webpack-demo的根目录下创建package.json文件
npm init -y
- 安装
webpack依赖包
npm i webpack webpack-cli webpack-dev-server --save-dev
模块说明：
webpack
webpack核心webpack-cli
webpack的脚手架（启动器）webpack-dev-server
开发环境下用于实时加载依赖
4.修改package.json文件的scripts属性值,进行打包资源的配置
"scripts": {
"dev": "webpack-dev-server --open --mode development",
"build": "webpack --mode production"
},
5.安装需要的loader和依赖
npm i less-loader less --save-dev
6.创建一个名为test.less的文件
@color: #333;
@bg-color: #00a0e6;
@border:1px solid #00a0e6;
@link-color-hover: darken(@color, 10%);
.btn {
display: inline-block;
padding: 6px 12px;
outline: none;
border: @border;
color: @color;
background: @bg-color;
}
.btn:hover {
color:@link-color-hover;
}
并将该文件引入webpack的入口文件entry.js中；
import test from "../static/less/test.less";
7.配置编译less的loader
const path = require('path');
// 显示进程的完成进度
var ProgressBarPlugin = require('progress-bar-webpack-plugin');
// 设置进度字体颜色
const chalk = require('chalk');
// 输出html
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
entry: {
app: './src/app.js'
},
output: {
path: path.resolve(__dirname, '../dist'),
filename: '[name].[hash].js'
},
module: {
rules: [
{
test: /\.jsx?$/,
use: [
{loader: 'babel-loader'}
]
},
{
test: /\.css$/,
use: [
{
loader: 'style-loader',
options: {
singleton: true,// 单独的style
}
},
{
loader: 'css-loader'
},
{
loader: 'postcss-loader'
}
]
},
{
test: /\.less$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader'
},
{
loader: 'less-loader'
}
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
title: 'Webpack Study Demo',
filename: 'index.html',//指定生成的HTML文件名
template: path.join(__dirname, '../public/index.html') // 指定模板路径
}),
new ProgressBarPlugin({
format: chalk.green('Progressing') + '[:bar]' + chalk.green(':percent') + '(:elapsed seconds)',
clear: false
})
]
}
7.运行编译命令
npm run build
