webpack2&vue2

package.json

{
  "name": "vue2_with_webpack2",
  "version": "0.0.1",
  "description": "vue2開發項目基礎",
  "main": "index.js",
  "repository": "https://github.com/wysiwyg826/webpack2.0-vue2.0.git",
  "author": "wysiwyg826",
  "license": "MIT",
  "scripts": {
    "start": "set NODE_ENV=_dev&&webpack-dev-server --hot --inline --progress --colors --config webpack/webpack.config.js",
    "release": "set NODE_ENV=_prod&&webpack -p --progress --colors --config webpack/webpack.config.js"
  },
  "dependencies": {
    "vue": "^2.2.4",
    "vue-resource": "^1.2.1",
    "vue-router": "^2.3.0",
    "vuex": "^2.2.1"
  },
  "devDependencies": {
    "autoprefixer": "^6.7.7",
    "babel-core": "^6.24.0",
    "babel-loader": "^6.4.0",
    "clean-webpack-plugin": "^0.1.15",
    "css-loader": "^0.27.3",
    "extract-text-webpack-plugin": "^2.1.0",
    "file-loader": "^0.10.1",
    "html-webpack-plugin": "^2.28.0",
    "node-sass": "^4.5.0",
    "postcss-loader": "^1.3.3",
    "sass-loader": "^6.0.3",
    "scss-loader": "^0.0.1",
    "style-loader": "^0.13.2",
    "url-loader": "^0.5.8",
    "vue-loader": "^11.1.4",
    "vue-style-loader": "^2.0.3",
    "vue-template-compiler": "^2.2.4",
    "webpack": "^2.2.1",
    "webpack-dev-server": "^2.4.1"
  }
}

webpack.config.js

/**
 * webpack2 配置
 */
const webpack = require('webpack')
const port = 8099
/**
 * 路徑
 */
const path = require('path')
const root_path = path.resolve(__dirname, '../');
const app_path = path.resolve(root_path, './app');
const tmpl_path = path.resolve(root_path, './app/template');
const release_path = path.resolve(root_path, './app/dist');

/** 插件 */
const autoprefixer = require('autoprefixer');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')

const config = {
  entry: {
    app: path.resolve(app_path, 'index.js'),
    vendor: ['vue', 'vue-router', 'vue-resource', 'vuex'] // 公共庫不會常常變更
  }, // 入口文件
  output: {
    filename: '[name].release.js',
    path: release_path,
    devtoolLineToLine: true
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        include: [path.resolve(app_path)],
        use: [
          {
            loader: 'vue-loader'
          }
        ]
      }, {
        test: /\.(css|scss)$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader', 'postcss-loader', 'sass-loader']
        })
      }, {
        test: /\.js$/,
        include: [path.resolve(app_path)],
        exclude: [path.resolve(root_path, 'node_modules')],
        use: [
          {
            loader: 'babel-loader'
          }
        ]

      }, {
        test: /\.(jpg|png|gif)$/,
        loader: 'file-loader?limit=0'
      }, {
        test: /\.(woff|woff2|eot|ttf|svg)$/,
        loader: 'url-loader?limit=100000'
      }
    ]
  },
  context: __dirname,
  target: 'web',
  stats: { //object
    assets: true,
    colors: true,
    errors: true,
    errorDetails: true,
    hash: true
  },
  resolve: {
    modules: [
      "node_modules", path.resolve(app_path)
    ],
    alias: {
      'vue': 'vue/dist/vue.js'
    },
    extensions: ['.js', '.vue', '.css', '.scss']
  },
  plugins: [
    new webpack
      .optimize
      .CommonsChunkPlugin({ // 公共庫
        name: "vendor",
        minChunks: Infinity
      }),
    new webpack.ProvidePlugin({
      _config: './config/' + (process.env.NODE_ENV || '_dev') // 避免開發和發佈時頻繁切換
    }),
    new webpack.LoaderOptionsPlugin({
      test: /\.vue$/,
      options: {
        vue: {
          loaders: {
            css: 'vue-style-loader!css-loader',
            scss: 'vue-style-loader!css-loader!sass-loader'
          },
          postcss: [require('autoprefixer')({browsers: ['last 2 versions']})]
        }
      }
    }),
    new webpack.LoaderOptionsPlugin({/**scss文件postcss配置 */
      test: /\.scss$/,
      options: {
        postcss: function () {
          return [require("autoprefixer")({browsers: ['last 2 versions']})]
        }
      }
    }),
    new ExtractTextPlugin('[name].css'),
    new HtmlWebpackPlugin({
      title: 'vue2', //設置title的名字
      filename: 'index.html', //設置這個html的文件名
      template: path.resolve(tmpl_path, 'template.ejs'), //要使用的模塊的路徑
      inject: 'body', //把模板注入到哪一個標籤後 'body'
      // favicon: './images/favico.ico', // 圖標，
      chunks: [
        'app', 'vendor'
      ], //限定引入文件
      minify: false, //生成的html文件壓縮
      hash: true, //是否hash
      cache: true, //是否緩存
      showErrors: false //顯示錯誤
    })
  ]
}

if (process.env.NODE_ENV === '_dev') {
  config.devtool = 'cheap-source-map'
  config.devServer = {
    /*proxy: { // proxy URLs to backend development server
      '/api': 'http://localhost:3000'
    },*/
    port: port,
    // contentBase: path.join(app_path, 'dist'), // boolean | string | array, static file location
    compress: true, // enable gzip compression
    historyApiFallback: true, // true for index.html upon 404, object for multiple paths
    hot: true, // hot module replacement. Depends on HotModuleReplacementPlugin
    https: false, // true for self-signed, object for cert authority
    noInfo: true, // only errors & warns on hot reload
    // ...
  }
} else {
  config.devtool = 'cheap-module-source-map'
  config
    .plugins
    .concat([
      new CleanWebpackPlugin([path.resolve(app_path, 'dist')]),
      new webpack
        .optimize
        .UglifyJsPlugin({
          compress: {
            warnings: false
          }
        }),
      new webpack
        .optimize
        .OccurrenceOrderPlugin()
    ])
}

module.exports = config