【Cute-Webpack】Webpack4 入门手册(共 18 章)

介绍

1. 背景

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

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

2. 文章概要

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

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

3. 教程目录

【Cute-Webpack】Webpack4 入门手册(共 18 章)_第1张图片

一、 项目初始化

1. 初始化 demo

新建并进入文件夹 leo:

mkdir leo
cd leo

然后本地安装 webpackwebpack-cli在 Webpack 4.0以后需要单独安装):

npm install webpack webpack-cli --save-dev

初始化项目结构:

+ ├─package.json
+ ├─dist          // 存放最终打包的文件
+ │  └─index.html
+ ├─src           // 存放入口文件等开发文件
+ │  └─index.js
+ ├─webpack.config.js  // webpack的配置文件

安装 lodash

npm install lodash --save-dev

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

开发 index.js

import _ from 'lodash';

function createElement(){
    let div = document.createElement('div');
    div.innerHTML = _.join(['my', 'name', 'is', 'leo'], '');
    return div;
}
document.body.appendChild(createElement());

开发 webpack.config.js

const path = require('path');

module.exports = {
    entry: './src/index.js',
    mode: 'development',
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist')
    }
}

2. 打包测试

开始第一次打包任务:

npx webpack

// 输出:

Hash: 030b37b6b9a0b4344437
Version: webpack 4.39.1Time: 308ms
Built at: 2019-08-07 08:10:21
  Asset     Size  Chunks             Chunk Names
main.js  552 KiB    main  [emitted]  main
Entrypoint main = main.js
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {main} [built]
[./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {main} [built][./src/index.js] 225 bytes {main} [built]
    + 1 hidden module

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

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

<script src="./main.js">script>

二、 webpack 处理 CSS 模块

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

1. 修改代码

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

  ├─package.json
  ├─dist          // 存放最终打包的文件
  │  └─index.html
  ├─src           // 存放入口文件等开发文件
  │  ├─index.js
+ │  └─style
+ │     └─index.css
  ├─webpack.config.js  // webpack的配置文件

接着在 index.js 的新建元素方法中,添加 classbox,这样新建的元素就带有 boxclass 属性:

// src/index.js

import _ from 'lodash';
import './style/index.css';// 引入样式文件

function createElement(){
  let div = document.createElement('div');
  div.innerHTML = _.join(['my', 'name', 'is', 'leo'], '');
+ div.className = 'box';
  return div;
}
document.body.appendChild(createElement());

然后在 index.css 文件为 box

// src/style/index.css

.box{
    color: red;
}

注意:

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

  • css-loader : 用于处理 css 文件,使得能在 js 文件中引入使用;
  • style-loader : 用于将 css 文件注入到 index.html 中的