安装与使用

npm install webpack@4.43.0 webpack-cli@3.3.12 -D
如果需要需要更新到最新版本
npm install webpack@next webpack-cli -D
git init -y

Loader

npm install css-loader@3.6.0 style-loader@1.2.1
可以看作是具有文件转换功能得翻译员。

  1. module:{
  2. rules:[
  3.  {
  4.   test:/\.css$/,
  5.   use:['style-loader','css-loader']
  6.   }]
  7. }

Plugin

Plugin 是用来扩展 Webpack 功能的，通过在构建流程里注入钩子实现，它给 Webpack 带来了很大的灵活性。

  1. const xx=require('xxxx')
  3. plugins:[
  4.  new xx({
  6.  })
  7. ]

Devserve

npm i -D webpack-dev-server
使用DevServer启动HTTP服务器监听文件不会输出到output指定得地址下，而是把webpack构建出来得文件保存到内存中了，再要访问文件得时候必须通过HTTP访问访问，所以在html中需要把导入得script更改为output中设置得filename中
实时预览 模块热替换 支持 Source Map

核心

  • Entry：入口，Webpack 执行构建的第一步将从 Entry 开始，可抽象成输入。
  • Module：模块，在 Webpack 里一切皆模块，一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。
  • Chunk：代码块，一个 Chunk 由多个模块组合而成，用于代码合并与分割。
  • Loader：模块转换器，用于把模块原内容按照需求转换成新内容。
  • Plugin：扩展插件，在 Webpack 构建流程中的特定时机注入扩展逻辑来改变构建结果或做你想要的事情。
  • Output：输出结果，在 Webpack 经过一系列处理并得出最终想要的代码后输出结果

    代码

    https://gitee.com/xuanyishuaige/webpack-code/tree/master/01-