2018年5月6日 (日) 14:57時点における版

昔、browserfyでやってたのをメモしていたが、どうにもwebpackのほうが便利そうなので書き直し。

インストール

npm init
npm install --save-dev webpack webpack-dev-server
npm install --save vue
npm install --save-dev vue-loader vue-template-compiler css-loader
npm install --save-dev babel-loader babel babel-core babel-preset-es2015
npm install --save-dev sass-loader node-sass

webpack.config.js

webpack.config.jsを作成してビルド周りの設定を定義

// webpack.config.js
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: `${__dirname}/dest`,
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },
      {
        test: /\.js$/,
        loader: 'babel-loader?presets=es2015',
      },
      {
        test: /\.(css|sass|scss)$/,
        loader: 'sass-loader',
      },
    ]
  },
  resolve: {
    extensions: ['.js', '.vue'],
    alias: {
      vue$: 'vue/dist/vue.esm.js',
    },
  },
  devServer: {
    contentBase: 'public',
  },
}