Giter VIP home page Giter VIP logo

Comments (13)

aemoe avatar aemoe commented on September 24, 2024 1

@cwtuan
OK ~ This is my webpack config.

/**
  加载常用模块及Webpack需要的模块组件
**/
//加载Node的Path模块
const path = require('path'),
  //加载Node的fs模块
  fs = require('fs'),
  //加载webpack模块
  webpack = require('webpack'),
  //加载自动化css独立加载插件
  ExtractTextPlugin = require('extract-text-webpack-plugin'),
  //加载自动化HTML自动化编译插件
  HtmlWebpackPlugin = require('html-webpack-plugin'),
  autoprefixer = require('autoprefixer'),
  precss = require('precss'),
  postcsseasysprites = require('postcss-easysprites'),
  //加载JS模块压缩编译插件
  UglifyJsPlugin = webpack.optimize.UglifyJsPlugin,
  //加载公用组件插件
  CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin
  //加载公共json配置
  configJson = require('../config.json');

/**
  设置默认常用路径
**/
//srcDir为当前开发目录(默认:/src)
const srcDir = path.resolve(process.cwd(), 'src'),
  //assetsDir为当前建立目录(默认:/assets)
  assetsDir = path.resolve(process.cwd(), '../Frontend'),
  //读取入口的js文件目录(本目录只能对应页面的入口的JS,其他脚本需要写在/dist/plugins中)
  jsEntryDir = path.resolve(srcDir, 'dist/js'),
  //生成JS的目录地址(默认:)
  jsDir = 'dist/js/',
  //生成css的目录地址(默认:)
  cssDir = 'dist/css/';
  //载入默认配置

