「old/vue.js/setup」の版間の差分

提供: 個人的記録
移動: 案内検索
(インストール)
(package.json)
14行目: 14行目:
  
 
== package.json ==
 
== package.json ==
webpack-dev-serverを使えるように package.json に以下のように dev の設定を記述する。
+
webpack-dev-serverを使えるように package.json に以下のように dev の設定を記述する。<br>
 +
webpack4からは --mode 指定が必要。
 
<pre>
 
<pre>
 
  "scripts": {
 
  "scripts": {
 
     "test": "echo \"Error: no test specified\" && exit 1",
 
     "test": "echo \"Error: no test specified\" && exit 1",
     "dev": "webpack-dev-server --hot"
+
     "dev": "webpack-dev-server --mode development --hot"
 
   }
 
   }
 
</pre>
 
</pre>

2018年5月7日 (月) 10:07時点における版

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

インストール

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
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 指定が必要。

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

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',
  },
}