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して、resolveにmodulesを追記します。
webpack.config.jsconst 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.jsimport 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>