2021年3月27日 (土) 21:26時点における最新版

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

インストール

vue-loader15からwebpackで使うにはvue-loader-options-pluginが必要になったのでインストール。

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

package.json

webpack-dev-serverを使えるように package.json に以下のように dev の設定を記述する。
webpack4からは --mode 指定が必要。
buildもwebpackでやるので記述しておく。

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "dev": "webpack-dev-server --mode development --hot",
  }

webpack.config.js

webpack.config.jsを作成してビルド周りの設定を定義。
vue-loader 15から VueLoaderPlugin の設定が必要。

// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')  //VueLoaderPluginが必要になった
module.exports = {
  entry: './src/index.js',   //ソースファイルの場所
  output: {
    filename: 'bundle.js',   //コンパイルで生成するファイル
    path: `${__dirname}/dest`,  //出力先。${__dirname} がルートディレクトリっぽい
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },
      {
        test: /\.js$/,
        loader: 'babel-loader?presets=es2015',
      },
      {
        test: /\.(css|sass|scss)$/,
        loader: 'sass-loader',
      },
      {
        test: /\.lless$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'less-loader'
        ]
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.vue'],
    alias: {
      vue$: 'vue/dist/vue.esm.js',
    },
  },
  devServer: {
    contentBase: 'dest',
  },
  plugins: [
    new VueLoaderPlugin()   //PluginにVueLoaderPluginを定義する
  ],
}