IT小鲍
IT小鲍

【Webpack】319- Webpack4 入门手册（共 18 章）（上）

【Webpack】319- Webpack4 入门手册（共 18 章）（上）_第1张图片

介绍

1. 背景

最近和部门老大，一起在研究团队【EFT - 前端新手村】的建设，目的在于：帮助新人快速了解和融入公司团队，帮助零基础新人学习和入门前端开发并且达到公司业务开发水平。

本文也是属于【EFT - 前端新手村】的一部分，用来帮助新人快速入门 Webpack4，内容偏基础，当然也可以作为复习材料~~这里分享给各位小伙伴啦！

2. 文章概要

由于本文篇幅较长，将分为《Webpack4入门手册（上）（共 18 章）》和《Webpack4入门手册（下）（共 18 章）》两篇文章发布，请联系起来看~

我将从最基础的【项目初始化】开始介绍，到【处理 CSS / JS / 图片】，到【热更新，打包优化】等等，一一介绍和实践。

文章共分为 18 章，关于最基础的四个核心概念，可以到我整理的另一篇文章 《Webpack4 的四个核心概念》 中学习。

《Webpack4 的四个核心概念》 https://github.com/pingan8787/Leo-JavaScript/blob/master/Cute-Webpack/guide/README.md

3. 教程目录

【Webpack】319- Webpack4 入门手册（共 18 章）（上）_第2张图片

一、 项目初始化

1. 初始化 demo

新建并进入文件夹 leo:

  
  
  
  
    

   
   
   
   
  1. mkdir leo
    2. 

   
   
   
   
  2. cd leo
    3.

然后本地安装 webpack 和 webpack-cli （在 Webpack 4.0以后需要单独安装）：

  
  
  
  
    
   
   
   
   
  1. npm install webpack webpack-cli --save-dev
    2.

初始化项目结构：

  
  
  
  
    

   
   
   
   
  1. + ├─package.json
    2. 

   
   
   
   
  2. + ├─dist // 存放最终打包的文件
    3. 

   
   
   
   
  3. + │ └─index.html
    4. 

   
   
   
   
  4. + ├─src // 存放入口文件等开发文件
    5. 

   
   
   
   
  5. + │ └─index.js
    6. 

   
   
   
   
  6. + ├─webpack.config.js // webpack的配置文件
    7.

安装 lodash：

  
  
  
  
    
   
   
   
   
  1. npm install lodash --save-dev
    2.

--save 可以简写为 -S, --save-dev可以简写为 -D.

开发 index.js：

  
  
  
  
    

   
   
   
   
  1. import _ from 'lodash';
    2. 

   
   
   
   

    3. 

   
   
   
   
  3. function createElement(){
    4. 

   
   
   
   
  4.  let div = document.createElement('div');
    5. 

   
   
   
   
  5.  div.innerHTML = _.join(['my', 'name', 'is', 'leo'], '');
    6. 

   
   
   
   
  6. return div;
    7. 

   
   
   
   
  7. }
    8. 

   
   
   
   
  8. document.body.appendChild(createElement());
    9.

开发 webpack.config.js：

  
  
  
  
    

   
   
   
   
  1. const path = require('path');
    2. 

   
   
   
   

    3. 

   
   
   
   
  3. module.exports = {
    4. 

   
   
   
   
  4.  entry: './src/index.js',
    5. 

   
   
   
   
  5.  mode: 'development',
    6. 

   
   
   
   
  6.  output: {
    7. 

   
   
   
   
  7.  filename: 'main.js',
    8. 

   
   
   
   
  8.  path: path.resolve(__dirname, 'dist')
    9. 

   
   
   
   
  9.  }
    10. 

   
   
   
   
  10. }
    11.

2. 打包测试

开始第一次打包任务：

  
  
  
  
    

   
   
   
   
  1. npx webpack
    2. 

   
   
   
   

    3. 

   
   
   
   
  3. // 输出：
    4. 

   
   
   
   

    5. 

   
   
   
   
  5. Hash: 030b37b6b9a0b4344437
    6. 

   
   
   
   
  6. Version: webpack 4.39.1Time: 308ms
    7. 

   
   
   
   
  7. Built at: 2019-08-0708:10:21
    8. 

   
   
   
   
  8. AssetSizeChunksChunkNames
    9. 

   
   
   
   
  9. main.js 552KiB main [emitted] main
    10. 

   
   
   
   
  10. Entrypoint main = main.js
    11. 

   
   
   
   
  11. [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {main} [built]
    12. 

   
   
   
   
  12. [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {main} [built][./src/index.js] 225 bytes {main} [built]
    13. 

   
   
   
   
  13.  + 1 hidden module
    14.

打包成功后，生成的文件会保存在 dist 目录中。

现在在 dist/index.html 中引入打包后的 main.js，打开浏览器测试：

  
  
  
  
    
   
   
   
   
  1. src="./main.js">
    2.

二、 webpack 处理 CSS 模块

这一部分，我们开始学着使用 webpack 去处理 css 相关的模块。

1. 修改代码

在项目 src 目录中，新建 style 文件夹，并新建 index.css 文件：

  
  
  
  
    

   
   
   
   
  1.  ├─package.json
    2. 

   
   
   
   
  2.  ├─dist // 存放最终打包的文件
    3. 

   
   
   
   
  3.  │ └─index.html
    4. 

   
   
   
   
  4.  ├─src // 存放入口文件等开发文件
    5. 

   
   
   
   
  5.  │ ├─index.js
    6. 

   
   
   
   
  6. + │ └─style
    7. 

   
   
   
   
  7. + │ └─index.css
    8. 

   
   
   
   
  8.  ├─webpack.config.js // webpack的配置文件
    9.

接着在 index.js 的新建元素方法中，添加 class 为 box，这样新建的元素就带有 box 的 class属性：

  
  
  
  
    

   
   
   
   
  1. // src/index.js
    2. 

   
   
   
   

    3. 

   
   
   
   
  3. import _ from'lodash';
    4. 

   
   
   
   
  4. import'./style/index.css';// 引入样式文件
    5. 

   
   
   
   

    6. 

   
   
   
   
  6. function createElement(){
    7. 

   
   
   
   
  7. let div = document.createElement('div');
    8. 

   
   
   
   
  8.  div.innerHTML = _.join(['my', 'name', 'is', 'leo'], '');
    9. 

   
   
   
   
  9. + div.className = 'box';
    10. 

   
   
   
   
  10. return div;
    11. 

   
   
   
   
  11. }
    12. 

   
   
   
   
  12. document.body.appendChild(createElement());
    13.

然后在 index.css 文件为 box ：

  
  
  
  
    

   
   
   
   
  1. // src/style/index.css
    2. 

   
   
   
   

    3. 

   
   
   
   
  3. .box{
    4. 

   
   
   
   
  4.  color: red;
    5. 

   
   
   
   
  5. }
    6.

注意：

这里使用 import'./style/index.css'; 引入我们的样式文件，是没办法解析使用，这时我们需要在 webpack 中使用到第三方 loader 插件，这里我们使用：

  • css-loader ：用于处理 css 文件，使得能在 js 文件中引入使用；

  • style-loader ：用于将 css 文件注入到 index.html 中的