文件目录
image.png
css文件
html,body {
height: 100%;
background-color: pink;
margin: 0;
padding: 0;
}
less文件
#title {
background-color: red;
}
js文件
import './index.css';
webpack.config
/*
webpack.config.js webpack 配置文件
作用:指示webpack 干哪里活(当你运行时 webpack会加载里面的配置)
*/
const { resolve } = require('path')
module.exports = {
// webpack 配置
// 入口文件
entry: './src/index.js',
// 输出文件
output: {
// 输出文件名
filename: 'build.js',
// 输出路径
// __dirname 表示当前的绝对路径 第二个是哪个文件
path: resolve(__dirname,"build")
},
// loader 配置
module: {
rules: [
// 详情的loader配置
{
// 匹配全部css样式文件
test: /\.css$/,
// 使用哪里css loader 进行处理
use: [ // use执行顺序 从右到左 从下到上
// 作用是 创建style标签 将js里的样式添加到head中生效
"style-loader",
// 作用是 将css文件转化成commonjs模块加载js中,里面的内容是字符串
"css-loader"
]
},
{
test: /\.less$/,
use: [
"style-loader",
"css-loader",
// 装less文件编译成css样式 要安装 less 跟less-loader
"less-loader"
]
}
]
},
// 插件配置
plugins: [],
mode: 'development'
}
运行 webpack 会加载webpack.config.js文件生成build里的build.js文件
html文件
<!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>
</head>
<body>
<script src="./build.js"></script>
</body>
</html>
image.png
image.png
网友评论