Skip to content

Commit 4c00a3e

Browse files
author
Xiang Liu
committed
(vue): webpack build scaffold
1 parent 05f2a88 commit 4c00a3e

14 files changed

+510
-8
lines changed

‎package.json

+12-1
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@
4545
"@angular/language-service": "^6.0.3",
4646
"@angular/upgrade": "^6.0.5",
4747
"@babel/core": "^7.4.5",
48+
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
4849
"@babel/preset-env": "^7.4.5",
4950
"@babel/preset-typescript": "^7.3.3",
5051
"@ngrx/schematics": "^6.0.1",
@@ -63,10 +64,14 @@
6364
"@vue/cli-service": "^3.6.0",
6465
"@vue/test-utils": "1.0.0-beta.29",
6566
"@webpack-cli/init": "^0.1.0",
67+
"autoprefixer": "^9.6.0",
6668
"babel-core": "7.0.0-bridge.0",
6769
"babel-jest": "^24.8.0",
6870
"babel-loader": "^8.0.5",
71+
"cache-loader": "^4.0.0",
6972
"codelyzer": "~4.2.1",
73+
"css-loader": "^3.0.0",
74+
"file-loader": "^4.0.0",
7075
"hammerjs": "^2.0.8",
7176
"jasmine-core": "~2.99.1",
7277
"jasmine-spec-reporter": "~4.2.1",
@@ -80,14 +85,20 @@
8085
"karma-webpack": "^3.0.5",
8186
"ngrx-store-freeze": "^0.2.4",
8287
"node-sass": "^4.9.0",
88+
"postcss-loader": "^3.0.0",
8389
"protractor": "~5.3.0",
90+
"sass": "^1.21.0",
8491
"sass-loader": "^7.1.0",
92+
"style-loader": "^0.23.1",
93+
"thread-loader": "^2.1.2",
8594
"ts-jest": "^23.0.0",
8695
"ts-node": "^8.1.0",
8796
"tsickle": "^0.33.0",
8897
"tslint": "~5.9.1",
8998
"typescript": "~3.1.1",
90-
"vue-template-compiler": "^2.5.21",
99+
"url-loader": "^2.0.0",
100+
"vue-loader": "^15.7.0",
101+
"vue-template-compiler": "^2.6.10",
91102
"webpack": "^4.32.2",
92103
"webpack-cli": "^3.1.0"
93104
}

‎vue/webpack/babel.config.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
module.exports = {
2+
presets: [
3+
'@babel/preset-env'
4+
],
5+
plugins: [
6+
'@babel/plugin-syntax-dynamic-import' // 打包模块懒加载
7+
]
8+
};

‎vue/webpack/build/index.html

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Title</title>
6+
</head>
7+
<body>
8+
<div id="app"></div>
9+
</body>
10+
</html>

‎vue/webpack/build/webpack.config.js

+141
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
/**
2+
* ../../node_modules/.bin/webpack-dev-server ./main.js --config ./build/webpack.config.js
3+
* ../../node_modules/.bin/webpack ./main.js --config ./build/webpack.config.js
4+
*/
5+
const path = require('path');
6+
const HtmlWebpackPlugin = require('html-webpack-plugin');
7+
const CleanWebpackPlugin = require('clean-webpack-plugin');
8+
const webpack = require('webpack');
9+
const VueLoaderPlugin = require('vue-loader/lib/plugin');
10+
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
11+
12+
module.exports = {
13+
mode: 'development',
14+
devtool: 'inline-source-map',
15+
devServer: {
16+
contentBase: path.resolve(__dirname, '../dist'),
17+
hot: true,
18+
port: 3001
19+
},
20+
entry: {
21+
app: '../main.js',
22+
},
23+
output: {
24+
filename: '[name].[hash:8].bundle.js',
25+
path: path.resolve(__dirname, '../dist'),
26+
},
27+
resolve: {
28+
alias: {
29+
vue$: 'vue/dist/vue.runtime.esm.js'
30+
},
31+
},
32+
module: {
33+
rules: [
34+
{
35+
test: /\.(js|jsx)$/,
36+
use: [
37+
'cache-loader', // cache-loader 用于缓存loader编译的结果
38+
'thread-loader', // thread-loader 使用 worker 池来运行loader，每个 worker 都是一个 node.js 进程
39+
'babel-loader'
40+
]
41+
},
42+
{
43+
test: /\.(scss|sass|css)$/,
44+
use: [
45+
'style-loader', // 将 JS 字符串生成为 style 节点
46+
'css-loader', // 将 CSS 转化成 CommonJS 模块
47+
{
48+
loader: 'sass-loader', // 将 Sass 编译成 CSS，默认使用 Node Sass
49+
options: {
50+
implementation: require("sass")
51+
}
52+
},
53+
'postcss-loader'
54+
]
55+
},
56+
{
57+
test: /\.(jpe?g|png|gif)$/i,
58+
use: [
59+
{
60+
loader: 'url-loader',
61+
options: {
62+
limit: 4096,
63+
fallback: {
64+
loader: 'file-loader',
65+
options: {
66+
name: 'img/[name].[hash:8].[ext]'
67+
}
68+
}
69+
}
70+
}
71+
]
72+
},
73+
{
74+
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
75+
use: [
76+
{
77+
loader: 'url-loader',
78+
options: {
79+
limit: 4096,
80+
fallback: {
81+
loader: 'file-loader',
82+
options: {
83+
name: 'media/[name].[hash:8].[ext]'
84+
}
85+
}
86+
}
87+
}
88+
]
89+
},
90+
{
91+
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/i,
92+
use: [
93+
{
94+
loader: 'url-loader',
95+
options: {
96+
limit: 4096,
97+
fallback: {
98+
loader: 'file-loader',
99+
options: {
100+
name: 'fonts/[name].[hash:8].[ext]'
101+
}
102+
}
103+
}
104+
}
105+
]
106+
},
107+
{
108+
test: /\.vue$/,
109+
use: [
110+
'cache-loader',
111+
'thread-loader',
112+
{
113+
loader: 'vue-loader', // vue-loader 用于解析.vue文件
114+
options: {
115+
compilerOptions: {
116+
preserveWhiteSpace: false
117+
}
118+
}
119+
}
120+
]
121+
}
122+
]
123+
},
124+
plugins: [
125+
new CleanWebpackPlugin([path.resolve(__dirname, '../dist')], {root: path.resolve(__dirname, '..')}),
126+
new webpack.DefinePlugin({
127+
'process.env': {
128+
VUE_APP_BASE_URL: JSON.stringify('http://localhost:3000'),
129+
NODE_ENV: JSON.stringify('development')
130+
}
131+
}),
132+
new HtmlWebpackPlugin({
133+
title: '搭建Vue开发环境',
134+
template: path.resolve(__dirname, './index.html')
135+
}),
136+
new webpack.HotModuleReplacementPlugin(),
137+
new VueLoaderPlugin(),
138+
// new BundleAnalyzerPlugin({analyzerMode: 'static'}), // 该插件生成依赖报告
139+
]
140+
};
141+

