This is my file webpack.config.js . Although I added ['react-hot' ,'babel']. But can resolve it.
var webpack = require('webpack');
var path = require('path');
var APP_DIR = path.resolve(__dirname, 'client/');
var devFlagPlugin = new webpack.DefinePlugin({
__DEV__: JSON.stringify(JSON.parse(process.env.DEBUG || 'true'))
});
var config = {
cache: true,
devtool: 'eval', // 'source-map', 'eval'
entry: [
'webpack-dev-server/client?http://localhost:3000/',
'webpack/hot/only-dev-server',
'./client/app.jsx'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/static/'
},
resolve: {
extensions: ['', '.js', '.jsx']
},
module: {
loaders: [
{
test: /\.jsx?$/,
include: path.join(__dirname, 'client'),
exclude: /node_modules/,
loader: ['react-hot' ,'babel'],
query: {
cacheDirectory: true,
presets: ['react', 'es2015']
}
},
{
test: /\.scss$/,
loaders: ["style", "css", "sass"]
},
{
test: /\.(jpe?g|png|gif|jpg|svg)$/i,
loaders: [
'file?images/hash=sha512&digest=hex&name=../build/img/[hash].[ext]',
'image-webpack?{optimizationLevel: 9, interlaced: false, pngquant:{quality: "65-90", speed: 4}, mozjpeg: {quality: 65}}'
]
},
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
loader: 'file?name=../build/fonts/[name].[ext]'
}
]
},
sassLoader: {
includePaths: [path.resolve(__dirname, "./client/assets/css/")]
},
plugins: [
devFlagPlugin,
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: true
},
output: {
comments: true,
}
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
]
}
module.exports = config;
I believe your problem is you need to use babel-preset-react-hmre in order for it to work properly. More info here here.
For example
{
test: /\.jsx?$/,
include: path.join(__dirname, 'client'),
exclude: /node_modules/,
loader: ['react-hot' ,'babel'],
query: {
cacheDirectory: true,
presets: ['react', 'es2015', 'react-hmre']
}
},
Related
I have a react project that was created by CRA. Now i installed webpack because i wanted to add Jquery into config. Now I am getting this error after initializing webpack:
Could someone help me?
cli image
Webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const InterpolateHtmlPlugin = require('interpolate-html-plugin');
module.exports = {
entry: "./src/index.js",
output: {
path: __dirname + "/dist",
filename: "./bundle.js",
},
mode: 'development',
devServer: {
port: 3000,
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env','#babel/react'],
plugins: ['#babel/proposal-class-properties', '#babel/plugin-proposal-object-rest-spread', '#babel/plugin-syntax-dynamic-import']
}
}
},
{ test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader' },
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
}
],
},
resolve: {
extensions: ['*', '.js', '.jsx']
},
plugins: [
new HtmlWebpackPlugin({
template: "./dist/index.html",
filename: './index.html',
favicon: './dist/favicon.ico'
}),
new InterpolateHtmlPlugin({
PUBLIC_URL: 'static' // can modify `static` to another name or get it from `process`
})
],
};
.babelrc
{
"presets": [
"#babel/preset-env",
"#babel/preset-react"
]
}
please help
I've recently developed a react + webpack application that is deployed using
AWS Amplify. I've been getting a strange error that is logged on Sentry, but can't
find a way to replicate the bug.
RuntimeError: memory access out of bounds
I suspect it has something to do with my webpack configuration, but I don't know whats wrong.
I never used wasm, but it seems to be related to it.
Here is my production level webpack configuration.
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const env = require('../environment/prod.env');
const commonPaths = require('./paths');
const webpack = require('webpack');
const SentryWebpackPlugin = require('#sentry/webpack-plugin');
module.exports = {
mode: 'production',
devtool: 'source-map',
output: {
filename: `${commonPaths.jsFolder}/[name].[hash].js`,
path: commonPaths.outputPath,
chunkFilename: `${commonPaths.jsFolder}/[name].[chunkhash].js`,
},
optimization: {
minimizer: [
new TerserPlugin({
parallel: true,
cache: true,
sourceMap: true,
}),
new OptimizeCSSAssetsPlugin(),
],
splitChunks: {
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
chunks: 'initial',
},
async: {
test: /[\\/]node_modules[\\/]/,
name: 'async',
chunks: 'async',
minChunks: 4,
},
},
},
runtimeChunk: true,
},
module: {
rules: [
{
test: /\.scss$/,
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader',
options: {
sourceMap: true,
},
},
{
loader: 'sass-loader',
options: {
sourceMap: true,
},
},
],
},
{
test: /\.css$/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
options: {
sourceMap: true,
},
},
],
},
],
},
plugins: [
new webpack.DefinePlugin({
'process.env': env,
}),
new MiniCssExtractPlugin({
filename: `${commonPaths.cssFolder}/[name].css`,
chunkFilename: `${commonPaths.cssFolder}/[name].css`,
}),
],
};
Here is also my common webpack configuration
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin');
const commonPaths = require('./paths');
module.exports = {
context: commonPaths.srcPath,
entry: commonPaths.entryPath,
output: {
path: commonPaths.outputPath,
filename: 'js/[name].js',
},
resolve: {
extensions: ['.ts', '.js', '.html', '.vue'],
alias: {
'~': commonPaths.srcPath,
},
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
include: commonPaths.srcPath,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
plugins: ['react-hot-loader/babel'],
},
},
{
test: /\.(png|jpg|gif|svg)$/,
use: [
{
loader: 'file-loader',
options: {
name: 'assets/img/[name].[hash:8].[ext]',
publicPath: '/',
},
},
],
},
{
test: /\.(mp3)$/,
use: [
{
loader: 'file-loader',
options: {
name: 'assets/audio/[name].[hash:8].[ext]',
publicPath: '/',
},
},
],
},
{
test: /\.(ttc|ttf|eot)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
use: [
{
loader: 'file-loader',
options: {
name: 'assets/fonts/[name].[hash:8].[ext]',
publicPath: '/',
},
},
],
},
],
},
serve: {
content: commonPaths.entryPath,
dev: {
publicPath: commonPaths.outputPath,
},
open: true,
},
resolve: {
modules: ['src', 'node_modules', 'bower_components', 'shared', '/shared/vendor/modules'],
extensions: ['*', '.js', '.jsx'],
},
plugins: [
new webpack.ProgressPlugin(),
new HtmlWebpackPlugin({
favicon: './icon.png',
template: commonPaths.templatePath,
}),
new ScriptExtHtmlWebpackPlugin({
defaultAttribute: 'async',
}),
],
};
Any help would really help. Thanks.
Try to restart your server and make sure you reinstall node modules.
Solved:
devtool: '#eval-source-map'
Includes a source map in the output
Original issue
As stated, the webpack build produces an enormous bundle/vendor file with Vue as my only import. I cannot see for the life of me how people get it down to 80kb.
As far as I can see, there is a vue-loader and the file gets minified, so why would it come out enormous?
var path = require('path') var webpack = require('webpack')
module.exports = { entry: './src/main.js', output: {
path: path.resolve(__dirname, './static'),
publicPath: '/static/',
filename: 'js/login-view.js' }, module: {
rules: [
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
],
}, {
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]',
useRelativePath: true,
publicPath: './static/images/'
}
}
] }, resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
},
extensions: ['*', '.js', '.vue', '.json'] }, devServer: {
historyApiFallback: true,
noInfo: true,
overlay: true }, performance: {
hints: false }, devtool: '#eval-source-map' }
if (process.env.NODE_ENV === 'production') { // module.exports.devtool = '#source-map' // http://vue-loader.vuejs.org/en/workflow/production.html module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: false,
// compress: true,
compress: {
warnings: false
},
mangle: true,
}),
new webpack.LoaderOptionsPlugin({
minimize: true
}) ]) }
devtool: '#eval-source-map'
was the culprit. It was getting included in all builds and it puts the sourcemap in the files. I removed this and dropped the file to ~90kb.
Could someone please help me with my issue. In one of the source files I use code splitting technique
const Home = resolve => require(['./views/Home.vue'], m => resolve(m.default)), the problem is that unless I set publicPath output option to '/js', the chunks generated by code spliting omit / and on load are requested as jsfb5715f933a55e481dbe.2.js, the entry points are working and requested properly with at '/js/' or '/css/' without any issue. It is only the chunks generated by code splitting are failing to prepend '/' between public path and filename. This is my config
const webpack = require('webpack')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const path = require('path')
const extractScss = new ExtractTextPlugin({
filename: 'css/[name].css'
})
const sassOpt = {
sourceMap: true,
includePaths: [
path.resolve(__dirname, 'vendor/zurb/foundation/scss'),
path.resolve(__dirname, 'node_modules/motion-ui/src'),
path.resolve(__dirname, 'resources/assets/sass'),
path.resolve(__dirname, 'resources/assets/sass/libs/animate.scss')
]
}
module.exports = {
context: path.resolve(__dirname, 'resources/assets'),
entry: {
main: [
'babel-polyfill',
'webpack/hot/dev-server',
// ?reload=true enables full page reload on hmr failure
'webpack-hot-middleware/client?reload=true',
'./js/app'
],
elastic: [
'./js/lib/elasticsearch-plugin'
]
},
output: {
path: path.resolve(__dirname, 'public'),
filename: '[name].chunk.js',
chunkFilename: '[chunkhash].[id].js',
publicPath: '/',
pathinfo: true
},
devtool: 'eval',
module: {
rules: [
{
enforce: 'pre',
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules|vue\/src/,
options: {
appendTsSuffixTo: [/\.vue$/]
}
},
{
enforce: 'pre',
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015'],
plugins: ['lodash']
}
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
esModule: true,
loaders: {
scss: 'vue-style-loader!css-loader?sourceMap=true!sass-loader?' + JSON.stringify(sassOpt)
}
}
},
{
test: /\.s[a|c]ss$/,
use: extractScss.extract(['css-loader?sourceMap=true', 'sass-loader?' + JSON.stringify(sassOpt)])
}
]
},
resolve: {
extensions: ['.ts', '.js', '.vue']
},
plugins: [
extractScss,
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin()
]
}
Building my ES6 react project under OSX El Capitan using Webpack is a breeze. Something very weird happens when I do the same build on our pre-production environment, the built file comes out like this:
webpackJsonp([0],{102:function(module,exports,__webpack_require__) ...
...
var _createClass=function(){
function defineProperties(target,props){
for(;0<props.length;0++){
...
}
...
}
...
Take particular note of that for loop: for(;0<props.length;0++). That is very broken. What am I doing wrong? My config from UglifyJSPlugin:
new webpack.optimize.UglifyJsPlugin({
comments: false,
mangle: false,
compress: {
warnings: false
}
})
Any help would be very much appreciated.
Full Webpack Config:
module.exports = {
entry: {
isearch: 'components/isearch/index.js',
reactbundle: ['react', 'react-dom', 'whatwg-fetch', 'debounce-promise', 'deep-assign', 'redux', 'react-redux']
},
output: {
publicPath: '/assets/components/',
filename: '[name].js'
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.scss$/,
exclude: /node_modules/,
use: [
{ loader: 'style-loader', options: { includePaths: [] } },
{ loader: 'css-loader', options: { includePaths: [], modules: false } },
{ loader: 'sass-loader', options: { includePaths: [] } }
]
},
{
test: /\.gif$/,
exclude: '/node_modules/',
use: [{ loader: 'file-loader', options: { name: '[path][name].[hash].[ext]', context: 'react' } }]
}
]
},
resolve: { extensions: ['.js', '.jsx', '.scss'] },
devtool: 'cheap-module-source-map',
plugins: [
new CleanWebpackPlugin(['components'], {
root: path.resolve(__dirname, '../../public/assets'),
verbose: true,
dry: false
}),
new webpack.optimize.CommonsChunkPlugin('reactbundle'),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production')
}
}),
new webpack.optimize.UglifyJsPlugin({
comments: false,
mangle: false,
compress: {
warnings: false
}
})
]
};
Build Environment on which this fails: Ubuntu 12.04.5 LTS