Closed libin1991 closed 6 years ago
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!
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.
{ "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 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", // 用于长效缓存
};`