Comments (13)
@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.
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.
Could you show more detail of your wekpack config?
from react-intl-universal.
@cwtuan 是呀 好奇怪 好像intal里面的local数据也被打包进去了 然后就突然特别大 不知道为什么好奇怪
from react-intl-universal.
I had reproduced this issue in webpack 3. And working on solving it.
from react-intl-universal.
@cwtuan thank u very much~
from react-intl-universal.
嗯,我也遇到了一样的问题,打包出来有20多M,删掉这个主键就正常了
from react-intl-universal.
@feicong666 麻烦问下是怎么解决的~
from react-intl-universal.
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.
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.
@liuzhuonan
The isBrowser option in Webpack 3.0 is does't work .
Thx~
from react-intl-universal.
这个问题解决了么
from react-intl-universal.
@aemoe @feicong666 @liuzhuonan @Slice-dd @zhuzhaoyuan
Please upgrade to v1.3.4 to fix build issue.
from react-intl-universal.
Related Issues (20)
- {days, plural, zero {# يوم} one {# يوم} two {# أيام} few {# أيام} many {# يوم} other {# يوم}} 这种应该怎么写 HOT 1
- 请问最新版本能完全兼容1.3.4版本吗? HOT 1
- getHTML实际返回 React.Element 类型 但是typings 中定义的返回string类型
- intl.getHTML不兼容ts
- Is there any examples with Nextjs HOT 3
- Performance problems of get method HOT 2
- intl type hints
- [object Object] react value HOT 2
- 在使用 react-intl-universal-extract 时遇到 has no default message HOT 1
- The problems in the example
- cache HOT 1
- Typescript moduleResolution Bundler does not work properly in combination with strict true HOT 1
- Need for output locale key to UI
- Nextjs: Overusing intl.init() function HOT 5
- 关于如何动态加载多语言文件
- The options.locale may be readonly Module
- 请问 nexjs 怎么实现? 急急急!
- 请问在taro中怎么使用 HOT 2
- Dependencies update HOT 1
- Message with variable is not working HOT 8
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-intl-universal.