在实际开发中我们要避免二次请求静态资源,避免浪费。所以,要学会使用webpack打包样式文件
(1)首先初始化 package.json 输入指令: npm init
下载并安装 webpack 输入指令: npm install webpack webpack-cli -g npm install webpack webpack-cli -D
(2)下载安装 loader 包 npm i css-loader style-loader less-loader less -D
在终端输出
webpack src/js/main.js -o build/js/built.js --mode=development
webpack.config.js
const path=require('path')
module.exports={
entry: path.join(__dirname,'./src/main.js'),
//入口,表示使用webpack打包哪个文件
output:{ //输出文件相关的配置
path:path.join(__dirname,'./dist'),//把文件打包到哪个目录去
filename:'bundle.js' //指定输出的文件的名字
},
module:{//这个节点,用于配置所有的第三方模块加载器
rules:[ //所有第三方模块的规则
{test:/\.css$/,use:['style-loader','css-loader']},
{ test: /\.less$/,use: ['style-loader','css-loader',
// 将less文件编译成css文件
// 需要下载 less-loader和less
'less-loader'
]
}
]
},
mode:'development'//开发模型
}
main.js
import './index.css';
import './index.less';
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../dist/bundle.js"></script>
</head>
<body>
<h1 id="t">我是谁</h1>
</body>
</html>