webpack兼容问题

[libin1991]

{ "name": "react-redux-webpack", "version": "1.1.0", "description": "", "scripts": { "start": "webpack-dev-server", "str": "webpack-dev-server --config webpack.config.js --progress --colors", "dev": "npm cache verify && webpack-dev-server --config webpack.config.js --progress --colors --quiet", "lint": "eslint src", "pro": "del /F /S /Q dist && set NODE_ENV=production&& webpack --progress --hide-modules --config webpack.config.js", "build-mac": "export NODE_ENV=production && webpack --progress --hide-modules --config webpack.config.js", "build-win": "del /F /S /Q dist && set NODE_ENV=production&& webpack --progress --hide-modules --config webpack.config.js", "test": "webpack --profile --json > stats.json" }, "repository": { "type": "git", "url": "" }, "author": "libin", "license": "MIT", "devDependencies": { "animate.css": "^3.5.2", "assets-webpack-plugin": "^3.5.1", "autoprefixer": "^7.1.1", "axios": "^0.16.2", "babel-cli": "^6.16.0", "babel-core": "^6.24.1", "babel-loader": "^6.4.1", "babel-plugin-react-transform": "^2.0.2", "babel-plugin-syntax-dynamic-import": "^6.18.0", "babel-plugin-transform-decorators-legacy": "^1.3.4", "babel-plugin-transform-runtime": "^6.23.0", "babel-polyfill": "^6.16.0", "babel-preset-es2015": "^6.24.1", "babel-preset-latest": "^6.16.0", "babel-preset-react": "^6.16.0", "babel-preset-react-hmre": "^1.1.1", "babel-preset-stage-0": "^6.16.0", "babel-preset-stage-1": "^6.16.0", "babel-preset-stage-2": "^6.17.0", "babel-preset-stage-3": "^6.17.0", "bundle-loader": "^0.5.5", "bundlesize": "^0.6.1", "classnames": "^2.2.5", "colors-cli": "^1.0.8", "compression": "^1.6.2", "copy-webpack-plugin": "^4.0.1", "css-loader": "^0.22.0", "eslint": "^1.9.0", "eslint-config-airbnb": "0.1.0", "eslint-plugin-react": "^3.2.3", "expect": "^1.12.0", "express": "^4.15.2", "extract-text-webpack-plugin": "^2.1.0", "file-loader": "^0.8.4", "html-webpack-plugin": "^2.28.0", "http-proxy-middleware": "^0.17.4", "image-webpack-loader": "^3.1.0", "imports-loader": "^0.6.4", "jasmine-core": "^2.3.4", "jest": "^19.0.2", "jest-runtime": "^19.0.2", "json-loader": "^0.5.4", "jsx-html-class": "^1.0.3", "less": "^2.7.1", "less-loader": "^2.2.2", "open": "0.0.5", "open-browser-webpack-plugin": "0.0.5", "postcss-loader": "^0.7.0", "react-test-renderer": "^15.4.2", "react-transition-group": "^1.1.1", "redux-logger": "^2.8.2", "redux-promise": "^0.5.3", "redux-thunk": "^2.2.0", "style-loader": "^0.13.0", "url-loader": "^0.5.6", "webpack": "^2.6.1", "webpack-bundle-analyzer": "^2.8.2", "webpack-dashboard": "^1.0.0-5", "webpack-dev-server": "^2.4.5" }, "dependencies": { "babel-runtime": "^6.23.0", "css-constructor": "^0.1.7", "dateformat": "^2.0.0", "dateformat-util": "^1.0.5", "fastclick": "^1.0.6", "history": "^4.6.1", "moment": "^2.18.1", "prop-types": "^15.5.4", "react": "^15.5.4", "react-dom": "^15.5.4", "react-hot-loader": "^3.0.0-beta.7", "react-redux": "^5.0.4", "react-router": "^4.0.0", "react-router-dom": "^4.0.0", "react-router-redux": "^4.0.8", "redux": "^3.6.0", "redux-devtools-extension": "^2.13.0" } }

