We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
官方没有默认带上webpack配置,需要自己写
var path = require('path'); var webpack = require('webpack'); var HtmlWebpackPlugin = require('html-webpack-plugin'); var ExtractTextPlugin = require("extract-text-webpack-plugin"); // 引入css 单独打包插件 var config = { entry : { index : path.join(__dirname, 'src/') }, output : { path : path.join(__dirname, 'dist'), library: 'ElementReact',//导出为库,在全局下可通过 ElementReact 引用到 filename : 'bundle.js' }, externals : {//不打包React,而是引用全局变量 react : 'React',//有一个js名为 react.js,里面又 import React from 'react',让webpack编译出错了 'react-dom' : 'ReactDOM' }, resolve : { extensions : ['.js', '.jsx'] }, module : { noParse : [/react.js|react-dom.js/], loaders : [{ test : /\.js|jsx$/, loader : 'babel-loader', exclude : /node_modules/, include: [ path.join(__dirname, 'src/'), path.join(__dirname, 'libs/') ], query : { presets : [ ['es2015', { 'modules' : false, 'loose' : true } ], "stage-1", "react" //stage-1是必须的,不然有 state: State; 这样的语法编译错误 ] } }, { test : /\.css$/, loader : ExtractTextPlugin.extract({ fallback : 'style-loader', //这是webpack2要求的语法 use : 'css-loader' }) }, { test : /\.scss$/, loader : ExtractTextPlugin.extract({ //这是webpack2要求的语法 fallback : 'style-loader', use : [{ loader : 'css-loader' }, { loader : 'sass-loader' } ] }) }, { test : /\.(png|jpe?g|gif)(\?.*)?$/, loader : 'url-loader', query : { limit : 5000, // 换成你想要得大小 name : 'images/[name].[ext]?[hash:10]' } }, { test : /\.(woff2?|eot|ttf|otf|svg)(\?.*)?$/, loader : 'file-loader', query : { limit : 5000, // 换成你想要得大小 name : 'fonts/[name].[ext]?.[hash:7]' } } ] }, plugins : [ new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify('production') }),// 不启用 react-hot-loader/babel, 不知为何失败了。。。 new ExtractTextPlugin({ filename : 'bundle.css' }), new webpack.optimize.UglifyJsPlugin({ mangle : { keep_fnames : true },output: { comments: false } }) ] } module.exports = config;
尤其要注意的是, element-react-1.0.8\libs\utils\react.js 这个js的命名会导致webpack出错, import React from 'react' 编译为 var React = require("react") 而没有编译为var React = webpack_require("react") 这可能只是存在于特定版本下的webpack中的问题,此处为webpack 2.6 结果是把react.js重命名为 firstChild.js 然后 element-react-1.0.8\libs\utils\index.js 中 import * as ReactUtils from './react' 改为 import * as ReactUtils from './firstChild' 终于编译成功。
执行前先设置 set NODE_ENV=production webpack --progress
在浏览器执行又出现这个错误
Uncaught TypeError: Cannot assign to read only property 'exports' of object '#'
webpack/webpack#4039 提到,require 和 export不能混用 import 和 module.exports不能混用 这可能只是存在于特定版本下的webpack中的问题,此处为webpack 2.6 把 element-react-1.0.8\libs\props\range.js element-react-1.0.8\libs\props\regex.js 中的 import { createPropType } from '../utils'; 改为 var createPropType = require('../utils').createPropType;
The text was updated successfully, but these errors were encountered:
No branches or pull requests
官方没有默认带上webpack配置,需要自己写
尤其要注意的是, element-react-1.0.8\libs\utils\react.js
这个js的命名会导致webpack出错,
import React from 'react'
编译为
var React = require("react")
而没有编译为var React = webpack_require("react")
这可能只是存在于特定版本下的webpack中的问题,此处为webpack 2.6
结果是把react.js重命名为 firstChild.js
然后 element-react-1.0.8\libs\utils\index.js 中
import * as ReactUtils from './react'
改为
import * as ReactUtils from './firstChild'
终于编译成功。
执行前先设置
set NODE_ENV=production
webpack --progress
在浏览器执行又出现这个错误
Uncaught TypeError: Cannot assign to read only property 'exports' of object '#'
webpack/webpack#4039
提到,require 和 export不能混用
import 和 module.exports不能混用
这可能只是存在于特定版本下的webpack中的问题,此处为webpack 2.6
把
element-react-1.0.8\libs\props\range.js
element-react-1.0.8\libs\props\regex.js
中的
import { createPropType } from '../utils';
改为
var createPropType = require('../utils').createPropType;
The text was updated successfully, but these errors were encountered: