【Webpack】webpack配置流程

webpack 常用命令

1. 打包命令：webpack 要打包的文件的路径 打包好的输出文件的路径

配置完配置文件，在控制台直接输入 webpack 命令执行的时候，webpack 做的哪些事情？

1. webpack 会去项目的根目录中查找一个叫做 webpack.config.js 的配置文件
2. 当找到配置文件后，webpack 会去解析执行这个配置文件，解析完配置文件后，就得到了配置文件中导出的配置对象
3. 当 webpack 拿到配置对象后，就拿到了配置对象中指定的入口和出口，然后进行打包构建

使用 webpack-dev-server 这个工具，来实现自动打包编译的功能

// 具体版本号
"devDependencies": {
    "webpack": "^3.8.1",
    "webpack-dev-server": "^2.9.3"
  }

1. 运行 npm i webpack-dev-server -D 把这个工具安装到项目的本地开发依赖
2. 安装完毕后，这个工具的用法和 webpack 命令的用法完全一样
3. 若是在项目中安装的，无法把它当做脚本命令在 powershell 终端中直接运行（只有安装到全局-g 的工具才能在终端中正常运行），需要在 package.json 中 scripts 下进行配置

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server"
  }

4. 注意：webpack-dev-server 这个工具如果想要正常运行，要求本地项目中必须安装 webpack
5. webpack-dev-server 帮我们打包生成的 bundle.js 文件，并没有实际存放到物体磁盘上，而是直接托管到了电脑的内存中，所以我们在项目根目录中根本找不到这个打包好的 bundle.js
6. 我们可以认为 webpack-dev-server 把打包好的文件以一种虚拟的形式，托管到了项目的根目录中，虽然我们看不到他，但是可以认为和 dist,src,node_modules 平级，有一个看不见的文件叫做 bundle.js
7. 设置自动打开并且端口号指定为 3000，并且根目录指定为 src，热重载（避免代码不必要更新，并且浏览器不需要重新刷新）

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"
  }

使用 html-webpack-plugins 插件配置启动页面(在内存中根据 index 模板文件生成内存中的首页)

由于使用--contentBase 指令的过程比较繁琐，需要指定启动的目录，同时还需要修改 index.html 中 script 标签的 src 属性，所以推荐使用 html-webpack-plugins 插件配置启动页面

1. 运行 npm i html-webpack-plugin -D 安装到开发依赖
2. 修改 webpack.config.js 中 plugins 节点配置如下：

plugins: [
    // new一个热更新的模块对象，这是启用热更新的第三部
    new webpack.HotModuleReplacementPlugin(),
    // 创建一个在内存中生成html页面的插件
    new htmlWebpackPlugin({
      // 指定模板页面，将来会根据指定的页面路径，去生成内存中的页面
      template: path.join(__dirname, './src/index.html'),
      // 指定生成的页面的名称
      filename: 'index.html'
    })
  ]

html-webpack-plugins 插件的两个作用

1. 自动在内存中根据指定页面生成一个内存中的页面
2. 自动把打包好的 bundle.js 追加到页面中去

注意：webpack 默认只能打包处理 js 类型的文件，无法处理其他非 js 类型的文件，如果要处理非 js 类型的文件，我们需要手动安装一些合适的第三方 loader 加载器

1. 如果想要打包处理 css 文件，需要安装 style-loader 和 css-loader：npm i style-loader css-loader -D
2. 打开 webpack.config.js 这个配置文件，在里面新增一个配置节点，叫做 module，它是一个对象，在这个 module 对象上有一个 rules 属性，这个 rules 属性是个数组，这个数组中存放了所有第三方文件的匹配和处理规则(loader 的调用规则为从右到左)