002 webpack基础 - webpack配置
[A] webpack五大核心概念
1. entry
提示 webpack 从哪个文件开始打包
2. output
提示webpack打包完的我呢见输出到哪去,如何命名
3. loader
webpack本身只能处理 js, json资源,其他资源需要借助于loader才能解析
4. plugin
拓展webpack的功能
5. mode 模式
webpack主要有两种模式:
开发模式:development
生产模式:production
[B] webpack.config.js 的配置
1. webpack的配置文件,需写在项目的根目录下,并且命名也是固定的 webpack.config.js
2. weback的配置文件,是通过commenJS的语法加载的,因此,需使用commenJS的语法导出
module.exports = {
...
}
3. 配置文件中主要配置五大核心内容,附加一些辅助信息
const path = require('path') module.exports = { // 入口 要求相对路径 entry: './src/main.js', // 出口 output: { // 输出路径 要求绝对路径 path: path.resolve(__dirname, 'dist'), // 文件名 filename: 'main.js', // 打包前是否清空output目录 clean: true }, // 加载器 module: { rules: [ // loader的配置 ] }, // 插件 plugins: [ // 插件配置 ], // 模式 mode: 'production', }
[D] 开发模式: 即开发代码时的模式
开发模式下,我们主要要做两件事:
1. 编译代码, 使浏览器可以识别
开发时, 有css, 字体图标, 图片资源, html资源等, webpack默认都不能处理这些资源, 因此, 我们需要加载配置来编译这些资源
2. 代码质量检查, 树立代码规范
提前检查代码隐患, 提升代码健壮性