I am trying to run the google closure compiler over my webpack assets, but am getting warnings about issues in the webpack styles loaders. But I thought that the style loaders were not going to be in any of the js assets as I was using the MiniCssExtractPlugin to get a separate css file.
Two questions:
how can I get access to the output of by webpack.config.js in production mode? (Can i do something on the command line to see what the merge result is?)
how can I get the merge to work as I had expected, i.e. not using style-loader for production?
Code:
const merge = require("webpack-merge");
var common = {
....
module: {
rules: [
{
test: /\.scss$/,
exclude: [/elm-stuff/, /node_modules/],
// see https://github.com/webpack-contrib/css-loader#url
loaders: ["style-loader", "css-loader?url=false", "sass-loader"]
},
{
test: /\.css$/,
exclude: [/elm-stuff/, /node_modules/],
loaders: ["style-loader", "css-loader?url=false"]
},
...
if (MODE === "production") {
module.exports = merge(common, {
optimization: {
minimizer: [
new ClosurePlugin({mode: 'STANDARD'}, {})
]
},
module: {
rules: [
{
test: /\.css$/,
exclude: [/elm-stuff/, /node_modules/],
loaders: [
MiniCssExtractPlugin.loader,
"css-loader?url=false"
]
},
{
test: /\.scss$/,
exclude: [/elm-stuff/, /node_modules/],
loaders: [
MiniCssExtractPlugin.loader,
"css-loader?url=false",
"sass-loader"
]
}
]
}
I had the same problem (I'm using webpack 4).
My configuration is splitted on 3 files : common, dev and prod ; as webpack guide explain;
To log merged config, you can do something like :
var merged_config = merge(common, {
mode: 'production',
module: {
rules: [
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'less-loader'
],
}
]
},
plugins: [
new MiniCssExtractPlugin()
]
});
module.exports = merged_config;
console.log(JSON.stringify(merged_config));
And as you can see in the code above, I override rules to generate a css bundle in production mode. Inside my common config, I have this :
module: {
rules: [
{
test: /\.tsx?$/,
loader: 'ts-loader',
},
{
test: /\.html$/,
loader: 'raw-loader'
},
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
'less-loader'
],
}
]
},
And it works as I expected !
Related
I moved a React app from create-react-app to Webpack 5 and the UI library, Ant Design, is no longer loading the icons on components.
For several components, this is having functionality breaking effects.
Issue
When attempting to use a component that has an icon, it will console.log the below error message and render the component without that icon.
Error Message
warning.js:16 Warning: [#ant-design/icons] icon should be icon definiton, but got:
var LeftOutlined={icon:{tag:"svg",attrs:{viewBox:"64 64 896 896",focusable:"false"},children:[{tag:"path",attrs:{d:"M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"}}]},name:"left",theme:"outlined"};export default LeftOutlined;
Webpack
const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')
module.exports = {
entry: './src/index.tsx',
output: {
filename: 'index.min.js',
path: path.resolve(__dirname, '../public/'),
},
resolve: {
modules: [__dirname, 'src', 'node_modules'],
extensions: ['*', '.js', '.jsx', '.tsx', '.ts', '.less'],
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html',
}),
],
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: require.resolve('babel-loader'),
},
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.less$/i,
use: ['style-loader', 'css-loader', 'less-loader'],
},
{
test: /\.svg$/,
use: [
{
loader: 'svg-url-loader',
options: {},
},
],
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: 'babel-loader',
},
{
loader: '#svgr/webpack',
options: {
babel: false,
icon: true,
},
},
],
},
{
test: /\.png|svg|jpg|gif$/,
use: ['file-loader'],
},
],
},
}
Babel
{
"presets": ["#babel/preset-react", "#babel/preset-env"],
"plugins": [["#babel/transform-runtime"]]
}
Unlike error for preset. i'm getting error for the closing tag.
i'm unable create build
i had to use "#babel/plugin-transform-typescript" to resolve existing issue.
where i got error for using
{ customer_name, avatar, customerUUID }: row
as function argument
console error
bable.config file
module.exports = {
presets: ["#babel/preset-env", "#babel/preset-react"],
plugins: [
"#babel/plugin-proposal-class-properties",
"#babel/plugin-proposal-object-rest-spread",
"#babel/plugin-transform-destructuring",
"#babel/plugin-transform-typescript",
"#babel/plugin-transform-react-inline-elements",
// "#babel/plugin-proposal-export-default-from",
// "#babel/plugin-proposal-optional-chaining",
// "#babel/plugin-syntax-dynamic-import",
// "#babel/plugin-transform-regenerator",
// "#babel/plugin-transform-runtime",
],
};
here is my webpack.config file
const path = require("path");
module.exports = {
entry: path.resolve(__dirname, "./src/index.js"),
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
use: "babel-loader",
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
},
{
test: /\.svg$/,
loader: 'svg-inline-loader'
},
{
test: /\.(png|jpe?g|gif)$/i,
use: [
{
loader: 'file-loader',
},
],
},
],
},
output: {
filename: "bundle.js",
},
};
I have the next webpack config.
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin()
],
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
],
loaders: [
{
test: /\.js$/,
loader: 'babel-loader',
query: {
presets: ['es2015']
},
exclude: /node_modules/
},
After build the webpack I get an error:
You may need an appropriate loader to handle this file type. in svg string whicnh get from css file. How can solve this problem?
Add url-loader or file-loader to handle those extensions.
{
test: /.(jpg|jpeg|png|svg)$/,
use: ['file-loader'],
},
(excerpt from https://github.com/akx/demystifying-webpack/blob/162137118dd54f30a6c98dd0ae8844dba733483e/webpack.config.js#L13-L16)
As has happened to many others before, webpack is simply not loading any of my fonts into the build. I've looked at the boards, searched google, tried many different regex tricks and tried other techniques like the copy-webpack-plugin from npm. The build is run via a generic 'npm start'. Please take a look at the below directory structure and my webpack build file and tell me what I might be missing. Thx :-P
Directory Structure (folders in CAPS):
/
- index.html
- index.js
- webpack.config.js
- server.js
ASSETS
FONTS
<font files>
COMPONENTS
CONTAINERS, etc..
my webpack file (test for fonts at the bottom):
var path = require('path')
var webpack = require('webpack')
var CopyWebpackPlugin = require('copy-webpack-plugin')
module.exports = {
devtool: 'cheap-module-eval-source-map',
entry: [
'eventsource-polyfill',
'whatwg-fetch',
'webpack-hot-middleware/client',
'./index'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/static/'
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
module: {
loaders: [{
test: /\.js$/,
loaders: [ 'react-hot', 'babel' ],
exclude: /node_modules/,
include: __dirname
}, {
test: /\.css?$/,
loaders: [ 'style', 'raw' ],
include: __dirname
},
{
test: /\.less$/,
loaders: ['style', 'css', 'less'],
include: __dirname
},
{ test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&minetype=application/font-woff" },
{ test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }]
}
}
I've never needed all the regex in the test.
Example of one of my webpack files:
module: {
loaders: [
// Javascript
{ test: /\.jsx?$/, loader: 'babel', exclude: /node_modules/ },
// Stylesheets
{ test: /\.scss$/, loader: ExtractTextPlugin.extract('style', 'css?sourceMap!sass?sourceMap') },
// Font Definitions
{ test: /\.svg$/, loader: 'url?limit=65000&mimetype=image/svg+xml&name=public/fonts/[name].[ext]' },
{ test: /\.woff$/, loader: 'url?limit=65000&mimetype=application/font-woff&name=public/fonts/[name].[ext]' },
{ test: /\.woff2$/, loader: 'url?limit=65000&mimetype=application/font-woff2&name=public/fonts/[name].[ext]' },
{ test: /\.[ot]tf$/, loader: 'url?limit=65000&mimetype=application/octet-stream&name=public/fonts/[name].[ext]' },
{ test: /\.eot$/, loader: 'url?limit=65000&mimetype=application/vnd.ms-fontobject&name=public/fonts/[name].[ext]' }
]
},
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'
}),
]
};