`var path = require('path'); var color = require('colors-cli'); //控制台颜色 var DateFormat = require('dateformat-util'); //生成构建时间 var webpack = require('webpack'); //webpack如何全局加载第三方插件可以使用webpack官方的ProvidePlugin const AssetsPlugin = require('assets-webpack-plugin') //在生成代码时生成一个 json 文件,其中包含了源文件和打包结果的对应关系 const HtmlWebpackPlugin = require('html-webpack-plugin'); //加载html模板 var ExtractTextPlugin = require('extract-text-webpack-plugin'); //引入css 单独打包插件 var OpenBrowserPlugin = require('open-browser-webpack-plugin'); //webpack 启动后自动打开浏览器 var argv = require('yargs').argv; //可以用来开发自己的命令行工具集合 var CopyWebpackPlugin = require('copy-webpack-plugin'); //自动复制文件 /*webpack可视化 :http://www.cnblogs.com/parry/p/webpack2-Statistics.html https://webpack.github.io/analyse/ https://chrisbateman.github.io/webpack-visualizer/ https://alexkuz.github.io/webpack-chart/

• */ var Dashboard = require('webpack-dashboard'); const DashboardPlugin = require('webpack-dashboard/plugin'); var dashboard = new Dashboard();

var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

const PORT = 12306; //测试环境配置自定义本地端口 const pro_sourceMap = false; //控制生产环境sourceMap

//判断当前运行环境是开发模式还是生产模式 const nodeEnv = process.env.NODE_ENV || 'development'; //默认是测试环境 const isPro = nodeEnv === 'production';

console.log(color.red("\n当前运行环境：" + (isPro ? 'production' : 'development') + " 构建时间：" + (DateFormat.format(new Date()))) + '\n');

var plugins = [ new ExtractTextPlugin({ //设置生成css 的路径和文件名，会自动将对应entry入口js文件中引入的CSS抽出成单独的文件 filename: 'css/[name].[hash:7].css' }), new webpack.optimize.CommonsChunkPlugin({ //提供公共的依赖模块 names: ['app','vendor','lodash'], minChunks: function (module) { // 该配置假定你引入的 vendor 存在于 node_modules 目录中 / //https://github.com/dwqs/blog/issues/52 new webpack.optimize.CommonsChunkPlugin({ name: "vendor", minChunks: ({resource}) => { resource && resource.indexOf('node_modules') && resource.match(/.js$/) } }), / return module.context && module.context.indexOf('node_modules') !== -1; } }), new webpack.DefinePlugin({ // 定义全局变量 'process.env': { 'NODE_ENV': JSON.stringify(nodeEnv) } }), new webpack.ProvidePlugin({ //将jquery暴露给所有模块，其它模块不用再显式require('jquery')了；只要模块的代码中出现了$，webpack就会自动将jQuery注入。 // $: 'jquery' }), new HtmlWebpackPlugin({ //动态命名导出文件 http://www.chardlau.com/2017/05/31/split-webpack-configuration/ title: 'Raect-Redux 脚手架工具', template: path.resolve(dirname, './src/index.html'), filename: 'index.html', minify: { minifyJS: true, //压缩js minifyCSS: true, //压缩css removeComments: true,//删除注释 collapseWhitespace: true//删除空格 } }), new webpack.BannerPlugin("appver：" + DateFormat.format(new Date())), //作用是给输出文件最顶部添加最后一次构建时间appver new CopyWebpackPlugin([ //文件夹移动 { //http://blog.csdn.net/zaichuanguanshui/article/details/53611379[] from: path.resolve(dirname, './package.json'), //定义要拷贝的源目录 from: dirname + ‘/src/public’ to: path.resolve(dirname, './dist'), //定义要烤盘膛的目标目录 from: __dirname + ‘/dist’ force: true, //强制覆盖先前的插件 可选 默认false toType: 'dir', //file 或者 dir 文件还是文件夹 ， 可选，默认是文件 ignore: ['.*'] //忽略拷贝指定的文件 可以用模糊匹配 } ]) ] var app = ['./index'] //单入口 if (isPro) { //生产环境 plugins.push(
new webpack.optimize.UglifyJsPlugin({ //排除了不需要压缩的node_modules部分，同时我们去除了comments部分(comments为@license等注释，是可观的压缩空间)。再次在终端输入打包命令，可见js打包后的体积有令人满意的减小。 sourceMap: pro_sourceMap, beautify: false, comments: false, exclude:['/node_modules/'], compress: { warnings: false, drop_console: true, collapse_vars: true, reduce_vars: true }, output:{ comments:false } }), new AssetsPlugin() ) } else { //测试环境 app.unshift('react-hot-loader/patch', 'webpack-dev-server/client?http://localhost:' + PORT, 'webpack/hot/only-dev-server') plugins.push( new webpack.HotModuleReplacementPlugin(), new webpack.NamedModulesPlugin(), new webpack.NoEmitOnErrorsPlugin(), new OpenBrowserPlugin({ url: 'http://localhost:' + PORT }), //自动打开浏览器 new BundleAnalyzerPlugin(), new DashboardPlugin(dashboard.setData) ) }

module.exports = { / 基础目录，绝对路径，用于从配置中解析入口起点(entry point)和加载器(loader) / context: path.resolve(__dirname, 'src'), devtool: isPro ? 'source-map' : 'cheap-module-source-map', entry: { //会生成一个app.js app: app, lodash: ['lodash'], vendor:['react-dom','react','redux','react-router','react-router-dom','react-router-redux'] }, output: { // filename: "bundle.min.js", // filename: "[name].js", // 用于多个入口点(entry point)（出口点？） // filename: "[chunkhash].js", // 用于长效缓存

    filename: 'js/[name].[hash:7].js',   //输出文件规则： filename: "bundle.js",   filename: "[chunkhash].js",
    path: path.resolve(__dirname, 'dist'),    //必须是绝对路径（使用 Node.js 的 path 模块）测试环境生成一个dist虚拟目录
    publicPath: '/'
},
// BASE_URL是全局的api接口访问地址
plugins,
// alias是配置全局的路径入口名称，只要涉及到下面配置的文件路径，可以直接用定义的单个字母表示整个路径

//其它解决方案配置
resolve: {
    //查找module的话从这里开始查找
    //root: '/', //绝对路径,暂时不用
    //自动扩展文件后缀名，意味着我们require模块可以省略不写后缀名
    extensions: ['.js', '.jsx', '.less', '.scss', '.css', 'png', 'jpg', 'jpeg'],   // webpack2 不再需要一个空的字符串
    modules: [
        path.resolve(__dirname, 'node_modules'),
        path.join(__dirname, './src')
    ],
    alias: {   //模块别名定义，方便后续直接引用别名，无须多写长长的地址
       /*  http://www.cnblogs.com/vajoy/p/4650467.html
        alias: {   
            AppStore : 'js/stores/AppStores.js',       //后续直接 require('AppStore') 即可
            ActionType : 'js/actions/ActionType.js',
            AppAction : 'js/actions/AppAction.js'
        }
       */
      '@':path.join(__dirname, './', 'src'),     //设置相对路径，参考Vue脚手架  @相当于./src/...
      'Local':path.join(__dirname, './', './src/components/Local/index'),     //设置相对路径，参考Vue脚手架  @相当于./src/...
      'Dialog': path.join(__dirname, './src/components/Global/Dialog'),//Dialog组件
      'Loading': path.join(__dirname, './src/components/Global/loading'),//loading组件
      'btn': path.join(__dirname, './src/components/Global/btn'),//按钮组件
      'banner': path.join(__dirname, './src/components/Global/banner'),//banner组件
      'alert': path.join(__dirname, './src/components/Global/alert'),//alert组件
      'inputGroup': path.join(__dirname, './src/components/Global/inputGroup'),//inputGroup组件
      'input': path.join(__dirname, './src/components/Global/input'),//input组件
      'image': path.join(__dirname, './src/components/Global/image'),//image组件
      'checkbox': path.join(__dirname, './src/components/Global/checkbox'),//checkbox组件
      'getPage': path.join(__dirname, './src/components/Global/GetPage.js'),//getPage
      'getData': path.join(__dirname, './src/components/Global/GetData.js'),//getData
      'getInput': path.join(__dirname, './src/components/Global/GetInput.js'),//getInput
      'getNextPage': path.join(__dirname, './src/components/Global/GetNextPage.js'),//getNextPage
      'roll': path.join(__dirname, './src/components/Global/roll'),//roll组件
      'publicJs': path.join(__dirname, './src/lib/public.js'),//公共js
      'session': path.join(__dirname, './src/lib/session.js'),//session
      'verticalRoll': path.join(__dirname, './src/components/Global/verticalRoll'),//垂直roll组件
      'accordion': path.join(__dirname, './src/components/Global/accordion'),//可折叠
    }
},

module: {
    rules: [{
        test: /\.(js|jsx)$/,
        exclude: /(node_modules|bower_components)/,
        use: {
            loader: 'babel-loader?cacheDirectory=true'
        }
    }, {
        test: /\.(less|css)$/,
        use: ExtractTextPlugin.extract({   //开启css压缩
            use: [{loader: "css-loader", options: {minimize: true}}, "less-loader", "postcss-loader"]
        })
    }, {
        test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
        use: [
            'url-loader?limit=10240&name=img/[name].[hash:7].[ext]'
        ]
    }, {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        use: [ //设置字体生成文件夹
            'url-loader?limit=10240&name=font/[name].[hash:7].[ext]'
        ]
    }, {
        test: /\.json$/,
        use: 'json-loader'
    }
    ]
},
devServer: {
    inline:true,  //不使用inline模式,inline模式一般用于单页面应用开发，会自动将socket注入到页面代码中
    hot: true,
    host: '127.0.0.1',
    quiet: true,
    contentBase: path.resolve(__dirname, 'dist'),  //content-base就是 codeResource -需要监听源码
    publicPath: '/',
    port: PORT
}

};`

[ryan-roemer]

Thanks for the issue! Can you convert the files / examples in this issue into a real sample project repository with steps to reproduce the problem, so that we can see for ourselves what's going on?

See this great example (https://github.com/FormidableLabs/webpack-dashboard/issues/189#issue-254846767) for how to create a reproduction for us over in diagnosis-land.

Thanks!

[ryan-roemer]

Closing as we need a full reproduction / more information to go forward.

If you're still encountering this issue, please try upgrading webpack-dashboard. If that doesn't solve the problem, then please create a sample repository with reproduction steps to enable us to see the issue.

See this great example (https://github.com/FormidableLabs/webpack-dashboard/issues/189#issue-254846767) for how to create a reproduction for us over in diagnosis-land.