前端架构-玩转webpack5(三「1」)（web前端架构图）-技术精选-玖叶教程网

前面一节，我们搭建好了一个脚手架（@codingcoder/my-cli），脚手架里面用到了一些项目模板，那么这节我们就使用[email protected]来搭建我们自己的项目模版。

webpack

创建本地文件夹webpack-template，并进入初始化

$ mkdir webpack-template
$ cd webpack-template
$ npm init -y

1、安装webpack、webpack-cli、webpack-merge

$ yarn add webpack webpack-cli webpack-merge -D

2、构建项目目录

webpack-template
  |- build
    |- webpack.common.js
    |- webpack.dev.js
    |- webpack.prod.js
  |- public
    |- index.html
  |- src
    |- index.js
  |- package.json
  |- yarn.lock

3、编写index.html

// public/index.html
<!DOCTYPE html>
<html>
<head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <meta content="width=device-width,initial-scale=1,user-scalable=no" name="viewport">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-touch-fullscreen" content="yes">
  <meta name="format-detection" content="telephone=no,address=no">
  <meta name="apple-mobile-web-app-status-bar-style" content="white">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" >
  <title>webpack-template</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>

4、编写webpack.common.js

// build/webpack.common.js 
const path = require('path');

module.exports = {
    mode: 'development',
    entry: path.resolve(__dirname, '../src/index.js'),
    output: {
        path: path.resolve(__dirname, '../dist'),
        filename: 'static/js/[name].[contenthash:8].js',
        clean: true // webpack5新增，打包之前清除dist
    }
}

5、编写index.js入口

// src/index.js
document.querySelector('#root').innerHTML = 'hello webpack'

这样我们最简单的webpack打包架构就搭建好了，最后我们运行命令

>> webpack --config build/webpack.common.js

就可以看到在根目录下生成了dist文件夹，到这里我们最基础版本的webpack架构就搭建好了，接下来就是添砖加瓦了。

如果对该知识点感兴趣的同学，可以先关注博主，避免迷路，下节更精彩！

玖叶教程网

前端编程开发入门

前端架构-玩转webpack5(三「1」)（web前端架构图）