第一天:webpack基础配置
const path = require('path')// nodejs的核心模块,专门用来处理路径问题
module.exports = {
// 入口
entry: './src/main.js',// 使用相对路径
// 输出
output: {
// 输出路径
// path.resolve 可以返回一个绝对路径,
// __dirname 是nodejs的变量,代表当前文件的文件夹目录
// dist 表示在这个__dirname 代表的路径下创建一个名字为dist的文件夹来存放打包后输出的文件
path: path.resolve(__dirname, 'dist'), // 使用绝对路径
// 文件的输出名称
filename: 'main.js' // 叫啥都行,不强求
},
// 加载器
// module: { rules:[] } 固定写法
module: {
rules: [
// loader 的配置
{
test: /\.css$/,
use: [
// 执行顺序:从右往左,或者是从下到上
"style-loader",// 将js中的css通过创建style标签添加到html文件中生效
"css-loader" // 将css资源编译成commonjs的模块到js中
]
},
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
'less-loader', // 将less编译成css
],
},
]
},
// 插件
plugins: [],
// 模式:
// 开发模式:development
// 生成模式: production
mode: 'development'
}
小菜鸡一个,如有不对的地方,欢迎各位大佬指正,在这里先谢谢各位大佬了