config vue:start

JulCyan · Dec 15, 2019 · f75214c · f75214c
1 parent d2b6966
commit f75214c
Show file tree

Hide file tree

Showing 11 changed files with 1,170 additions and 40 deletions.
diff --git a/.gitignore b/.gitignore
@@ -4,4 +4,5 @@ dist
 .vscode
 .idea
 package.lock.json
+yarn-error.log
 
diff --git a/config/webpack.config.js b/config/webpack.config.js
@@ -7,6 +7,9 @@ const CopyWebpackPlugin = require('copy-webpack-plugin');
 const base = {
   path: path.join(__dirname, '..')
 }
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+// const lastStyleLoader = MiniCssExtractPlugin.loader
+const lastStyleLoader = 'style-loader'
 module.exports = {
   // entry 相对位置是 config 运行时目录
   entry: './src/main.js',
@@ -36,6 +39,10 @@ module.exports = {
       // 忽略
       ignore: ['*.html']
     }]),
+    // 抽离 css 代码
+    // new MiniCssExtractPlugin({
+    //   filename: '[name].css'
+    // })
   ],
   module: {
     // loaders
@@ -44,19 +51,20 @@ module.exports = {
       {
         test: /.css$/,
         use: [
-          'style-loader',
-          'css-loader'
+          lastStyleLoader,
+          'css-loader',
+          'postcss-loader'
         ],
       },
       // scss
       {
         test: /\.s(a|c)ss$/,
-        use: ['style-loader', 'css-loader', 'sass-loader']
+        use: [lastStyleLoader, 'css-loader', 'postcss-loader', 'sass-loader']
       },
       // less
       {
         test: /\.less$/,
-        use: ['style-loader', 'css-loader', 'less-loader']
+        use: [lastStyleLoader, 'css-loader', 'postcss-loader', 'less-loader']
       },
       // images
       {
@@ -88,5 +96,11 @@ module.exports = {
         exclude: /node_modules/,
       },
     ]
-  }
+  },
+  // optimization: {
+  //   splitChunks: {
+  //     // 公共包抽取
+  //     chunks: 'all'
+  //   }
+  // },
 }
diff --git a/config/webpack.prod.js b/config/webpack.prod.js
@@ -1,5 +1,7 @@
 const merge = require('webpack-merge')
 const config = require('./webpack.config')
+const TerserJSPlugin = require('terser-webpack-plugin')
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
 const {
   DefinePlugin
 } = require('webpack')
@@ -15,7 +17,14 @@ module.exports = merge(config, {
       ENV: {
         API_URL: '"yyyyyy"'
       }
-    })
+    }),
+    // new MiniCssExtractPlugin({
+    //   filename: '[name][hash:8].css'
+    // })
   ],
   devtool: 'none',
+  // optimization: {
+  //   // css js 压缩
+  //   minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
+  // }
 })
diff --git a/package.json b/package.json
@@ -34,6 +34,7 @@
     "@babel/plugin-syntax-dynamic-import": "^7.0.0",
     "@babel/plugin-syntax-import-meta": "^7.0.0",
     "@babel/preset-env": "^7.7.6",
+    "autoprefixer": "^9.7.3",
     "babel-loader": "^8.0.6",
     "clean-webpack-plugin": "^3.0.0",
     "copy-webpack-plugin": "^5.1.1",
@@ -43,16 +44,25 @@
     "html-withimg-loader": "^0.1.16",
     "less": "^3.10.3",
     "less-loader": "^5.0.0",
+    "mini-css-extract-plugin": "^0.8.0",
     "node-sass": "^4.13.0",
+    "optimize-css-assets-webpack-plugin": "^5.0.3",
+    "postcss-loader": "^3.0.0",
     "sass-loader": "7.1.0",
     "style-loader": "^1.0.1",
+    "terser-webpack-plugin": "^2.3.0",
     "url-loader": "^3.0.0",
+    "vue-loader": "^15.7.2",
+    "vue-template-compiler": "^2.6.11",
     "webpack": "^4.41.2",
     "webpack-cli": "^3.3.10",
     "webpack-dev-server": "^3.9.0",
     "webpack-merge": "^4.2.2"
   },
   "dependencies": {
-    "@babel/polyfill": "^7.7.0"
+    "@babel/polyfill": "^7.7.0",
+    "vue": "^2.6.11",
+    "vue-router": "^3.1.3",
+    "vuex": "^3.1.2"
   }
 }
diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+    plugins: [require('autoprefixer')]
+}
diff --git a/public/app.js b/public/app.js
diff --git a/public/index.html b/public/index.html
@@ -8,7 +8,8 @@
 </head>
 <body>
     <noscript><strong>请开启javascript</strong></noscript>
-    <div id="app">这是app
+    <div id="app">
+        <div id="btn">这是按钮</div>
     </div>
 </body>
 </html>
diff --git a/src/assets/less/index.less b/src/assets/less/index.less
@@ -1,6 +1,7 @@
 body {
   #app {
     color: red;
+    display: flex;
     background-image: url(../images/bg.png);
   }
 }
diff --git a/src/assets/scss/index.scss b/src/assets/scss/index.scss
@@ -1,5 +1,5 @@
 body {
-    #app {
-        color: red;
-    }
+  #app {
+    color: red;
+  }
 }
diff --git a/src/main.js b/src/main.js
@@ -2,7 +2,9 @@ const author = 'cyan'
 import './assets/css/index.css'
 import './assets/less/index.less'
 // import './assets/scss/index.scss'
-import { name } from './configs/decorator/index'
+import {
+  name
+} from './configs/decorator/index'
 console.log(`作者是${author}1`);
 class Bork {
   //Property initializer syntax
@@ -19,4 +21,9 @@ class Bork {
 }
 console.log(Bork.staticProperty);
 Bork.staticFunction()
-console.log(ENV.API_URL, name);
+console.log(ENV.API_URL, name);
+// document.querySelector('#btn').onclick = function () {
+//   import('jquery').then(({ default: $ }) => {
+//     $('#app').append('<p> jQuery add </p>')
+//   })
+// }
-Original file line number
+Diff line change
@@ Expand Up / @@ -4,4 +4,5 @@ dist @@
     .vscode
     .idea
     package.lock.json
+    yarn-error.log