zukucode
主にWEB関連の情報を技術メモとして発信しています。

webpack モジュールのパスを絶対パスで指定する方法

自分で作成したモジュールをインポートするときはインポートするファイルを基準に相対パスで指定する必要があります。

import module1 from './module1'
import module1 from 'module1' // これだとnode_modulesフォルダを見に行ってしまう

フォルダ構成によっては深く階層を辿らないといけないので、フォルダ構成が変わってしまうと大変なことになります。

import module1 from './../../../module1'

Vue.js lessで外部のlessファイルをImportするで紹介したように、lessファイルのインポートも同様です。

相対パスではなく、絶対パスで指定する方法を紹介します。

webpack.config.jsの編集

Vue.js lessで外部のlessファイルをImportするで扱ったwebpack.config.jsを編集します。(フォルダ構成も同じとします。)

pathモジュールをrequireして、resolvemodulesを追記します。

webpack.config.js
const webpack = require('webpack');
const path = require('path');

module.exports = {
  entry: './resources/assets/js/app.js',
  output: {
    path: __dirname + '/public',
    publicPath: '/',
    filename: 'js/app.js'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            js: 'babel-loader',
            less: ['style-loader', 'css-loader', 'less-loader']
          }
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.common.js'
    },
    modules: [
      path.resolve('./resources/assets'),
      path.resolve('./node_modules')
    ]
  },
  devServer: {
    contentBase: __dirname + '/public',
    publicPath: '/',
    noInfo: true,
    historyApiFallback: true
  }
};

上記の設定をしておくと、

import module1 from 'module1'

としたとき、今まではnode_modulesしか見に行かなかったのが、./resources/assetsも見に行きます。

なので、以下のようにimportできるようになります。

App.js
import Vue from 'vue';
import App from './components/App.vue';
import App from 'js/components/App.vue';

new Vue({
  el: '#app',
  render: h => h(App)
});

lessファイルのImport

lessの場合は以下のように先頭に~をつける必要があります。

App.vue
<style lang="less" scoped>
/*@import "./../../less/variables";*/
@import "~less/variables";
.message {
  color: @red;
}
</style>

関連記事

  • Vue.js lessを使いwebpackでビルドする

    .vueファイル(単一ファイルコンポーネント)のstyleをcssではなくlessで実装して、webpackでビルドをします。vue-loaderのオプションにlessのloaderを追加します。


  • Vue.js lessで外部のlessファイルをImportする

    メインカラーなどの共通情報は外部のlessファイルに記載し、各vueファイルではそのlessファイルをImportして実装するのが効率的です。.vueファイル内のlessで外部のlessファイルをIm...


  • webpack モジュールのパスを絶対パスで指定する方法

    自分で作成したモジュールをインポートするときはインポートするファイルを基準に相対パスで指定する必要があります。フォルダ構成によっては深く階層を辿らないといけないので、フォルダ構成が変わってしまうと大変...


  • webpack lessをImportしてビルドする

    htmlやbodyなどに適用するベースのクラスを外部のlessファイルに実装して、スタイルをサイト全体に適用したい場合があります。外部のlessファイルをモジュールとしてImportしてwebpack...


  • vueファイル(単一ファイルコンポーネント)をwebpackでビルド

    vueファイル(単一ファイルコンポーネント)をwebpackでビルドする手順を紹介します。バージョンは、Vue.jsは2.x、webpackは2.xです。わかりやすくするため、空のプロジェクトから出来...


  • webpack-dev-serverで開発サーバーを起動する

    webpack-dev-serverで開発サーバーを起動します。vueファイル(単一ファイルコンポーネント)をwebpackでビルドページで紹介したwebpack.config.jsにdevServe...


  • ExtractTextPluginでcssファイルを出力する

    webpackのプラグインExtractTextPluginを使って、ビルドされたjsファイルからstyleの部分を抽出してcssファイルで出力します。extract-text-webpack-plu...


  • Vue.js webpackでHot Module Replacementを行う

    開発を効率化するために、Hot Module Replacement(HMR)の設定を行います。Hot Module Replacementを設定しておけば、ブラウザの再読込は行わず、修正した箇所のみ...


  • vue-router webpackでページごとにファイルを分割する

    vue-routerでシングルアプリケーションを作成していると、ページ数が増えるにしたがって作成されるjsファイルのファイルサイズもどんどん増えていきます。ページごとにファイルを分割し、そのページがア...


  • Vuex stateを作成して各コンポーネントで参照する

    実際にstoreを作成して、各コンポーネントでその値を参照できるようにします。mutations.jsにstateのオブジェクトを定義します。stateがアプリケーション全体の状態を管理します。