npm i style-loader -D npm i css-loader -D npm i less -D npm i less-loader -D@H_502_0@ @H_502_0@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'
}
@H_502_0@
@H_502_0@3.创建css和less文件
@H_502[email protected]
html,body{
height: 100%;
background-color: pink;
}
@H_502_0@
@H_502[email protected]
#title{
color:#fff;
}
@H_502_0@
@H_502_0@4.创建入口文件index.js
import './index.css' import './index.less'@H_502_0@ @H_502_0@5.执行webpack命令打包
webpack ./src/index.js -o ./build/build.js --mode=development@H_502_0@ @H_502_0@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>
@H_502_0@
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
