redux+react+webpack+热加载+兼容IE8(持续更新)
redux+react+webpack+热加载+兼容IE8动机(备忘录,持续更新)项目需要支持到IE8,并且我是深度懒癌患者,于是选择了高配带有
使用安装依赖
运行
build
已知问题(收集中)1.开发环境中,IE8下不显示界面,通过build打包后是没问题的,不影响使用。如果有大神解决了这个问题,可以在下面 方案下面贴出环境的就些依赖和配置,我会陆续添加注释。 package.json{
"name": "redux-react-supportIE8-template","version": "1.0.0","description": "React support IE8","main": "./src/index.js","scripts": {
"start": "node server.js","build:webpack": "cross-env NODE_ENV=production webpack --config webpack.config.prod.js","build": "npm run build:webpack","test": "echo "Error: no test specified" && exit 1"
},"author": "iVan <jiestyle21@gmail.com>","dependencies": {
"eventsource-polyfill": "^0.9.6",//support ie8
"fetch-ie8": "^1.4.0",//support ie8
"object-assign": "^4.0.1","react": "^0.14.3","react-dom": "^0.14.3","react-redux": "^4.4.0","redux": "^3.3.1","redux-logger": "^2.6.1","redux-thunk": "^2.0.1"
},"devDependencies": {
"babel-loader": "^6.2.0",//babel对export default{}支持不好,不想写成module.exports就安装下面
"babel-plugin-add-module-exports": "^0.1.2","babel-preset-es2015": "^6.3.13",//ES2015转码规则
"babel-preset-react": "^6.3.13",//react转码规则
"babel-preset-stage-0": "^6.3.13",//ES7不同阶段语法提案的转码规则,一共有4个,选择安装一个
"es3ify-loader": "^0.1.0","express": "^4.13.3","cross-env": "^1.0.6","webpack": "^1.12.9","webpack-dev-middleware": "^1.4.0","webpack-hot-middleware": "^2.6.0"
}
}
下面配置server:var path = require('path');
var express = require('express');
var webpack = require('webpack');
var config = require('./webpack.config');
var app = express();
var compiler = webpack(config);
//通过localhost可以访问项目文件夹下的所有文件,等于动态为每个静态文件创建了路由
app.use(express.static(path.join(__dirname,'/')))
app.use(require('webpack-dev-middleware')(compiler,{
noInfo: true,publicPath: config.output.publicPath
}));
app.use(require('webpack-hot-middleware')(compiler));
app.get('/',function(req,res) {
res.sendFile(path.join(__dirname,'index.html'));
});
app.listen(3000,'localhost',function(err) {
if (err) {
console.log(err);
return;
}
console.log('Listening at http://localhost:3000');
});
webpack.config.js
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: [
'eventsource-polyfill',//兼容ie
'webpack-hot-middleware/client?reload=true',//看上面
'./src/index'
],output: {
path: path.join(__dirname,'dist'),filename: 'bundle.js',publicPath: '/static/'
},debug: true,devtool: 'source-map',plugins: [
new webpack.optimize.OccurenceOrderPlugin(),new webpack.HotModuleReplacementPlugin(),new webpack.NoErrorsPlugin()
],module: {
//loader自行添加
loaders: [
{
test: /.js$/,exclude: /node_modules/,loaders: ['babel-loader']
}
],postLoaders: [
{
test: /.js$/,loaders: ['es3ify-loader']
}
]
}
};
webpack.config.prod.jsvar path = require('path');
var webpack = require('webpack');
module.exports = {
devtool: 'source-map',entry: [
'./src/index'
],output: {
path: path.join(__dirname,filename: 'bundle.js',publicPath: '/static/'
},plugins: [
new webpack.optimize.OccurenceOrderPlugin(),new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
}),new webpack.optimize.UglifyJsPlugin({
compressor: {
warnings: false
}
})
],module: {
loaders: [{
test: /.js$/,exclude: /node_modules/,loaders: ['babel-loader']
}],postLoaders: [
{
test: /.js$/,loaders: ['es3ify-loader']
}
]
}
};
项目地址轻轻点这里(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |