1、我想用webpack打包一个react组件,想在打包的时候把第三方库如(react、react-dom、jquery等)去除。这个在webpack中要怎么配置才好?
我原本这样配:
//webpack.config.js
externals = {
"react": true,
"react-dom": true,
"jquery": true
}
这样虽然可以在打包时把这三个去掉,但是我在其他地方用的时候就会报react is not defined
,
想问一下我应该怎么做才能达到我想要的效果呢?
2、下面是我写的组件的一部分:
import React from "react";
import Item from "./components/Item";
import classnames from "classnames";
import $ from "jquery";
class Menu extends React.Component{
...
}
export default Menu;
@leftstick 正解。 顺便贴下我们组件库的实现。https://github.com/gmfe/react-gm/blob/master/webpack.config.js
把自己的解决方案贴出来把:
需要配置输出方式:
output: {
path: path.resolve(__dirname, "dist"),
filename: "components.js",
libraryTarget: "umd",
library: "Menu"
}
还有externals应该是这样才是正确的:
externals: {
"react": 'react',
"jquery": 'jquery',
'react-dom': 'ReactDOM'
}
试试:
externals: {
react: 'react',
jquery: 'jquery',
'react-dom': 'react-dom'
}
module: {
preLoaders: [
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'react'
}
]
]
}
exclude里面目录的引入文件不会被打包到代码中,可以先好好学一下webpack