基础目录结构以及各个文件的作用初始npm项目npm init // 一路回车，一律使用默认的npm项目配置给生成的package.json 加上scripts 用来启动我们的项目 // 如下{ “name”: “doing-a-webpack4-vue2-pro”, “version”: “1.0.0”, “description”: “超级详细的手写webpack4配置来启动vue2项目（附配置作用）”, “main”: “index.js”, “author”: “”, “license”: “ISC”, “scripts”: { “dev”: “webpack-dev-server –config webpack/webpack-dev-config.js” }, “engines”: { “node”: “>= 8.0.0”, “npm”: “>= 3.0.0” }, “browserslist”: [ “> 1%”, “last 2 versions”, “not ie <= 8” ]}说明：npm run dev 用来启动命令 webpack-dev-server –config webpack/webpack.dev.config.js这里将开发环境(development)的配置 webpack/webpack-dev-config.js 传入到启动的server config中。详情故这里需要做两件事情：a. npm install webpack-dev-server -D 开发依赖b. 书写 webpack.dev.config.js书写 webpack.dev.config.js说明： 由于 webpack.dev.config.js 与 webpack.prod.config.js 近似，所以手写一个 webpack.base.config.js来减少配置耦合量。 提示：base.config与拓展的config需要用webpack提供的 webpack-merge 来合并 故这里需要做两件事情： a. npm install webpack-dev-server -D 这个放到后面安装config需要的依赖中一起做，稍后会写到 b. 书写 webpack.base.config.js书写 webpack.base.config.jsconst path = require(“path”)const { VueLoaderPlugin } = require(‘vue-loader’)const ifProd = process.env.NODE_ENV === ‘production’ ? true : falseconst config = { dev: { mode: ‘development’, assetsPublcPath: ‘/’, assetsSubDirectory: ‘./’ }, prod: { mode: ‘production’, index: path.resolve(__dirname, “../dist/index.html”), assetsPublcPath: path.resolve(__dirname, “../dist”), assetsSubDirectory: ‘./’ }}module.exports = { mode: ifProd ? ‘production’ : ‘development’, context: path.resolve(__dirname, ‘../’), entry: { app: ‘./src/main.js’ }, output: { filename: ‘[name].bulde.[hash:10].js’, path: ifProd ? config.prod.assetsPublcPath : config.dev.assetsPublcPath }, resolve: { extensions: [’.js’, ‘.vue’], }, devServer: { quiet: true }, module: { rules: [ { test: /.vue$/, use: [ { loader: ‘vue-loader’, } ] }, { test: /.js$/, exclude: /node_modules/, loader: ‘babel-loader’, options: { presets: [‘babel-preset-env’] } }, { test: /.css$/, use: [‘vue-style-loader’, ‘css-loader’] } ] }, plugins: [ new VueLoaderPlugin() ]}我们可以看到，这里base.config需要的开发依赖有:babel-loader@7 （7.x版本需要配合 babel-core babel-preset-env）webpack (4.x版本需要配合 webpack-cli)css-loader (需要配合 vue-style-loader)vue-loader (需要配合 vue-template-compiler)故在命令行执行如下命令npm install -D babel-loader@7 babel-core babel-preset-env webpack webpack-cli css-loader vue-style-loader vue-loader vue-template-compiler详细的配置说明几天后给出回到 webpack.dev.config.jsconst BaseConfig = require("./webpack.base.config")const merge = require(“webpack-merge”)const HtmlWebpackPlugin = require(‘html-webpack-plugin’)module.exports = merge(BaseConfig, { plugins: [ // https://github.com/ampedandwired/html-webpack-plugin // 这是一个webpack的插件来创建html文件渲染你的webpack生成的bundle new HtmlWebpackPlugin({ // 写入bundle的那个index.html filename: ‘index.html’, template: ‘index.html’ }) ]})我们可以看到，这里dev.config需要的开发依赖有:html-webpack-plugin故在命令行执行如下命令npm install -D html-webpack-plugin可以开始写vue啦！我们在上面的 webpack.base.config.js 中写到了 entry: {app: ‘./src/main.js’}这就是我们的vue入口了。如下:import Vue from “vue”; // 引入vueimport App from “./App”; // 引入组件Appnew Vue ({ el: ‘#app’, // 挂载到index.html中的#app上 render: h => h (App) // 用App.vue渲染})简单的一个首页，App.vue书写<template> <div> <h1>Success</h1> </div></template><style> h1 { background: #FAFBBB }</style>如上，我们需要引入vue，所以：npm install vue -S (自动安装2.x版本的vue)最后代码结构:index.html<!DOCTYPE html><html lang=“en”><head> <meta charset=“UTF-8”> <meta name=“viewport” content=“width=device-width, initial-scale=1.0”> <meta http-equiv=“X-UA-Compatible” content=“ie=edge”> <link rel=“icon” href="#" type=“image/x-icon”> <title>doing</title></head><body> <div id=“app”></div></body></html>运行项目npm run dev具体的项目源码地址：https://github.com/Sotyoyo/do…源码与本文章稍有出入，后期会做到统一，希望给个star支持一下！