初次见面webpack

其实也不能算是初次见面，这个出来时间也比较长了。最近有个网站的前端开发，非常简单的传统的网站页面开发。前端只需要出模板，后端去渲染内容。不得已研究一下webpack。其实用gulp也能做到，但是webpack貌似整体性更强一些。也是刚好学习一下使用webpack5，平常都是基于vue和react做开发，CLI脚手架都很齐备，无需太多去关注webpack的配置，最多就是个多页应用的配置，这次从头到尾撸一遍。

需求列表

• 开发服务，自动刷新。打包功能一次搞定
• 多页应用
• 使用ejs模板，要支持模块文件的引入
• eslit，并在项目commit时自动执行eslint检查
• ts支持
• scss支持
• 静态资源（静态图片和favicon.ico）
• iconfont 支持
• css需要和js分离，且静态资源有版本控制

初始化项目

mkdir webpack-demo
cd webpack-demo
npm init -y
# 安装webpack和cli
npm install webpack webpack-cli --save-dev
# 安装webpack-dev-server
npm install webpack-dev-server --save-dev

好了 基本的依赖已经做完了，然后一步步解决上面的问题。

npm run serve # 这个是开发服务
npm run build # 这个是打包

新建配置文件webpack.config.js

const path = require('path');
module.exports = {
  mode: 'development', // 区分开发还是生产环境
  stats: 'normal', // 控制输出的信息
  entry: './src/index.js', // 入口
  output: { // 出口
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [], // 插件
  module: {
    rules: [] // loader
  }
};

新建目录src，并创建index.js文件，内容随意。
在package.json中加入build。

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.10.0",
    "webpack-cli": "^4.2.0",
    "webpack-dev-server": "^3.11.0"
  }
}

执行以下 npm run build ，看着就跑起来一个最简单的webpack项目。

后话

webpack 是以js为入口的，但是这个项目是以html为入口的，所以下一章用 html-webpack-plugin 构建多页应用。