基础目录结构以及各个文件的作用
初始 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.js
const path = require(“path”)
const {VueLoaderPlugin} = require(‘vue-loader’)
const ifProd = process.env.NODE_ENV === ‘production’ ? true : false
const 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.js
const 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”; // 引入 vue
import App from “./App”; // 引入组件 App
new 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 支持一下！