webpack4
webpack.config.js配置
/*
webpack.config.js
作用：指示webpack干哪些活（当你运行webpack指令时，会加载里面的配置）
所有构建工具都是基于node平台运行的~~·模块化默认采用common.js
*/
// resolve用来拼接绝对路径的方法
const { resolve } = require('path')
module.exports = {
// webpack 配置
// 入口起点
entry: './src/index.js',
output: {
//输出文件名
filename: 'build.js',
//输出路径，，一般用绝对路径，使用path模块里的resolve变量
// __dirname nodejs的变量，代表当前文件的目录绝对路径，在这里代表当前文件夹03.。。
path: resolve(__dirname, 'build') // ！！！这里注意文件名要加引号
},
// loader的配置
module:{
rules: [
// 详细的loader配置
// use是一个数组，执行顺序是从右向左，从下到上
{
test: /\.css$/, //对.css结尾的文件进行配置，！！！这里注意没有引号
use: [
// 创建一个srcipt标签，将css-loader解析出的js样式资源插入到script标签中，并且添加到head中
{ loader: 'style-loader' },
// css-loader将.css文件解析成样式字符串，变成commonjs模块，加载到js中
{loader: 'css-loader',options: {modules: true}
]
}，
// 处理less文件
{
test: /\.less$/,
use: [
{ loader: 'style-loader' },
{loader: 'less-loader',options: {modules: true},
{loader: 'less-loader',options: {modules: true}
// less-loader将less转为css
]
}
]
},
// plugins的配置
plugins: [
// 详细的plugins的配置，每一个loader的配置是一个对象
],
// 模式
mode: 'development',// 开发者模式
// mode: 'production 生产者模式
}
下载css-loader和style-loader, less-loader less
npm i css-loader style-loader less-loader less -D
执行编译
webpack