‎vue/webpack/main.js

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import Vue from 'vue'
2+
import App from './views/App.vue'
3+
import router from './router/router'
4+
import store from './vuex/store';
5+
6+
new Vue({
7+
render: h => h(App),
8+
router,
9+
store,
10+
}).$mount('#app');

‎vue/webpack/math.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
2+
3+
export function add(a, b) {
4+
return a + b;
5+
}

‎vue/webpack/postcss.config.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
2+
module.exports = {
3+
plugins: {
4+
autoprefixer: {}
5+
}
6+
};

‎vue/webpack/router/router.js

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
2+
import Vue from 'vue'
3+
import VueRouter from "vue-router";
4+
5+
Vue.use(VueRouter);
6+
7+
export default new VueRouter({
8+
mode: 'hash',
9+
routes: [
10+
{
11+
path: '/Home',
12+
component: () => import(/* webpackChunkName: "Home" */ '../views/Home.vue')
13+
},
14+
{
15+
path: '/About',
16+
component: () => import(/* webpackChunkName: "About" */ '../views/About.vue')
17+
},
18+
{
19+
path: '*',
20+
redirect: '/Home'
21+
}
22+
]
23+
})

‎vue/webpack/views/About.vue

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<template>
2+
<div class="About">
3+
<h2>About</h2>
4+
</div>
5+
</template>
6+
7+
<script>
8+
export default {
9+
name: 'About',
10+
11+
data() {
12+
return {};
13+
}
14+
};
15+
</script>
16+
17+
<style lang="scss" scoped>
18+
</style>

‎vue/webpack/views/App.vue

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<template>
2+
<div class="App">
3+
<div>
4+
<router-link to="/Home">go Home</router-link>
5+
<router-link to="/About">go About</router-link>
6+
</div>
7+
<div>
8+
<p>{{getCounter}}</p>
9+
<button @click="add">add</button>
10+
</div>
11+
<div>
12+
<router-view></router-view>
13+
</div>
14+
</div>
15+
</template>
16+
<script>
17+
import { mapActions, mapGetters } from 'vuex'
18+
export default {
19+
name: 'App',
20+
data() {
21+
return {};
22+
},
23+
computed: {
24+
...mapGetters(['getCounter'])
25+
},
26+
methods: {
27+
...mapActions(['add'])
28+
}
29+
};
30+
</script>
31+
<style lang="scss" scoped>
32+
.App {
33+
text-align: center;
34+
color: skyblue;
35+
font-size: 28px;
36+
}
37+
</style>

‎vue/webpack/views/Home.vue

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<template>
2+
<div class="Home">
3+
<h2>Home</h2>
4+
</div>
5+
</template>
6+
7+
<script>
8+
export default {
9+
name: 'Home',
10+
11+
data() {
12+
return {};
13+
}
14+
};
15+
</script>
16+
17+
<style lang="scss" scoped>
18+
</style>

‎vue/webpack/vuex/store.js

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
2+
import Vue from 'vue';
3+
import Vuex from 'vuex';
4+
5+
Vue.use(Vuex);
6+
7+
const state = {
8+
counter: 0
9+
};
10+
11+
const actions = {
12+
add: ({commit}) => {
13+
return commit('add')
14+
}
15+
};
16+
17+
const mutations = {
18+
add: (state) => {
19+
state.counter++
20+
}
21+
};
22+
23+
const getters = {
24+
getCounter (state) {
25+
return state.counter
26+
}
27+
};
28+
29+
export default new Vuex.Store({
30+
state,
31+
actions,
32+
mutations,
33+
getters
34+
});

‎webpack/webpack.config.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ module.exports = {
2424
publicPath: '/'
2525
},
2626
plugins: [
27-
new CleanWebpackPlugin(),
27+
new CleanWebpackPlugin(['./dist']),
2828
new HtmlWebpackPlugin({
2929
title: '管理输出'
3030
}),

0 commit comments

Comments
 (0)