I am using webpack 3 and I have the following Webpack config file:
var webpack = require("webpack");
var path = require("path");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry: [
"./src/index.tsx", "./src/assets/css/styles.css"
],
output: {
filename: "bundle.js",
publicPath: "/",
path: path.resolve(__dirname, "dist")
},
// Enable sourcemaps for debugging webpack's output.
// devtool: "cheap-module-source-map",
resolve: {
// Add '.ts' and '.tsx' as resolvable extensions.
extensions: [".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
}),
new ExtractTextPlugin({
filename: (getPath) => {
return getPath('assets/css/styles.css').replace('css/js', 'css');
},
allChunks: true
})
],
module: {
rules: [
// All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
{ test: /\.tsx?$/, use: ["awesome-typescript-loader"] },
// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
{ test: /\.js$/, enforce: "pre", use: "source-map-loader" },
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
// If you are having trouble with urls not resolving add this setting.
// See https://github.com/webpack-contrib/css-loader#url
url: false,
minimize: true,
sourceMap: true
}
}
]
})
}
],
loaders: [ {
test: /\.js|.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
}, {
test: /\.(jpe?g|png|gif|svg)$/i,
loaders: [
'file?hash=sha512&digest=hex&name=[hash].[ext]',
'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
]
} ]
}
};
I can see the css file generated into build folder, but it is not minified at all, I would like it to be as in one line all the css so it will be optimized, minified.
I dont know if I am using the right plugin in this case for this to happen.
Anyone have any idea what I am doing wrong here?
Related
i am creating react library. when i use that libary in my project i am facing this issue
(https://i.stack.imgur.com/HymU0.png)](https://i.stack.imgur.com/HymU0.png)
This is my webpack.config file
var path = require("path");
module.exports = {
mode: "production",
entry: "./tables.js",
output: {
// path: path.resolve("build"),
libraryTarget: "umd",
path: __dirname + '/dist',
publicPath: '/',
filename: 'index.js',
},
module: {
rules: [
{
test: /\.jsx?$/, exclude: /node_modules/
, use: {
loader: 'babel-loader',
options: {
presets: [
['#babel/preset-env', { targets: "defaults" }, '#babel/preset-react'
]
],
plugins: ['#babel/plugin-proposal-class-properties']
}
}
},
{
test: /\.(s*)css$/,
use: ['style-loader', 'css-loader', 'sass-loader']
},
]
},
externals: {
'react': 'react',
}
};
i am expecting to load this chunk in my project without facing this issue
I'm migrating a react website to webpack 4 (from 3) but have been running into some strange problems when using webpack for css.
It works fine for the css that I wrote myself, but any css from third party components in node_modules does not seem to be included at all.
Here is an example of my webpack config:
const webpack = require('webpack');
const path = require('path');
const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const config = {
entry: [
'react-hot-loader/patch',
'./src/index.js'
],
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].[contenthash].js'
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.css$/,
exclude: [/node_modules/, /global\.css$/],
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
importLoaders: 1,
modules: true,
}
},
'postcss-loader'
]
},
{
test: /\.css$/,
include: [/node_modules/, /global\.css$/],
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
importLoaders: 0,
modules: true,
}
}
]
},
{
test: /\.png$/,
use: [
{
loader: 'url-loader',
options: {
mimetype: 'image/png'
}
}
]
},
{
test: /\.svg$/,
use: 'file-loader'
},
{
test: /\.jpg$/,
use: [
{
loader: 'url-loader',
options: {
mimetype: 'image/jpg'
}
}
]
},
]
},
resolve: {
extensions: [
'.js',
'.jsx'
],
alias: {
'react-dom': '#hot-loader/react-dom'
},
modules: [
'node_modules',
],
},
devServer: {
contentBase: './dist'
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css",
}),
new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /en/),
new LodashModuleReplacementPlugin,
new HtmlWebpackPlugin({
template: require('html-webpack-template'),
inject: false,
appMountId: 'app',
})
],
optimization: {
runtimeChunk: 'single',
splitChunks: {
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
chunks: 'all'
}
}
}
}
};
module.exports = (env, argv) => {
if (argv.hot) {
// Cannot use 'contenthash' when hot reloading is enabled.
config.output.filename = '[name].[hash].js';
}
return config;
};
Only css from my own files are included in the generated bundle.
I'm using the latest versions:
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.9.0"
Greatful for any help!
Layout of the project
Good day guys. I dont understand why webpack compile 2 different .scss files
in one .css file
How prevent combine in compiling?
This is my webpack config file:
module.exports = {
output: {
path: path.resolve(__dirname, '../dist'),
publicPath: '/dist/',
filename: '[name].[chunkhash].js'
},
module: {
noParse: /es6-promise\.js$/,
rules: [
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
],
},
{
test: /\.scss$/,
use: isProd
?
[MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader']
: ['vue-style-loader', 'css-loader', 'sass-loader']
}
]
},
plugins: isProd
? [
new VueLoaderPlugin(),
new MiniCssExtractPlugin({
filename: 'common.[chunkhash].css'
})
]
: [
new VueLoaderPlugin(),
new FriendlyErrorsPlugin()
]
}
some text to start ask
I have build a react-stepper and uploaded it to github.
When i want to build my App, webpack does not include font-awesome css. But it includes my own style.scss file. I use the style loader in webpack.
In dev mode everything works fine. Only in build mode it does not work.
Here is my repo:
https://github.com/tkwant/react-stepper-wizard
Here is my webpack.build.config file:
const webpack = require("webpack");
const CleanWebpackPlugin = require("clean-webpack-plugin");
module.exports = {
entry: "./src/index.js",
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ["babel-loader"]
},
{
test: /\.(scss|css)$/,
use: [
{
loader: "style-loader" // creates style nodes from JS strings
},
{
loader: "css-loader" // translates CSS into CommonJS
},
{
loader: "sass-loader" // compiles Sass to CSS
}
]
},
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: "url-loader?limit=10000&mimetype=application/font-woff"
},
{
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: "file-loader"
}
]
},
resolve: {
extensions: ["*", ".js", ".jsx"]
},
output: {
path: __dirname + "/dist",
publicPath: "/",
filename: "react-stepper-wizard.js",
library: "Stepper",
libraryTarget: "umd"
},
externals: ["react", "react-dom", "font-awesome"],
plugins: [
new CleanWebpackPlugin(["dist"]),
new webpack.HotModuleReplacementPlugin()
],
devtool: "source-map",
devServer: {
contentBase: "./examples",
hot: true,
port: 9001
}
};
It would be fine if somebody can help me here or can do a PR to fix this problem.
You're copying a .css file, right?
You may want to try the webpack-copy-plugin
solution was to use url loader.
{ test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader" },
{ test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader" },
I am trying to bundle whole my Angular 2 project in one single index.html file (js, fonts, css and images).
Below is my current webpack config file, what should I do or update here to bundle all in one file, (with map file) if it is possible ?
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './app/main.ts',
output : {
path: './dist',
filename: 'app.bundle.js'
},
module: {
preLoaders: [
{
test: /\.ts$/,
loader: 'tslint'
}
],
loaders : [
{
test: /\.ts$/,
loaders: ['awesome-typescript-loader', 'angular2-template-loader']
},
{
test: /\.(html)$/,
loader: 'raw-loader'
},
{
test: /.(jpg|jpeg|gif|png|eot|ttf|svg|cur|woff(2)?)(\?[a-z0-9=\.]+)?$/,
loaders: ['raw-loader', 'url-loader']
},
{
test: /\.css$/,
loaders: ['style-loader', 'css-loader']
},
{
test: /\.scss$/,
exclude: /node_modules/,
loaders: ['style-loader', 'css-loader', 'sass-loader']
},
]
},
resolve: {
extensions: ['', '.ts', '.tsx', '.js', '.jsx']
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html'
}),
]
};