初探webpack之搭建Vue开发环境
平时我们可以用vue-cli很方便地搭建Vue的开发环境，vue-cli确实是个好东西，让我们不需要关心webpack等一些繁杂的配置，然后直接开始写业务代码，但这会造成我们过度依赖vue-cli，忽视了webpack的重要性，当遇到一些特殊场景时候，例如Vue多入口的配置、优化项目的打包速度等等时可能会无从下手。当然现在才开始学习vue2 + webpack可能有点晚，毕竟现在都在考虑转移到vue3 + vite了哈哈。
描述文中相关的代码都在https://github.com/WindrunnerMax/webpack-simple-environment中的webpack--vue-cli分支中。webpack默认情况下只支持js、json格式的文件，所以要把css、img、html、vue等等这些文件转换成js，这样webpack才能识别，而实际上搭建Vue的开发环境，我们的主要目的是处理.vue单文件组件，最主要的其实就是需要相对应的loader解析器，主要工作其实就在这里了，其他的都是常规问题了。
实现 搭建环境初探webpack，那么便从搭建简单的webpack环境开始，首先是初始化并安装依赖。
$ yarn init -y $ yarn add -D webpack webpack-cli cross-env首先可以尝试一下webpack打包程序，webpack可以零配置进行打包，目录结构如下:
webpack-simple ├── package.json ├── src │ ├── index.js │ └── sum.js └── yarn.lock // src/sum.js export const add = (a, b) => a + b; // src/index.js import { add } from "./sum"; console.log(add(1, 1));之后写入一个打包的命令。
// package.json { // ... "scripts": { "build": "webpack" }, // ... }执行npm run build，默认会调用node_modules/.bin下的webpack命令，内部会调用webpack-cli解析用户参数进行打包，默认会以src/index.js作为入口文件。
$ npm run build执行完成后，会出现警告，这里还提示我们默认mode为production，此时可以看到出现了dist文件夹，此目录为最终打包出的结果，并且内部存在一个main.js，其中webpack会进行一些语法分析与优化，可以看到打包完成的结构是。
// src/main.js (()=>{"use strict";console.log(2)})(); webpack配置文件当然我们打包时一般不会采用零配置，此时我们就首先新建一个文件webpack.config.js。既然webpack说默认mode是production，那就先进行一下配置解决这个问题，因为只是一个简单的webpack环境我们就不区分webpack.dev.js和webpack.prod.js进行配置了，简单的使用process.env.NODE_ENV在webpack.config.js中区分一下即可，cross-env是用以配置环境变量的插件。
// package.json { // ... "scripts": { "build": "cross-env NODE_ENV=production webpack --config webpack.config.js" }, // ... } const path = require("path"); module.exports = { mode: process.env.NODE_ENV, entry: "./src/index.js", output: { filename: "index.js", path:path.resolve(__dirname, "dist") } } HtmlWebpackPlugin插件我们不光是需要处理js文件的，还需要处理html文件，这里就需要使用html-webpack-plugin插件。
$ yarn add -D html-webpack-plugin之后在webpack.config.js中进行配置，简单配置一下相关的输入输出和压缩信息，另外如果要是想每次打包删除dist文件夹的话可以考虑使用clean-webpack-plugin插件。
const path = require("path"); const HtmlWebpackPlugin = require("html-webpack-plugin"); module.exports = { mode: process.env.NODE_ENV, entry: "./src/index.js", output: { filename: "index.js", path:path.resolve(__dirname, "dist") }, plugins:[ new HtmlWebpackPlugin({ title: "Webpack Template", filename: "index.html", // 打包出来的文件名 根路径是`module.exports.output.path` template: path.resolve("./public/index.html"), hash: true, // 在引用资源的后面增加`hash`戳 minify: { collapseWhitespace: true, removeAttributeQuotes: true, minifyCSS: true, minifyJS: true, }, inject: "body", // `head`、`body`、`true`、`false` scriptLoading: "blocking" // `blocking`、`defer` }) ] }之后新建/public/index.html文件，输入将要被注入的html代码。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta content="width=device-width,initial-scale=1.0"> <title><%= htmlWebpackPlugin.options.title %></title> </head> <body> <div></div> <!-- built files will be auto injected --> </body> </html>启动npm run build，我们就可以在/dist/index.html文件中看到注入成功的代码了。
<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><title>Webpack Template</title></head><body><div id=app></div><!-- built files will be auto injected --><script src=http://www.likecs.com/index.js?94210d2fc63940b37c8d></script></body></html> webpack-dev-server