基本目次构造以及各个文件的作用
初始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
与
dev.config
须要用webpack供应的
webpack-merge
来兼并故这里须要做两件事变:
a.
npm install webpack-merge -D
这个放到背面装置config须要的依靠中一起做,稍后会写到b. 誊写
webpack.base.config.js
誊写 webpack.base.config.js
webpack/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
npm install -D css-loader vue-style-loader vue-loader vue-template-compiler
细致的设置申明诠释几天后给出
回到 webpack.dev.config.js
webpack/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须要的开辟依靠有:
webpack-merge
(前面提到的用来将dev.config和base.config兼并的依靠)
html-webpack-plugin
故在敕令行实行以下敕令
npm install -D html-webpack-plugin webpack-merge
能够最先写vue啦!
src/main.js
我们在上面的
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衬着
})
src/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支撑一下!