我正在尝试使用laravel-mix / webpack应用程序构建npm软件包，我想为某些文件夹结构使用别名，所以我草拟了一些webpack.config.js文件
webpack.config.js
/**
* As our first step, we'll pull in the user's webpack.mix.js
* file. Based on what the user requests in that file,
* a generic config object will be constructed for us.
*/
let mix = require('laravel-mix');
let ComponentFactory = require('laravel-mix/src/components/ComponentFactory');
new ComponentFactory().installAll();
require('./webpack.mix');
/**
* Just in case the user needs to hook into this point
* in the build process, we'll make an announcement.
*/
Mix.dispatch('init', Mix);
/**
* Now that we know which build tasks are required by the
* user, we can dynamically create a configuration object
* for Webpack. And that's all there is to it. Simple!
*/
let WebpackConfig = require('laravel-mix/src/builder/WebpackConfig');
module.exports = new WebpackConfig().build();
我有在require方法中提到的webpack.mix.js文件：
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
const tailwindcss = require('tailwindcss');
mix.copy('node_modules/nitseditor-frontend/Assets/images', 'public/nits-assets/images')
.sass('node_modules/nitseditor-frontend/Assets/sass/app.scss', 'nits-assets/css')
.options({
processCssUrls: false,
postCss: [ require('autoprefixer'), tailwindcss('./tailwind.config.js') ],
})
.js('node_modules/nitseditor-frontend/Assets/js/app.js', 'nits-assets/js')
.webpackConfig({
node: {
fs: "empty"
},
output: {
publicPath: '/',
chunkFilename: 'nits-assets/chunks/[name].[chunkhash].js',
},
resolve: {
extensions: ['.js', '.json', '.vue'],
alias: {
NitsModels: path.resolve(__dirname, 'node_modules/nitseditor-frontend/Models'),
ProjectComponents: path.resolve(__dirname, 'resources')
}
}
})
.sourceMaps().version().browserSync('nitsapp.local');
[一切正常，我是说正在生成块，资产文件夹结构没有问题，只有问题仍然存在于alias中，我尝试以以下方式导入我的模板：
import {login} from 'NitsModels/config/_model'
export default {
name: "LoginLayoutOne",
data() {
return {
email: '',
password: '',
error: '',
}
},
beforeCreate() {
console.log('check');
this.$auth.logout();
},
methods: {
login() {
this.loading = true;
this.error = "";
const user = {
email: this.email,
password: this.password
};
login(user).then(resolve => {
this.loading = false;
// console.log(resolve.redirect);
this.$router.push(resolve.redirect)
}).catch(error => {
this.loading = false;
this.error = error
});
}
}
}
和我的npm script / package.json文件看起来像：
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/nitseditor-frontend/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/nitseditor-frontend/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/nitseditor-frontend/webpack.config.js"
},
"devDependencies": {
"axios": "^0.19",
"browser-sync": "^2.26.7",
"browser-sync-webpack-plugin": "^2.0.1",
"cross-env": "^7.0",
"laravel-mix": "^5.0.1",
"lodash": "^4.17.13",
"nitseditor-frontend": "0.0.2",
"resolve-url-loader": "^3.1.0",
"sass": "^1.26.2",
"sass-loader": "^8.0.2",
"tailwindcss": "^1.2.0",
"vue": "^2.6.11",
"vue-router": "^3.1.6",
"vue-template-compiler": "^2.6.11"
},
"dependencies": {
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"laravel-mix-alias": "^1.0.2",
"vuex": "^3.1.2"
}
}
不知道为什么找不到文件：
ERROR Failed to compile with 1 errors
12:42:01 AM
This dependency was not found:
* NitsModels/config/_model in ./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!/Users/nitishkumar/Dev/npm/nitseditor-frontend/Layouts/LoginPage/LayoutOne.vue?vue&type=script&lang=js&
To install it, you can run: npm install --save NitsModels/config/_model
Asset Size Chunks Chunk Names
/nits-assets/js/app.js 8.74 MiB /nits-assets/js/app [emitted] /nits-assets/js/app
nits-assets/chunks/0.aabd72aaac8025782e17.js 54.5 KiB 0 [emitted] [immutable]
nits-assets/chunks/1.09bd4a0c45db3c2f579e.js 24.5 KiB 1 [emitted] [immutable]
nits-assets/css/app.css 24.1 KiB /nits-assets/js/app [emitted] /nits-assets/js/app
ERROR in /Users/nitishkumar/Dev/npm/nitseditor-frontend/Layouts/LoginPage/LayoutOne.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!/Users/nitishkumar/Dev/npm/nitseditor-frontend/Layouts/LoginPage/LayoutOne.vue?vue&type=script&lang=js&)
Module not found: Error: Can't resolve 'NitsModels/config/_model' in '/Users/nitishkumar/Dev/npm/nitseditor-frontend/Layouts/LoginPage'
@ /Users/nitishkumar/Dev/npm/nitseditor-frontend/Layouts/LoginPage/LayoutOne.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!/Users/nitishkumar/Dev/npm/nitseditor-frontend/Layouts/LoginPage/LayoutOne.vue?vue&type=script&lang=js&) 53:0-59 78:6-12
@ /Users/nitishkumar/Dev/npm/nitseditor-frontend/Layouts/LoginPage/LayoutOne.vue?vue&type=script&lang=js&
@ /Users/nitishkumar/Dev/npm/nitseditor-frontend/Layouts/LoginPage/LayoutOne.vue
@ /Users/nitishkumar/Dev/npm/nitseditor-frontend/Assets/js/routes.js
@ /Users/nitishkumar/Dev/npm/nitseditor-frontend/Assets/js/app.js
@ multi ./node_modules/nitseditor-frontend/Assets/js/app.js ./node_modules/nitseditor-frontend/Assets/sass/app.scss
[Browsersync] Proxying: http://nitsapp.local
[Browsersync] Access URLs:
--------------------------------------
Local: http://localhost:3000
External: http://192.168.1.113:3000
--------------------------------------
UI: http://localhost:3001
UI External: http://localhost:3001
--------------------------------------
[Browsersync] Watching files...
我没有提到的一件事是，我正在本地开发npm软件包，并试图对我的库文件进行符号链接，这可能导致我的问题没有答案，逐渐地，我逐渐知道我需要使用符号链接来解决虚假。因此，我将webpack.mix.js文件重新配置为：
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
const tailwindcss = require('tailwindcss');
mix.copy('node_modules/nitseditor-frontend/Assets/images', 'public/nits-assets/images')
.sass('node_modules/nitseditor-frontend/Assets/sass/app.scss', 'nits-assets/css')
.options({
processCssUrls: false,
postCss: [ require('autoprefixer'), tailwindcss('./tailwind.config.js') ],
})
.js('node_modules/nitseditor-frontend/Assets/js/app.js', 'nits-assets/js')
.webpackConfig({
node: {
fs: "empty"
},
output: {
publicPath: '/',
chunkFilename: 'nits-assets/chunks/[name].[chunkhash].js',
},
resolve: {
symlinks: false,
extensions: ['.js', '.json', '.vue'],
alias: {
NitsModels: path.resolve(__dirname, 'node_modules/nitseditor-frontend/Models'),
}
}
})
.sourceMaps().version();
如果您可以看到我的webpackConfig()具有resolve至symlinks: false。我希望这对某人有帮助。