基礎目錄結構以及各個文件的作用
初始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-corebabel-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支持一下！