摘要：介绍背景最近和部门老大，一起在研究团队前端新手村的建设，目的在于帮助新人快速了解和融入公司团队，帮助零基础新人学习和入门前端开发并且达到公司业务开发水平。
介绍 1. 背景
最近和部门老大，一起在研究团队【EFT - 前端新手村】的建设，目的在于：帮助新人快速了解和融入公司团队，帮助零基础新人学习和入门前端开发并且达到公司业务开发水平。
本文也是属于【EFT - 前端新手村】的一部分，用来帮助新人快速入门 Webpack4，内容偏基础，当然也可以作为复习材料~~这里分享给各位小伙伴啦！
2. 文章概要我将从最基础的【项目初始化】开始介绍，到【处理 CSS / JS / 图片】，到【热更新，打包优化】等等，一一介绍和实践。
文章共分为 18 章，关于最基础的四个核心概念，可以到我整理的另一篇文章 《Webpack4 的四个核心概念》 中学习。
3. 教程目录 一、 项目初始化 1. 初始化 demo新建并进入文件夹 leo:
mkdir leo cd leo
然后本地安装 webpack 和 webpack-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，打开浏览器测试：
二、 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 的新建元素方法中，添加 class 为 box，这样新建的元素就带有 box 的 class 属性：
// 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 中的