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>

関連記事

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

    Vue.js lessを使いwebpackでビルドするでvueファイルの中でlessを実装してビルドする方法を紹介しました。htmlやbodyなどに適用するベースのクラスを外部のlessファイルに実装...


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

    Vue.js lessを使いwebpackでビルドするで.vueファイル(単一ファイルコンポーネント)のstyleをcssではなくlessで実装して、webpackでビルドをしました。メインカラーなど...


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

    .vueファイル(単一ファイルコンポーネント)のstyleをcssではなくlessで実装して、webpackでビルドをします。sassでも以下記事のlessの文言がsassに置き換わるくらいでやり方は...


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

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


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

    webpack-dev-serverで開発サーバーを起動します。ファイルやフォルダ構成などの環境はvueファイル(単一ファイルコンポーネント)をwebpackでビルドで紹介したものと同様とします。we...


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

    開発サーバー(localhost)の自動リロードで開発を効率化するために、Hot Module Replacement(HMR)の設定を行います。ファイルやフォルダ構成などの環境はwebpack-de...


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

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


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

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


  • webpack postcssを導入する

    webpackでpostcssを導入してautoprefixerなどを行います。必要なパッケージをインストールします。postcss-loaderはwebpackでpostcssを行うために必要です。...


  • webpack-dev-serverでhttpsでのアクセスを可能にする方法

    webpack-dev-serverでhttpsでのアクセスを可能にする方法を紹介します。外部APIのテストや、メディアデバイスのテストなどで、開発中のlocalhostをhttpsにする必要があると...