1.使用npm下载loader
npm i style-loader -D
npm i css-loader -D
npm i less -D
npm i less-loader -D
2.配置webpack.config.js文件
/* webpack配置文件，作用：指示webpack怎么干活，干哪些活 当你运行webpack指令的时候，会加载其中的配置 所有的构建工具都是基于Node.js来运行的，模块化使用的CommonJS */ const {resolve} = require(‘path‘) module.exports = { // webpack配置 // 入口起点 entry : ‘./src/index.js‘, // 输出 output :{ filename : ‘build.js‘, path : resolve(__dirname,‘build‘) }, //loader的配置 module:{ rules:[ { //匹配哪些文件(正则表达式) //以css结尾 test:/\.css$/, //使用哪些loader进行处理 use:[//use数组中的执行顺序，是从后到前(从右到左) //创建一个style标签，将js中css样式资源插入进去，添加到页面的head中生效 ‘style-loader‘, //将css文件变成commonjs的模块，加载到js中，里面内容是样式字符串 ‘css-loader‘ ] }, { test:/\.less$/, use:[ ‘style-loader‘, ‘css-loader‘, //需要下载less-loader和less ‘less-loader‘ ] } ] }, //插件的配置 plugins:[ ], //模式 mode:‘development‘ //mdde:‘production‘ }
3.创建css和less文件
index.css
html,body{
height: 100%;
background-color: pink;
}
index.less
#title{
color:#fff;
}
4.创建入口文件index.js
import ‘./index.css‘
import ‘./index.less‘
5.执行webpack命令打包
webpack
6.建立html文件测试
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="./build.js"></script> </head> <body> <h1 id="title">hello</h1> </body> </html>
7.测试效果