I use a webpack config for bundling my JS and SCSS files in src directory and this worked fine but I want multiple output. (not one file like bundle.js) One for js, one for css.
My ideal output in public folder:
styles/main.css
scripts/main.js
this is my config:
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'public/scripts'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['env'],
},
},
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.s[ac]ss$/i,
use: ['style-loader', 'css-loader', 'sass-loader'],
},
{
test: /\.(png|woff|woff2|eot|ttf|svg)$/,
loader: 'url-loader?limit=100000',
},
],
},
devServer: {
contentBase: path.resolve(__dirname, 'public'),
publicPath: '/scripts/',
},
};
I also used the ExtractTextPlugin and MiniCssExtractPlugin but I didn't get the result.
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 am working on a large codebase; I have multiple src files to compile. When I run watch or compile for production it will compile all files found in src. Which is exactly what webpack should do.
But I would like to compile only the files which have been recently changed instead of all the files. Is this possible?
Here's my webpack config
const path = require("path");
const webpack = require("webpack");
const extractTextPlugin = require("extract-text-webpack-plugin");
const {VueLoaderPlugin} = require("vue-loader");
module.exports = {
entry: {
clients:
"./src/clients/Resources/vue-js/clients.js",
dashboard:
"./src/dashboard/Resources/vue-js/dashboard.js",
mapView:
"./src/mapView/Resources/vue-js/mapView.js",
admin:
"./src/admin/Resources/vue-js/admin.js"
},
output: {
path: path.join(__dirname, "./dist/"),
publicPath: "/dist/",
filename: "js/[name].js",
chunkFilename: "js/[name].js"
},
optimization: {
splitChunks: {
cacheGroups: {
vendors: {
name: "vendor",
filename: "js/vue_bundle.js",
automaticNameDelimiter: "_",
test: /[\\/]node_modules[\\/]/,
chunks: "all",
priority: 1,
minChunks: 2,
minSize: 0
},
}
},
occurrenceOrder: true,
},
module: {
rules: [
{
test: /\.vue$/,
loader: "vue-loader"
},
{
test: /\.js$/,
loader: "babel-loader",
exclude: /node_modules/,
options: {
presets: ["env"]
}
},
{
test: /\.(png|woff|woff2|eot|ttf|svg)$/,
loader: "url-loader?limit=100000"
},
{
test: /\.css$/,
use: extractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},
{
test: /\.scss$/,
use: extractTextPlugin.extract({
// use: ['raw-loader', 'sass-loader']
use: "raw-loader!sass-loader"
})
},
{
test: /\.sass$/,
use: extractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader!sass-loader"
})
},
{
test: /\.jpe?g$|\.ico$|\.gif$|\.png$|\.svg$|\.woff$|\.ttf$|\.wav$|\.mp3$/,
loader: "file-loader?name=[name].[ext]"
},
{
test: /\.yaml$/,
loader: "json-loader!yaml-loader"
}
]
},
plugins: [
new extractTextPlugin({
filename: "css/[name].css",
allChunks: true
})
]
};
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" },
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'
}),
]
};