const config = {
  devtool: 'source-map',
  entry: {
    index: './src/index.js',
    vendor: [
      'react',
      'react-dom',
      'redux',
      'react-redux',
      'react-router-dom',
      'axios',
      'lodash',
      'react-paginate',
      'prop-types',
      'react-scrollbar',
      'validator',
      'redux-form',
      'redux-logger',
      'redux-thunk',
      'moment',
      'jquery'
    ]
  },
  output: {
    path: assetsDir,
    filename: jsDir + '[name].js',
    publicPath: configJson.publicPath
  },
  module: {
    //加载器配置
    rules: [
      {
        test: /\.css$/,
        include: [path.resolve(srcDir, cssDir)],
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            {
              loader: "css-loader",
              options: {
                modules: true,
                camelCase: true,
                localIdentName: "[name]_[local]_[hash:base64:3]",
                importLoaders: 1,
                sourceMap: true
              }
            }, {
              loader: "postcss-loader",
              options: {
                sourceMap: true,
                plugins: () => [
                  precss(),
                  autoprefixer({
                    browsers: ['last 3 version', 'ie >= 10']
                  }),
                  postcsseasysprites({imagePath: '../img', spritePath: './assets/dist/img'})
                ]
              }
            }
          ]
        })
      }, {
        test: /\.css$/,
        exclude: [path.resolve(srcDir, cssDir)],
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            {
              loader: "css-loader",
              options: {
                importLoaders: 1,
                sourceMap: true
              }
            }, {
              loader: "postcss-loader",
              options: {
                sourceMap: true,
                plugins: () => [
                  precss(),
                  autoprefixer({
                    browsers: ['last 3 version', 'ie >= 10']
                  }),
                  postcsseasysprites({imagePath: '../img', spritePath: './assets/dist/img'})
                ]
              }
            }
          ]
        })
      }, {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "babel-loader"
          }
        ]
      }, {
        test: /\.(png|jpeg|jpg|gif|svg|eot|woff|ttf|woff2)$/,
        use: [
          {
            loader: "file-loader",
            options: {
              name: 'dist/img/[name].[ext]'
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new webpack.ProvidePlugin({
      $:"jquery",
      jQuery:"jquery",
      "window.jQuery":"jquery"
    }),
    new ExtractTextPlugin('dist/css/style.css'),
    new webpack.DefinePlugin({
      "process.env": {
        NODE_ENV: JSON.stringify("production")
      }
    }),
    new HtmlWebpackPlugin({
      template: 'src/index.html',
      inject: true,
      hash: true,
      minify: {
        removeComments: true,
        collapseWhitespace: false
      },
      chunks: [
        'index', 'vendor', 'manifest'
      ],
      filename: 'app.html'
    }),
    new webpack.optimize.CommonsChunkPlugin({
      names: [
        'vendor', 'manifest'
      ],
      filename: jsDir + '[name].js'
    }),
    new UglifyJsPlugin({
      // 最紧凑的输出
      beautify: true,
      // 删除所有的注释
      comments: true,
      compress: {
        // 在UglifyJs删除没有用到的代码时不输出警告
        warnings: true,
        // 删除所有的 `console` 语句
        // 还可以兼容ie浏览器
        drop_console: false,
        // 内嵌定义了但是只用到一次的变量
        collapse_vars: true,
        // 提取出出现多次但是没有定义成变量去引用的静态值
        reduce_vars: true
      }
    }),
    new webpack.NoEmitOnErrorsPlugin()
  ]
};

module.exports = config;

from react-intl-universal.

aemoe avatar aemoe commented on September 24, 2024

I do not know why if I use react-intl-universal/lib/ js file is no problem,
but I import this packbag have some problem.

from react-intl-universal.

cwtuan avatar cwtuan commented on September 24, 2024

Could you show more detail of your wekpack config?

from react-intl-universal.

aemoe avatar aemoe commented on September 24, 2024

@cwtuan 是呀 好奇怪 好像intal里面的local数据也被打包进去了 然后就突然特别大 不知道为什么好奇怪

from react-intl-universal.

cwtuan avatar cwtuan commented on September 24, 2024

I had reproduced this issue in webpack 3. And working on solving it.

from react-intl-universal.

aemoe avatar aemoe commented on September 24, 2024

@cwtuan thank u very much~

from react-intl-universal.

feicong666 avatar feicong666 commented on September 24, 2024

嗯,我也遇到了一样的问题,打包出来有20多M,删掉这个主键就正常了

from react-intl-universal.

aemoe avatar aemoe commented on September 24, 2024

@feicong666 麻烦问下是怎么解决的~

from react-intl-universal.

liuzhuonan avatar liuzhuonan commented on September 24, 2024

The webpack decides whether to package a component based on dependencies. This should be the place to control the packaging of Locale-data (18M), but it does not work in webpack3.

at intl/index.js

  // Require all locale data for `Intl`. This module will be
  // ignored when bundling for the browser with Browserify/Webpack.
  // require('./locale-data/complete.js');

from react-intl-universal.

liuzhuonan avatar liuzhuonan commented on September 24, 2024

Here to determine isBrowser, in the case of false will quote lodale-data, comment out just fine.

at react-intl-universal/lib/index.js

       if (isBrowser) {
              if (isPolyfill) {
                load(SYS_LOCALE_DATA_URL + "/" + lang + ".js", function (err, script) {
                  if (err) {
                    reject(err);
                  } else {
                    resolve();
                  }
                });
              } else {
                resolve();
              }
            } else {
              require("intl/locale-data/jsonp/" + lang + ".js");
              resolve();
            }

from react-intl-universal.

aemoe avatar aemoe commented on September 24, 2024

@liuzhuonan
The isBrowser option in Webpack 3.0 is does't work .
Thx~

from react-intl-universal.

Slice-dd avatar Slice-dd commented on September 24, 2024

这个问题解决了么

from react-intl-universal.

cwtuan avatar cwtuan commented on September 24, 2024

@aemoe @feicong666 @liuzhuonan @Slice-dd @zhuzhaoyuan
Please upgrade to v1.3.4 to fix build issue.

from react-intl-universal.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.