Webpack 简介及五个核心概念

Webpack五个核心概念
答：1.entry(入口文件，以哪个文件为入口起点开始打包)
2.output(出口文件，打包好的资源放在哪个文件下)
3.loader(webpack只能识别js和json文件，css和img需要引入loader)
4.plugin（优化压缩代码）
5.mode(分为开发development, 生产production)

基本的webpack的配置

/*
webpack.config.js webpack的配置文件
作用: 指示 webpack 干哪些活（当你运行 webpack 指令时，会加载里面的配置）

所有构建工具都是基于nodejs平台运行的~模块化默认采用commonjs。

// resolve用来拼接绝对路径的方法
const { resolve } = require('path');

module.exports = {
// webpack配置
// 入口起点
entry: './src/index.js',
// 输出
output: {
// 输出文件名
filename: 'built.js',
// 输出路径
// __dirname nodejs的变量，代表当前文件的目录绝对路径
path: resolve(__dirname, 'build')
},
// loader的配置(在 webpack 配置中定义 rules 时，要定义在 module.rules 而不是 rules 中)
module: {
rules: [
// 详细loader配置
// 不同文件必须配置不同loader处理
{
// 匹配哪些文件
（请记住，使用正则表达式匹配文件时，你不要为它添加引号。也就是说，/.txt$/ 与 '/.txt$/' 或 "/.txt$/" 不一样。前者指示 webpack 匹配任何以 .txt 结尾的文件，后者指示 **
** webpack 匹配具有绝对路径 '.txt' 的单个文件; 这可能不符合你的意图）
test: /.css$/,
// 使用哪些loader进行处理
use: [
// use数组中loader执行顺序：从右到左，从下到上依次执行
// 创建style标签，将js中的样式资源插入进行，添加到head中生效
'style-loader',
// 将css文件变成commonjs模块加载js中，里面内容是样式字符串
'css-loader'
]
},
{
test: /.less$/,
use: [
'style-loader',
'css-loader',
// 将less文件编译成css文件
// 需要下载 less-loader和less
'less-loader'
]
}
]
},
// plugins的配置
plugins: [
// 详细plugins的配置
],
// 模式
mode: 'development', // 开发模式
// mode: 'production'
}