最近有一个项目需要使用react开发兼容ie8,小白昨天配置一天总是ie8下报错,跪求兼容ie8的webpack开发环境(webpack了解的也不是很多)
急需一个react兼容ie8环境,react小白跪求
zlk
#2
目前主要问题是,开发环境可以在ie8下访问,webpack打包放到服务器ie8报错,附配置
var path = require("path");
var webpack = require("webpack");
var ExtractTextPlugin = require("extract-text-webpack-plugin"); //css单独打包
var HtmlWebpackPlugin = require("html-webpack-plugin"); //生成html
var es3ifyPlugin = require("es3ify-webpack-plugin");
//定义地址
var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve(ROOT_PATH, "src"); //__dirname 中的src目录,以此类推
var APP_FILE = path.resolve(APP_PATH, "app.js"); //根目录文件app.jsx地址
var BUILD_PATH = path.resolve(ROOT_PATH, "yzy/dist"); //发布文件所存放的目录/pxq/dist/前面加/报错?
module.exports = {
entry: {
app: ["babel-polyfill", APP_FILE]
},
output: {
publicPath: "/yzy/dist/", //编译好的文件,在服务器的路径,域名会自动添加到前面
path: BUILD_PATH, //编译到当前目录
filename: "[name].js", //编译后的文件名字
chunkFilename: "[name].[chunkhash:5].min.js" // 主要用于按需加载,生成块状文件
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /^node_modules$/,
loader: "babel-loader",
include: [APP_PATH]
},
{
test: /\.css$/,
exclude: /^node_modules$/,
loader: ExtractTextPlugin.extract("style", ["css", "autoprefixer"]),
include: [APP_PATH]
},
{
test: /\.less$/,
exclude: /^node_modules$/,
loader: ExtractTextPlugin.extract("style", [
"css",
"autoprefixer",
"less"
]),
include: [APP_PATH]
},
{
test: /\.scss$/,
exclude: /^node_modules$/,
loader: ExtractTextPlugin.extract("style", [
"css",
"autoprefixer",
"sass"
]),
include: [APP_PATH]
},
{
test: /\.(eot|woff|svg|ttf|woff2|gif|appcache)(\?|$)/,
exclude: /^node_modules$/,
loader: "file-loader?name=[name].[ext]",
include: [APP_PATH]
},
{
test: /\.(png|jpg|gif)$/,
exclude: /^node_modules$/,
loader: "url-loader?limit=8192&name=images/[hash:8].[name].[ext]",
//注意后面那个limit的参数,当你图片大小小于这个限制的时候,会自动启用base64编码图
include: [APP_PATH]
},
{
test: /\.jsx$/,
exclude: /^node_modules$/,
loaders: ["jsx", "babel-loader"],
include: [APP_PATH]
}
],
postLoaders: [
{
test: /\.js$/,
loaders: ["es3ify-loader"]
}
]
},
plugins: [
new webpack.DefinePlugin({
"process.env": {
NODE_ENV: JSON.stringify("production") //定义生产环境
}
}),
new HtmlWebpackPlugin({
//根据模板插入css/js等生成最终HTML
filename: "../index.html", //生成的html存放路径,相对于 path
template: "./src/template/index.html", //html模板路径
inject: "body",
hash: true
}),
new ExtractTextPlugin("[name].css"),
//提取出来的样式和common.js会自动添加进发布模式的html文件中,原来的html没有
new es3ifyPlugin(),
new webpack.optimize.UglifyJsPlugin({
compress: {
properties: false,
warnings: false
},
output: {
beautify: true,
quote_keys: true
},
mangle: {
screw_ie8: false
}
})
],
resolve: {
extensions: ["", ".js", ".jsx", ".less", ".scss", ".css"] //后缀名自动补全
}
};
stoneqq11
#3
楼主,我去年也搞了这个,react兼容ie8,开发环境可以跑,product报错,我是打包之后把里面
throw new TypeError(ERR_ACCESSORS_NOT_SUPPORTED) 这句替换成return object解决的。。。
其实如果用react,真心别去管ie8了,一堆****