test build

package.json

@@ -19,6 +19,7 @@
   "license": "ISC",
   "dependencies": {
     "axios": "^0.19.0",
+    "copy-webpack-plugin": "^5.0.3",
     "jquery": "^3.4.1",
     "lodash": "^4.17.11",
     "qs": "^6.7.0",

src/App.vue

@@ -4,7 +4,7 @@
     </div>
 </template>
 <script>
-  import '@/less/index.less';
+  // import '@/less/index.less';
   export default {
     name:'App'
   }

src/index.js

@@ -1,9 +1,11 @@
 import Vue from 'vue';
 import router from './router.js';
 import store from './store.js';
+import '../src/less/index.less';
+// import '../src/less/base.css';
 import App from './App.vue';
 import preview from 'vue-photo-preview';
-import 'vue-photo-preview/dist/skin.css';
+// import 'vue-photo-preview/dist/skin.css';
 Vue.use(preview);
 Vue.config.productionTip = false;
 

src/less/base.css

@@ -0,0 +1,107 @@
+body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, input, textarea, p, th, td, hr, button {
+  margin: 0;
+  padding: 0;
+  font-family: Arial, sans-serif, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB";
+  color: #323232;
+  -webkit-text-size-adjust:auto;
+}
+input, textarea{
+  outline: none;
+  border: none;
+  -webkit-tap-highlight-color:transparent; 
+}
+button {
+  border: none;
+}
+i {
+  font-style: normal;
+}
+ol, ul {
+  list-style: none;
+}
+a {
+  text-decoration: none;
+}
+
+.fl {
+    float: left;
+}
+
+.fr {
+    float: right;
+}
+/* 清理浮动 */
+.clearfix:after {
+    visibility: hidden;
+    display: block;
+    font-size: 0;
+    content: "";
+    clear: both;
+    height: 0;
+    line-height:0;
+}
+
+.clearfix {
+    zoom: 1; /* for IE6 IE7 */
+}
+
+/* 单行文字溢出时出现省略号，需设定宽度 */
+.ellips {
+    overflow: hidden;
+    white-space: nowrap;    
+    text-overflow: ellipsis;
+}
+html,body{
+  width: 100%;
+  height: auto !important;
+  overflow-x: auto;
+}
+html{
+  margin: 0;
+  padding: 0;
+  font-size: 13.33333333vw !important;
+}
+.mask{
+  width:100%;
+  height: 100%;
+  position: fixed;
+  top:0;
+  left: 0;
+  background:rgba(0,0,0,.5);
+}
+.footer{
+  width:100%;
+  height: .88rem;
+  line-height: .88rem;
+  text-align: center;
+  color:#fff;
+  font-size: .32rem;
+  background: linear-gradient(-270deg, #4F4FFF,#4F8BFF);
+  position: fixed;
+  bottom: 0;
+  left: 0;
+}
+.dbfooter{
+  width:100%;
+  font-size: .32rem;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  background: #F2F2F5;
+}
+.back,.next{
+    display: inline-block;
+    height: .88rem;
+    line-height: .88rem;
+    text-align: center;
+    vertical-align: top;
+  }
+.back{
+  width: 2.5rem;
+  color: #7C828E;
+}
+.next{
+  width: 4.91rem;
+  color: #fff;
+  background: linear-gradient(-270deg, #4F4FFF,#4F8BFF);
+}

src/less/index.less

@@ -1,4 +1,4 @@
- @import './base.less';
+@import './base.less';
 body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, input, textarea, p, th, td, hr, button {
   margin: 0;
   padding: 0;
@@ -15,10 +15,10 @@ input, textarea{
 button {
     border: 0 none;
 }
-h1, h2, h3, h4, h5, h6 {
-  // font-size: 100%;
-  // font-weight: 500;
-}
+// h1, h2, h3, h4, h5, h6 {
+//   font-size: 100%;
+//   font-weight: 500;
+// }
 i {
   font-style: normal;
 }
@@ -66,8 +66,8 @@ html,body{
 html{
   margin: 0;
   padding: 0;
-  font-size: @font-size;  //750px，1vw = 750*1%=7.5px
-  // font-size: 13.33333333vw !important;  //750px，1vw = 750*1%=7.5px
+  // font-size: @font-size;  //750px，1vw = 750*1%=7.5px
+  font-size: 13.33333333vw !important;  //750px，1vw = 750*1%=7.5px
 }
 
 /* @media screen and (-webkit-device-pixel-ratio:2){

webpack.common.js

@@ -41,7 +41,8 @@ module.exports = {
         loader: "file-loader",
         options:{
           limit:5000,
-          name: 'imgs/[name].[ext]'
+          // name: 'imgs/[name].[ext]'
+          name: 'images/[name].[ext]'
         }
       }]
     },{
@@ -49,6 +50,14 @@ module.exports = {
       use:[
         'vue-loader'
       ]
+      /*use:{
+        loader:'vue-loader',
+        options:{
+          loaders:{
+            less:'vue-style-loader!css-loader!less-loader'
+          }
+        }
+      }*/
     },{
       test: /\.js$/,
       exclude: file => (
@@ -65,6 +74,7 @@ module.exports = {
     }]
   },
   resolve: {
+    extensions: ['.js', '.vue', '.json'],
     alias: {
       'vue$':'vue/dist/vue.esm.js' ,     //让vue使用compiler模式，默认runtime模式要用render初始化
       '@':resolve('./src'),

webpack.prod.js

@@ -15,7 +15,7 @@ module.exports = merge(common,{
         vendor:{
           name:'vendor',
           test:/[\\/]node_modules[\\/]/,
-          priority:10,
+          priority:-10,
           chunks:'initial'
         }
       }
@@ -33,14 +33,15 @@ module.exports = merge(common,{
         parallel:true,
         sourceMap:false,
       }),
-      new OptimizeCssAssesetsPlugin({})
+      // new OptimizeCssAssesetsPlugin({})
     ]
   },
   plugins:[
     new CleanWebpackPlugin(),
     new MiniCssExtractPlugin({
       filename: 'css/[name].[hash].css',
-      chunkFilename: 'js/[id].[hash].css',
+      // chunkFilename: 'js/[id].[hash].css',
+      chunkFilename: 'css/[hash].[hash].css',
     }),
   ],
   module: {
@@ -49,24 +50,31 @@ module.exports = merge(common,{
       use:[{
         loader: MiniCssExtractPlugin.loader,
         options: {
+          filename:'[name].css',
+          chunkFilename:'[name].css',
+          minimize: true
           // you can specify a publicPath here
           // by default it use publicPath in webpackOptions.output
-          publicPath: '../'
+          // publicPath: '../'
         }
       },
-        'css-loader'
+        // 'css-loader'
+        {
+          loader:'css-loader',
+          options:{
+            importLoaders: 2   //该方式可以让@import引入的css文件再次执行一边css打包loader
+          }
+        }
       ]
-    },{
+    },
+    /*{
       test:/\.less$/,
-      use:[{
-        loader: MiniCssExtractPlugin.loader,
-        options:{
-          publicPath:'../'
-        }
-      },
+      use:[
+        'style-loader',
         'css-loader',
         'less-loader'
       ]
-    }]
+    }*/
+    ]
   }
 });