一、前言

本篇博客就是对webpack做一个简单的入门，虽然这些文档很简单，由于没有实际操练的机会，所以这些知识点反复记反复忘。

本篇博客的主要目的：

就是为了稍微看懂：webpack官网给的配置文件 (opens new window)，但是webpack.config.js配置选项太多，核心的目标是看懂cra的配置方案，但这远远不是一片博客能做到的，下面就正式开始对webpack的学习。

二、环境配置+快速上手

# 1. 本地安装webpack
webpack@4.41.2
webpack-cli@3.3.10
webpack-dev-server@3.9.0
# 注： webpack 与 webpack-cli 不是同一个东西，版本号也不相同

# 2. 创建文件
# 如 touch index.js | echo "console.log(’123‘)" > index.js

# 3. 使用webpack打包(两种方式)
# 3.1 调用bin文件中的内容
./node_modules/.bin/webpack -v
4.46.0

# 3.2 简化写法：调用npx
npx webpack -v

这边遇到一个小问题：

之前的webpack入门案例的教程已经写好了，只不过是在windows系统上写的，但是Mac上面总是报错：找不到这个函数，这个原因找到了：

对于可执行文件，必须要给文件夹添加权限。

需要添加权限：chmod -R 777 ./node_module/.bin

三、入门案例上手：如何让浏览器识别 import语法？

1. 问题描述：浏览器无法识别import语法。

2. webpack打包后的结果那为啥能成功运行呢？

3. 原因：做了一层静态分析，直接帮你运行翻译后的结果。

   // x.js
   export default 'xxx'
   
   // index.js（webpack默认的打包入口：index.js）
   import x from 'x.js'
   console.log(x)
   

   index.js文件经过 webpack 打包后只会保留下面这段代码：

   console.log('xxx')
   

四、如何看webpack官网 (opens new window)

编号	简写	简介
1	API	这块主要介绍的是wepack，wepack-cli，webpack-dev-server命令 也可以直接在命令行输入wepack --help查看。
2	概念	这一块就是概念：名词解释+基础使用方法
3	配置	webpack.config.js
4	指南	新手入门文档，也是本篇博客干的事情，建议看官方文档。
5	loader	官方推荐loader
6	Plugin	官方推荐Plugin
7	版本	版本切换

入口|出口

// webpack.config.js
var path = require('path')

// 使用 node 的语法(commonJS模块化)编写
module.exports = {
  mode:'development',
  entry: './src/index.js',
  output: {
    filename: '[name].[contenthash].bundle.js' // 可以使用占位符 format
  }
  
}

取名Hash名称的原因：

1. 内容与文件名一一对应。

2. 涉及到HTTP缓存：

   index.html会依赖很多css资源，如果有缓存能提高缓存速度，如果资源变了，就会立刻去请求新的资源。

   注：首页是绝对不能做缓存的。

plugin的使用

loader的使用

导入css文件需要用到两个插件

• css-loader：将css文件读入到js代码中

  // 验证：
  import css from './x.css'
  console.log(css.toString())
  

• style-loader：将css写入到html的style标签下

---

以上是开发状态下的使用，但是在生产环境下，我们还是希望生成一个新的css文件，需要使用插件，如new MiniCssExtractPlugin()

五、Webpack-dev-server的学习

吐槽一下，webpack的官网，一开始找不到如何去配置这个运行环境

API中的webpack-dev-server api只是教你如何在node的方式另启一个服务器，这个server.js该如何去写。

但是webpack这部分工作已经帮你做好了，直接配置webpack.config.js就OK了，

官网查找的位置在：配置->左侧栏的DevServer

网址：https://webpack.docschina.org/configuration/dev-server/

使用时：npx webpack serve

当然，比如说我们希望调用一起其余的option，例如：启动默认的浏览器

npx webpack --open

具体的有什么参数可以直接在命令行输入npx webpack server -h

或者官网也给出了参考文件：https://github.com/webpack/webpack-cli/blob/master/SERVE-OPTIONS-v4.md

六、如何区分生产模式和开发模式下的config文件

// webpack.config.prod.js
// webpack.config.dev.js

// 在package.json 中打包时：
scripts: {
	"build": "rm -rf dist && webpack --config webpack.config.prod.js"
}

// 以上命令可通过 npx webpack -h 找到

如何使用两个文件，可以使用...扩展符，本质上就是commonJs模块化语法

// webpack.config.base.js
module.exports = {
  mode: ""
  plugins: [
  	....
  ]
}

// webpack.config.prod.js 继承base中的内容
const base = require('./webpack.config.base.js') // 本身就是 commonjs语法
module.exports = {
  ...base, // 第一层嵌套
  mode: "production",
  plugins: [
    ...base.plugins // 第二层嵌套
    new MiniCssExtractPlugin({...})
  ]
}