I have been able to work with styled-components on webpack dev server without any problem but the styles are not getting added when building the project for production with webpack -p --progress --colors or running webpack -d --progress --colors --watch
The only style added in production is an empty style
<style data-styled="" data-styled-version="4.4.1"></style>
in the webpack.config.js i have the following rules that is running for both dev and production:
module: {
rules: [
{
test: /\.js?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-0'],
plugins: ['react-html-attrs', 'transform-decorators-legacy', 'transform-class-properties'],
}
},
]
},
Plugins, note that debug is used to if is production build
plugins: debug ? [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, 'template.html')
})
] : [
new webpack.DefinePlugin({
"process.env": {
NODE_ENV: JSON.stringify("production"),
},
}),
new CleanWebpackPlugin(),
new webpack.optimize.OccurrenceOrderPlugin(),
new UglifyJsPlugin(),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, 'template.html')
})
],
dev server settings:
devServer: {
contentBase: BUILD_DIR,
historyApiFallback: true,
watchContentBase: true,
port: 9000
},
do you have a global style created with createGlobalStyle that contains a css #import? Removing the import from my site just fixed the issue for me. (sounds like the same issue).
https://github.com/styled-components/styled-components/issues/2911#issuecomment-592012166
Related
I am trying to setup the environment so that when i choose to run prod it runs the prod settings and when i choose to run dev it runs the dev server, currently my package.json scrips look like this :
"scripts": {
"build:dev": "cross-env NODE_ENV=developement webpack",
"build:prod": "cross-env NODE_ENV=production webpack",
"start:dev": "cross-env NODE_ENV=developement webpack-dev-server ",
"start:prod": "cross-env NODE_ENV=production webpack-dev-server "
},
webpack config file:
const webpack = require("webpack");
const path = require("path");
const dotenv = require("dotenv");
module.exports = {
//Entry file for webpack.config
entry: "./src/index.js",
//Target specific use of project ie. nodejs project we use node value
target: process.env.NODE_ENV === "dev" ? "node" : "web",
//Dev server meant for hosting local server for developement
devServer: {
contentBase: path.resolve(__dirname, "public"),
historyApiFallback: true,
port: 8080,
},
//Modules are used to set rules to build specific file types
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: [
{
loader: "babel-loader",
options: {
presets: ["#babel/env", "#babel/react"],
plugins: [
"#babel/plugin-transform-runtime",
"#babel/plugin-proposal-class-properties",
],
},
},
],
},
{
test: /\.(png|jpe?g|gif)$/i,
loader: 'file-loader',
options: {
name: '[path][name].[ext]',
},
},
{
test: /\.(css|sass|scss)$/,
use: [
"style-loader",
{
loader: "css-loader",
options: {
sourceMap: true,
importLoaders: 2,
},
},
{
loader: "sass-loader",
options: {
sourceMap: true,
},
},
],
},
{
test: /\.svg$/,
use: [
{
loader: "svg-inline-loader",
options: {
limit: 10000,
},
},
],
},
{
test: /\.tsx?$/,
use: "ts-loader",
exclude: /node_modules/,
},
],
},
externals: {
// require("jquery") is external and available
// on the global var jQuery
"jquery": "jQuery"
},
//Changes how modues are resolved
resolve: {
extensions: ["*", ".js", ".jsx", ".ts", ".tsx"],
},
//Output is setup to serve the bundle.js file to be served to web browser
output: {
path: path.resolve(__dirname, "public"),
filename: "bundle.js",
publicPath: "/",
},
//Prevent bundling of certain packages
externals: {
"react-native": true,
},
//A javascript object used to do various extra things for webpack
plugins: [
new webpack.DefinePlugin({
"process.env": JSON.stringify(dotenv.config().parsed),
}),
],
};
and i do:
console.log(process.env.NODE_ENV)
inside my homepage jsx, but everytime I run it even when i do yarn start:prod it console.logs development and not production, why is cross-env not successfully changing the NODE_ENV to production when i run this?
In order to copy env variable into webpack, you have to use webpack. DefinePlugin as you have done in your configuration file which looks like you're trying to copy all things into webpack.
Anyway if you want to use the value from cross-env, you would have do the same thing by using DefinePlugin plugin but input the specific value NODE_ENV as following:
webpack.config.js
{
// ...
plugins: [
// ...
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
}),
],
}
I need to use production build with Webpack. If I visit my site now in production icon is having red background which means it's not using production
When I do npm run build, it says npm ERR! missing script: build
How can I adjust webpack so I can make a production build and make my app faster?
Here is my webpack config:
const webpack = require('webpack');
const config = {
entry: ['babel-polyfill', './src/index.js'],
output: {
filename: 'bundle.js',
},
devServer: {
inline: true,
port: 8080,
historyApiFallback: true,
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
API_KEY: 'API_KEY',
GOOGLE_MAPS_KEY: 'GOOGLE_MAPS_KEY',
GOOGLE_GEOLOCATION_KEY: 'GOOGLE_GEOLOCATION_KEY',
},
}),
],
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react'],
},
},
{
test: /\.css$/,
loader: 'style!css',
},
],
},
};
module.exports = config;
plugins: [
new webpack.DefinePlugin({
'process.env': {
API_KEY: 'API_KEY',
GOOGLE_MAPS_KEY: 'GOOGLE_MAPS_KEY',
GOOGLE_GEOLOCATION_KEY: 'GOOGLE_GEOLOCATION_KEY',
NODE_ENV: JSON.stringify('production') // <--- this set everything to use production.
},
}),
],
i developed react app,before that i built same app on webpack v3 now i upgrade to v4.on v3 dev-server it worked fine but on v4 it is taking lot of time to build and every time its building whole project again(may be that's why)
my webpack.dev.js
const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
entry: './src/app.js',
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js'
},
devtool: 'inline-source-map',
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.s?css$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
sourceMap: true,
minimize:false,
importLoaders: 1,
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true
}
}
]
},{
test: /\.(gif|svg|jpg|png|ttf|eot|woff(2)?)(\?[a-z0-9=&.]+)?$/,
loader: "file-loader",
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: 'styles.css',
}),
new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html'
}),
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('development')
}
})
],
devServer: {
contentBase: path.join(__dirname, 'public'),
historyApiFallback: true,
host:'0.0.0.0',
disableHostCheck: true,
}
};
and my scripts in package.json
"scripts": {
"start": "node server/server.js",
"build": "webpack --mode production --config=webpack.prod.js",
"dev": "webpack --mode development --config=webpack.dev.js",
"dev-server": "webpack-dev-server --config=webpack.dev.js"
}
it showing me error
ou are currently using minified code outside of NODE_ENV === 'production'. This means that you are running a slower development build of Redux. You can use loose-envify (https://github.com/zertosh/loose-envify) for browserify or DefinePlugin for webpack (http://stackoverflow.com/questions/30030031) to ensure you have the correct code for your production build.
but if console my process.env.NODE_ENV varialbe it showing me developement
i have two problems with dev-server on development mode
1) how can i reduce time of rebuilding on dev-server
2)on development mode also why it showing me production error.
Your development server is being run in production mode because you haven't set the --mode development argument in your dev-server NPM script. It seems like it isn't required since webpack-dev-server is, after all, a development server, but the argument is still necessary.
"dev-server": "webpack-dev-server --mode development --config webpack.dev.js"
To speed up the build in development, inject all CSS into the HTML with style-loader instead of extracting the CSS to a separate file. See the following code where I removed mini-css-extract-plugin and its loader.
const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/app.js',
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js'
},
devtool: 'inline-source-map',
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: 'babel-loader'
},
{
test: /\.s?css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
sourceMap: true,
minimize:false,
importLoaders: 1,
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true
}
}
]
},
{
test: /\.(gif|svg|jpg|png|ttf|eot|woff(2)?)(\?[a-z0-9=&.]+)?$/,
loader: 'file-loader'
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html'
})
],
devServer: {
contentBase: path.join(__dirname, 'public'),
historyApiFallback: true,
host:'0.0.0.0',
disableHostCheck: true,
}
};
Building source maps will slow the build down as well, so consider if you truly need them.
The answer is: you are using the inline-source-map devtool which causes the build & rebuild process super slow.
According to the Official Webpack Document, they said:
Choose a style of source mapping to enhance the debugging process. These values can affect build and rebuild speed dramatically.
For more information, you could read it here: https://webpack.js.org/configuration/devtool/#devtool
Hopefully, that helps!
Adding caching to babel-loader can shave off some time:
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
cacheDirectory: true,
cacheCompression: false
}
}
]
}
https://github.com/babel/babel-loader#options
I have had the same issue and i completely remove source map for development and now is super-fast.My webpack.common.js file looks like this
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports = {
entry: './src/app.js',
output: {
filename: '[name].[hash].js',
path: path.resolve('./dist')
},
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
use: [{
loader: 'babel-loader'
},
{
loader: 'eslint-loader'
}]
}, {
test: /\.s?css$/,
use: [
{
loader: 'css-loader',
options: {
sourceMap: false
}
},
{
loader: 'sass-loader',
options: {
sourceMap: false
}
}
]
}]
},
optimization: {
minimize: true
},
plugins: [
new HtmlWebPackPlugin({
template: 'index.html'
}),
new CleanWebpackPlugin()
]
};
and my webpack.dev.js looks like this one
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
mode: 'development',
devServer: {
host: 'localhost',
disableHostCheck: true,
port: 3000,
open: true,
historyApiFallback: true
}
});
With this aproach we losing source-map in development and get fast at speed,if you really need source-mapping in dev-mode choose some light-weight source-map like cheap-eval-source-map and change it when you go in production build to inline-source-map because inline-source-map decreases dramatically size of main.js || bundle.js file.
I'm trying to understand the innings and outings of webpack and it's quirks.
So i've set up a project working with webpack 1(i know it's outdated, but for now it will work for my needs), that coupled with react and redux.
While developing and testing locally it works like a charm all is good. when i try to set it to production it all goes A-wire. when i try to access the app i get a famous
Uncaught SyntaxError: Unexpected token <
While inspecting the firefox dev console and chrome dev console i see that on the sources the the html file is there, but the bundle is not.
The bundle is generated on the corresponding folder, either while in development mode, or in production mode.
I've tried the adding adding a dot for relative path, removing the dot on the relative path, moving the location of the js bundle file around, setting it to async and still no solution.
Bellow are the webpack config for development and production.
Development webpack file structure
const webpack = require('webpack');
const path = require('path');
//const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: ['whatwg-fetch','./src/index.js'],
module: {
devtool: 'source-map',
loaders: [
{
test: /\.js?$/,
loader: 'babel',
exclude: /node_modules/
},
{
test:/\.jsx$/,
loader: 'babel',
exclude: /node_modules/,
},
{
test: /\.scss$/,
loader: 'style!css!sass'
},{
test: /\.css$/,
loader: "style-loader!css-loader"
},
{
test: /\.png$/,
loader: "url-loader?limit=100000"
},
{
test: /\.jpg$/,
loader: "file-loader"
},
{
test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&mimetype=application/font-woff'
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&mimetype=application/octet-stream'
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file'
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&mimetype=image/svg+xml'
}
]
},
resolve: {
extensions: ['', '.js','.jsx']
},
output: {
path: path.join(__dirname, '/dist'),
publicPath: '/',
filename: 'bundle.js'
},
devServer: {
contentBase: './dist',
hot: true
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
/* new CleanWebpackPlugin(['dist'], {
verbose: true,
dry: false,
exclude: ['index.html','server.bundle.js','dbFactory.js','httpService.js']
}) */
]
};
Webpack production file structure
const config = require('./webpack.config.js');
const webpack = require('webpack');
config.plugins.push(
new webpack.DefinePlugin({
"process.env": {
"NODE_ENV": JSON.stringify("production")
}
})
);
config.plugins.push(
new webpack.optimize.UglifyJsPlugin({
comments:false,
minimize:true,
mangle:true,
compress: {
warnings: false,
sequences: true,
dead_code: true,
conditionals: true,
booleans: true,
unused: true,
if_return: true,
join_vars: true,
drop_console: true,
screw_ie8: true,
}
})
);
config.plugins.push(
new webpack.optimize.DedupePlugin()
);
/*
config.plugins.push(
new webpack.optimize.CommonsChunkPlugin({
name:'vendor',
entries:['history',
'react',
'react-dom',
'react-router',
'react-redux',
'redux'],
chunks:['vendor'],
minChunks:Infinity
})
);*/
module.exports = config;
The package.json command to generate the bundle is the following one
"postinstall": "webpack -p --config webpack.prod.config.js --progress --colors"
now with some more time to spare and some console.log abuse it looks like that the actual bundle was being created on the correct folder but it was not being obtained correctly by express.
One lesson learned is that always check your paths!
I would like to webpack my React.js app using uglify version
webpack.config.js
module.exports = {
entry: './_react/index',
output: {
path: './dist/public/app',
filename: 'bundle.min.js'
},
devtool: 'source-map',
devServer: {
contentBase: __dirname
},
module: {
loaders: [{
test: /\.js?$/,
exclude: /(node_modules|bower_components)/,
loader: ['babel-loader'],
query: {
presets: ['es2015', 'react']
}
}]
}
}
Terminal
webpack -p
After previewing on the web browser, I got this error
Please guide, thanks
As jmargolisvt said, you need to set the NODE_ENV.
Try updating your webpack.config.js with the following:
plugins: [
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
})
],
Or in your current config as:
module.exports = {
entry: './_react/index',
output: {
path: './dist/public/app',
filename: 'bundle.min.js'
},
devtool: 'source-map',
devServer: {
contentBase: __dirname
},
module: {
loaders: [{
test: /\.js?$/,
exclude: /(node_modules|bower_components)/,
loader: ['babel-loader'],
query: {
presets: ['es2015', 'react']
}
}]
}
plugins: [
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
})
],
}
Make sure to use JSON.stringify to insert a string and not the variable production
You need to set the NODE_ENV to production. From the React site:
Note: by default, React will be in development mode. To use React in production mode, set the environment variable NODE_ENV to production (using envify or webpack's DefinePlugin).