Skip to content

Commit 25d0e08

Browse files
LissetteIbnzLissetteIbnz
committed
Update 02 Properties sample
1 parent 9745e7b commit 25d0e08

File tree

3 files changed

+105
-112
lines changed

3 files changed

+105
-112
lines changed

‎02 Properties/README.md

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -167,11 +167,9 @@ export default Vue.extend({
167167

168168
### ./src/Hello.vue
169169

170-
```javascript
170+
```vue
171171
<template>
172-
<input
173-
v-model="message"
174-
/>
172+
<input v-model="message" />
175173
</template>
176174
177175
<script lang="ts">
@@ -184,7 +182,6 @@ export default Vue.extend({
184182
},
185183
});
186184
</script>
187-
188185
```
189186

190187
- Update `App.vue`:

‎02 Properties/package.json

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
{
22
"name": "sample-vue-js",
3-
"version": "1.0.0",
3+
"version": "2.0.0",
44
"description": "Sample working with TypeScript and Webpack",
55
"main": "index.js",
66
"scripts": {
7-
"start": "webpack-dev-server",
8-
"build": "webpack"
7+
"start": "webpack-dev-server --open",
8+
"build": "webpack --mode=production"
99
},
1010
"repository": {
1111
"type": "git",
@@ -24,24 +24,24 @@
2424
},
2525
"homepage": "https://github.com/Lemoncode/vuejs-by-sample#readme",
2626
"devDependencies": {
27-
"@babel/cli": "^7.4.4",
28-
"@babel/core": "^7.4.5",
29-
"@babel/preset-env": "^7.4.5",
30-
"css-loader": "^3.0.0",
31-
"file-loader": "^4.0.0",
32-
"fork-ts-checker-webpack-plugin": "^1.3.7",
27+
"@babel/cli": "^7.8.0",
28+
"@babel/core": "^7.8.0",
29+
"@babel/preset-env": "^7.8.2",
30+
"css-loader": "^3.4.2",
31+
"file-loader": "^5.0.2",
32+
"fork-ts-checker-webpack-plugin": "^3.1.1",
3333
"html-webpack-plugin": "^3.2.0",
34-
"mini-css-extract-plugin": "^0.7.0",
35-
"ts-loader": "^6.0.3",
36-
"typescript": "^3.5.2",
37-
"url-loader": "^2.0.0",
38-
"vue-loader": "^15.7.0",
39-
"vue-template-compiler": "^2.6.10",
40-
"webpack": "^4.34.0",
41-
"webpack-cli": "^3.3.4",
42-
"webpack-dev-server": "^3.7.2"
34+
"mini-css-extract-plugin": "^0.9.0",
35+
"ts-loader": "^6.2.1",
36+
"typescript": "^3.7.4",
37+
"url-loader": "^3.0.0",
38+
"vue-loader": "^15.8.3",
39+
"vue-template-compiler": "^2.6.11",
40+
"webpack": "^4.41.5",
41+
"webpack-cli": "^3.3.10",
42+
"webpack-dev-server": "^3.10.1"
4343
},
4444
"dependencies": {
45-
"vue": "^2.6.10"
45+
"vue": "^2.6.11"
4646
}
4747
}

‎02 Properties/webpack.config.js

Lines changed: 84 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -3,101 +3,97 @@ const webpack = require('webpack');
33
const HtmlWebpackPlugin = require('html-webpack-plugin');
44
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
55
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
6-
const VueLoaderPlugin = require('vue-loader/lib/plugin');
76

87
const basePath = __dirname;
98

10-
module.exports = {
11-
context: path.join(basePath, 'src'),
12-
resolve: {
13-
extensions: ['.js', '.ts', '.vue'],
14-
alias: {
15-
vue: 'vue/dist/vue.runtime.esm.js',
9+
module.exports = (env, argv) => {
10+
const isDev = argv.mode !== 'production';
11+
return {
12+
context: path.join(basePath, 'src'),
13+
resolve: {
14+
extensions: ['.js', '.ts', '.vue'],
15+
alias: {
16+
vue: 'vue/dist/vue.runtime.esm.js',
17+
},
18+
},
19+
entry: {
20+
app: './main.ts',
21+
vendor: ['vue'],
22+
},
23+
output: {
24+
path: path.join(basePath, 'dist'),
25+
filename: '[name].js',
1626
},
17-
},
18-
mode: 'development',
19-
entry: {
20-
app: './main.ts',
21-
vendor: [
22-
'vue',
23-
],
24-
},
25-
output: {
26-
path: path.join(basePath, 'dist'),
27-
filename: '[name].js',
28-
},
29-
optimization: {
30-
splitChunks: {
31-
cacheGroups: {
32-
vendor: {
33-
test: /node_modules/,
34-
name: 'vendor',
35-
chunks: 'initial',
36-
enforce: true
27+
optimization: {
28+
splitChunks: {
29+
cacheGroups: {
30+
vendor: {
31+
test: /node_modules/,
32+
name: 'vendor',
33+
chunks: 'initial',
34+
enforce: true,
35+
},
3736
},
3837
},
3938
},
40-
},
41-
module: {
42-
rules: [
43-
{
44-
test: /\.vue$/,
45-
exclude: /node_modules/,
46-
loader: 'vue-loader',
47-
},
48-
{
49-
test: /\.ts$/,
50-
exclude: /node_modules/,
51-
use: {
52-
loader: 'ts-loader',
53-
options: {
54-
appendTsSuffixTo: [/\.vue$/],
55-
transpileOnly: true,
39+
module: {
40+
rules: [
41+
{
42+
test: /\.vue$/,
43+
exclude: /node_modules/,
44+
loader: 'vue-loader',
45+
},
46+
{
47+
test: /\.ts$/,
48+
use: {
49+
loader: 'ts-loader',
50+
options: {
51+
appendTsSuffixTo: [/\.vue$/], // Add suffix to vue files to transpile ts scripts in vue files
52+
transpileOnly: true,
53+
},
5654
},
5755
},
58-
},
59-
{
60-
test: /\.css$/,
61-
use: [
62-
process.env.NODE_ENV !== 'production'
63-
? 'vue-style-loader'
64-
: MiniCssExtractPlugin.loader,
65-
'css-loader',
66-
],
67-
},
68-
{
69-
test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
70-
loader: 'url-loader?limit=10000&mimetype=application/font-woff'
71-
},
72-
{
73-
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
74-
loader: 'url-loader?limit=10000&mimetype=application/octet-stream'
75-
},
76-
{
77-
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
78-
loader: 'file-loader'
79-
},
80-
{
81-
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
82-
loader: 'url-loader?limit=10000&mimetype=image/svg+xml'
83-
},
84-
]
85-
},
86-
devtool: 'inline-source-map',
87-
plugins: [
88-
new HtmlWebpackPlugin({
89-
filename: 'index.html',
90-
template: 'index.html',
91-
hash: true,
92-
}),
93-
new webpack.HashedModuleIdsPlugin(),
94-
new MiniCssExtractPlugin({
95-
filename: '[name].css',
96-
}),
97-
new ForkTsCheckerWebpackPlugin({
98-
tsconfig: path.join(__dirname, './tsconfig.json'),
99-
vue: true,
100-
}),
101-
new VueLoaderPlugin(),
102-
],
56+
{
57+
test: /\.css$/,
58+
use: [isDev ? 'vue-style-loader' : MiniCssExtractPlugin.loader, 'css-loader'],
59+
},
60+
{
61+
test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
62+
loader: 'url-loader?limit=10000&mimetype=application/font-woff',
63+
},
64+
{
65+
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
66+
loader: 'url-loader?limit=10000&mimetype=application/octet-stream',
67+
},
68+
{
69+
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
70+
loader: 'file-loader',
71+
},
72+
{
73+
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
74+
loader: 'url-loader?limit=10000&mimetype=image/svg+xml',
75+
},
76+
],
77+
},
78+
devtool: isDev ? 'inline-source-map' : 'none',
79+
plugins: [
80+
new HtmlWebpackPlugin({
81+
filename: 'index.html',
82+
template: 'index.html',
83+
hash: true,
84+
}),
85+
new MiniCssExtractPlugin({
86+
filename: '[name].css',
87+
}),
88+
new ForkTsCheckerWebpackPlugin({
89+
tsconfig: path.join(basePath, './tsconfig.json'),
90+
vue: true,
91+
}),
92+
new VueLoaderPlugin(),
93+
isDev &&
94+
new webpack.DefinePlugin({
95+
'process.env.NODE_ENV': JSON.stringify('development'),
96+
}),
97+
].filter(Boolean),
98+
};
10399
};

0 commit comments

Comments
 (0)