使用Webpack替换文件/为文件添加别名
使用Webpack替换文件/为文件添加别名
提问于 2015-11-03 00:06:22
我正在尝试在我的项目中使用一个非常新的第三方模块，它是我使用npm安装的。该模块显然是在具有不区分大小写的文件系统的操作系统上开发的，因此它需要一个文件名，而实际的文件名是Injectable.js。这打破了捆绑过程。
模块的开发人员知道这个问题。同时，我正在尝试弄清楚如何按原样使用模块。我正在使用Webpack来捆绑我的项目。
我的项目相关部分的树形结构大致如下：
├──config
│ ├──webpack
│ ├──webpack.js
│
├──src
│ ├──client
│ ├──index.js
│
│
├──node_modules
│ ├──the module in question
│ ├── dist
│ │ ├── decorators
│ │ │ ├── providers
│ │ │ ├── Injectable.js
│ │ │
│ │ ├── index.js
|
├──gulpfile.jsnode_modules/the module in question/dist文件夹中的index.js文件需要providers文件夹中的文件Injectable.js，但需要使用命令require('./decorators/providers/injectable');
我想在该index.js中使用./decorators/providers/Injectable作为./decorators/providers/injectable的别名。
下面是我在webpack.js文件中执行的操作：
resolve: {
alias: {
'./decorators/providers/injectable': './decorators/providers/Injectable.js',
},
}但是这仍然不起作用；我得到了错误Module not found: Error: Cannot resolve 'file' or 'directory' ./decorators/providers/injectable
你能建议一下如何在捆绑Webpack的同时将节点模块中的一个文件名替换为另一个文件名吗？
更新：
以下是webpack的配置文件：
var path = require('path');
var rucksack = require('rucksack-css')({
fallbacks: true,
autoprefixer: true
});
var precss = require('precss');
var csswring = require('csswring');
var webpack = require('webpack');
module.exports = {
context: path.join(__dirname, '../../'),
debug: false,
entry: [
'./src/client/'
],
output: {
path: path.join(__dirname, '../../public/assets/js'),
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel?stage=1'
},
{
test: /\.css$/,
loader: 'style-loader!css-loader!postcss-loader'
},
{test: /\.png$/, loader: 'file-loader'},
{test: /\.gif$/, loader: 'file-loader'},
{test: /\.jpe?g$/, loader: 'file-loader'},
{test: /\.eot$/, loader: 'file-loader'},
{test: /\.woff2?$/, loader: 'file-loader'},
{test: /\.ttf$/, loader: 'file-loader'},
{test: /\.svg$/, loader: 'file-loader'}
]
},
postcss: function () {
return [rucksack, precss, csswring];
},
plugins: [
new webpack.NormalModuleReplacementPlugin(
/ng-forward\/dist\/decorators\/providers\/injectable\.js/,
require.resolve('ng-forward/dist/decorators/providers/Injectable')
)
],
resolve: {
extensions: ['', '.js']
}
};回答 1
Stack Overflow用户
回答已采纳
发布于 2015-11-03 02:12:29
使用webpack.NormalModuleReplacementPlugin
plugins: [
new webpack.NormalModuleReplacementPlugin(
/ng-forward\/dist\/decorators\/providers\/injectable\.js/,
require.resolve('ng-forward/dist/decorators/providers/Injectable')
),
],页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33481883
复制相关文章
相似问题
腾讯云开发者
