zoukankan      html  css  js  c++  java
  • vue+webpack+element-ui+git

    webpack.config.js

    const { resolve }
    = require('path') const webpack = require('webpack') const HtmlWebpackPlugin = require('html-webpack-plugin') const url = require('url') const publicPath = '' var ExtractTextPlugin=require('extract-text-webpack-plugin');//build使用 module.exports = (options = {}) => ({ entry: { vendor: './src/vendor',    index: ['babel-polyfill','./src/main.js']//ES6的语法兼容 }, output: { path: resolve(__dirname, 'dist'), filename: options.dev ? '[name].js' : '[name].js?[chunkhash]', chunkFilename: '[id].js?[chunkhash]', publicPath: options.dev ? '/assets/' : publicPath }, module: { rules: [{ test: /.vue$/, use: ['vue-loader'] },
    或者

      {
        test: /.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            scss: 'vue-style-loader!css-loader!sass-loader',
            sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
          }
        }
      },//解决页面的scss文件不能解析的问题

    
          {
            test: /.js$/,
            use: ['babel-loader'],
            exclude: /node_modules/
          },
          {
            test: /.html$/,
            use: [{
              loader: 'html-loader',
              options: {
                root: resolve(__dirname, 'src'),
                attrs: ['img:src', 'link:href']
              }
            }]
          },
        //   {
        //     test:/.css$/,
        //     use:ExtractTextPlugin.extract({
        //       fallback:'style-loader',
        //       use:'css-loader'
        //     })
        //   },
        //   {
        //     test:/.scss$/,
        //     loader:ExtractTextPlugin.extract({
        //       fallback:'style-loader',
        //       use:'css-loader!sass-loader'
        //     })
        //   },
          {
            test: /.css$/,
            use: ['style-loader', 'css-loader', 'postcss-loader']
          },
          {
            test: /.scss$/,
            exclude:/node_modules/,
            use: ['style-loader', 'css-loader', 'postcss-loader','sass-loader']
          },
          {
            test: /favicon.png$/,
            use: [{
              loader: 'file-loader',
              options: {
                name: '[name].[ext]?[hash]'
              }
            }]
          },
          {
            test: /.(png|jpg|jpeg|gif|eot|ttf|woff|woff2|svg|svgz)(?.+)?$/,
            exclude: /favicon.png$/,
            use: [{
              loader: 'url-loader',
              options: {
                limit: 100000,
                name:'img/[name].[ext]?[hash]'
              }
            }]
          }
        ]
      },
      plugins: [
        new webpack.optimize.CommonsChunkPlugin({
          names: ['vendor', 'manifest']
        }),
        // new ExtractTextPlugin({
        //   filename:'[name].css',
        //   disable:false,
        //   allChunks:true
        // }),
        new HtmlWebpackPlugin({
          template: 'src/index.html'
        })
      ],
      externals:{//抽离第三方库
        /*"vue":"window.Vue",
            "vue-router":"window.VueRouter"*/
      },
      resolve: {
        alias: {
          '~': resolve(__dirname, 'src')
        }
      },
      devServer: {
        host: '127.0.0.1',
        port: 9001,
        proxy: {
          '/gonghui/': {
            target: 'http://172.16.81.36',
             secure: false,
             changeOrigin: true,
             pathRewrite: {
               '^/gonghui': 'gonghui'
             }
          }
        },
        historyApiFallback: {
          index: url.parse(options.dev ? '/assets/' : publicPath).pathname
        }
      },
      devtool: options.dev ? '#eval-source-map' : '#source-map'
    })

    .babelrc

    {
      "presets": [
        ["es2015", { "modules": false }]
      ]
    }

    postcss.config.js

    module.exports = {
      plugins: [
        require('autoprefixer')()
      ]
    }

    package.json

    {
      "name": "element-starter",
      "description": "A Vue.js project",
      "author": "yi.shyang@ele.me",
      "private": true,
      "scripts": {
        "dev": "webpack-dev-server -d --inline --hot --env.dev",
        "build": "rimraf dist && webpack -p --progress --hide-modules","dele": "rm -rf node_modules"
      },
      "dependencies": {
        "body-parser": "^1.17.2",
        "element-ui": "^1.1.2",
        "vue": "^2.3.4",
        "vue-router": "^2.4.0"
      },
      "engines": {
        "node": ">=6"
      },
      "devDependencies": {
        "autoprefixer": "^6.6.0",
        "babel-core": "^6.21.0",
        "babel-eslint": "^7.1.1",
        "babel-loader": "^6.4.0",
       "babel-polyfill": "^6.26.0",
    "babel-preset-es2015": "^6.13.2", "css-loader": "^0.27.0", "eslint": "^3.12.2", "eslint-config-enough": "^0.2.2", "eslint-loader": "^1.6.3", "extract-text-webpack-plugin": "^2.1.0", "file-loader": "^0.10.1", "html-loader": "^0.4.5", "html-webpack-plugin": "^2.24.1", "node-sass": "^4.5.2", "postcss-loader": "^1.3.3", "rimraf": "^2.5.4", "sass-loader": "^6.0.3", "style-loader": "^0.13.2", "url-loader": "^0.5.8", "vue-loader": "^11.1.4", "vue-template-compiler": "^2.1.8", "webpack": "^2.2.0-rc.4", "webpack-dev-server": "2.1.0-beta.12" } }
  • 相关阅读:
    PHP a[n+1]共有n+1个数,数值范围是1~n,a中有1个数重复,其他各不相同,找出这个重复的数
    PHP 逆转字符串与逆转句子
    根据上排给出十个数,在其下排填出对应的十个数 要求下排每个数都是先前上排那十个数在下排出现的次数
    PHP 将数组转换为完全二叉树
    PHP 查找随即数组中的最小的k个数
    PHP 逆转单链表
    TSQL 存储过程创建 PDF 格式文件(报表)
    TSQL: 三个通用的与日期相关的,辅助按周(星期日是周的最后一天)汇总的自定义函数
    收藏夹
    十行代码搞定 "冒泡排序"
  • 原文地址:https://www.cnblogs.com/yiyi17/p/7521956.html
Copyright © 2011-2022 走看看