javascript - 【webpack】 如何引用本地插件?
本文介绍了javascript - 【webpack】 如何引用本地插件?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
我有个npm上没有的js插件,怎么打包到全局?
var webpack = require('webpack');
var path = require('path');
module.exports = {
entry: {
main:'./app/index.js'
},
output: {
filename: '[name].js',,
path:path.resolve(__dirname, 'dist')
},
resolve:{
modules:[
path.resolve(__dirname, "app"),
"node_modules"
]
}
}
直接在index.js使用require引入报错找不到;
后来我使用CommonsChunkPlugin打包成vendor还是不行;
var webpack = require('webpack');
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
main:'./app/index.js',
vendor: ['lib/easeljs/easeljs-0.8.2.min.js','lib/preloadjs/preloadjs-0.6.2.min.js','lib/tweenjs/tweenjs-0.6.2.min.js']
},
output: {
filename: '[name].js',
path:path.resolve(__dirname, 'dist')
},
resolve:{
modules:[
path.resolve(__dirname, "app"),
"node_modules"
]
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor'
}),
new HtmlWebpackPlugin({
filename: 'index.html',
template: './app/index.html'
})
]
}
解决方案
网上搜了一下你所说的库 https://github.com/CreateJS/E...
第一句是this.createjs = this.createjs||{};
显然模块中的this不是window,所以会出错
所以要使用imports-loader来打包,在index中import createjs from 'imports-loader?this=>window!createjs';
,这样createjs的实例就能获取到,但是此时还是有问题,因为webpack无法在设置的路径中找到easeljs,所以还需要alias一下:
resolve: {
alias: {
easeljs: path.join(__dirname,'这里确保路径能对应') + '/app/lib/easeljs-0.8.2.combined.js'
}
}
更新:issue里也有相关的解决方案,也是用imports-loader,楼主可以参考下https://github.com/CreateJS/E...
这篇关于javascript - 【webpack】 如何引用本地插件?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文