vue的项目随便选择一个页面生成html_一步步带你实操webpack，手动搭建vue项目就是这么简单...

webpack 是一个前端工程化打包工具，对于前端工程师来说 webpack 是一项十分重要的技能。下面我们就通过搭建一个 vue 项目来学习使用 webpack

主要环境：

• node v14.15.0
• npm v6.14.9
• webpack v5.10.0
• webpack-cli v4.2.0
• vue v2.6.12

本项目实现以下功能：

• 与vue/cli类似的基本目录
• 支持*.vue,*.css等文件
• 支持es6及以上语法
• 支持加载图片
• 热加载

构建项目基本目录

执行npm init并创建以下目录

demo├─ dist├─ public└─ src

安装必要依赖

webpack 及相关插件

• webpack npm install -D webpack webpack-cli
• webpack 本地服务器插件 npm install -D webpack-dev-server
• html 生成插件，它会将生成的 js 和 css 文件插入到 html 中 npm install -D html-webpack-plugin
• vue 插件 npm install -D vue-loader vue-template-compiler
• css 插件 npm install -D css-loader style-loader
• 图片插件 npm install -D file-loader url-loader
• babel 插件 npm install -D @babel/core @babel/cli @babel/preset-env babel-loader, npm install @babel/polyfill

安装 vue

• npm install vue vue-router

搭建项目

简单实现 webpack 打包

新建src/main.js，并写入：

console.log('Hello Webpack');

根目录下新建webpack.config.js，并写入：