I have this webpack config
var Webpack = require("webpack");
var Path = require("path");
var OutputPath = "build";
module.exports = {
entry: "./src/app.tsx",
output: {
path: Path.join(__dirname, OutputPath, "" + process.env.NODE_ENV),
publicPath: "",
filename: "bundle.js"
},
devtool: "source-map",
devServer: {
contentBase: OutputPath
},
resolve: {
extensions: ["", ".ts", ".tsx", ".webpack.js", ".web.js", ".js", ".html"],
alias: {
jquery: "jquery/src/jquery"
}
},
node: {
fs: "empty"
},
module: {
loaders: [
{ test: /\.tsx?$/, loader: "ts-loader" },
{ test: /\.html$/, loader: "html-loader!file-loader?name=[name].[ext]" },
{ test: /\.ejs$/, loader: "ejs-loader" },
{
test: /\.svg$/,
loaders: [
"url-loader?limit=100000&name=assets/[name].[hash].[ext]",
"image-webpack?bypassOnDebug=false&optimizationLevel=7&interlaced=false"
]
},
{
test: /\.(png|jpe?g|gif|woff|woff2|ttf|eot|ico)$/,
loader: "url-loader?limit=100000&name=assets/[name].[hash].[ext]"
},
,
{
test: /\.css$/,
exclude: /.*onsenui.*$/,
loader: "ignore-loader"
}
,
{
test: /\.(less|css)$/,
exclude: /.*(font_awesome|ionicons|iconic-font).*$/,
loader: "style-loader!css-loader?-import!less-loader!postcss-loader"
}
],
}
};
Application is built on onsenui and I am trying to ignore specific filename from css import.
#import url("font_awesome/css/font-awesome.min.css");
#import url("ionicons/css/ionicons.min.css");
#import url("material-design-iconic-font/css/material-design-iconic-font.min.css");
...
We can comment out the specific lines, but we don't want to do it every update npm packages.
Does anyone know, how to ignore that css imports?
Finally I just installed "string-replace-webpack-plugin" and use this way.
var StringReplacePlugin = require("string-replace-webpack-plugin");
Then adding that plugin into preloader does the work
preLoaders: [
{
test: /onsenui\.css$/,
loader: StringReplacePlugin.replace({
replacements: [
{
pattern: /.*(#import).*/ig,
replacement: function (match, p1, offset, string) {
return "/*/";
}
}
]}),
include: /node_modules\\onsenui.*/
}
]
Related
I have a webpack config file(version 5.28.0) that I am trying to alter, in order to create two versions of the user.js file that is generated. I'd like a user.js and legacy_user.js file to be generated. Both files I would like to be generated from the contents of the 'scripts/user' directory, with the exception of I'd like the user.js file to compile excluding the legacy_user.js file that is in the 'scripts/user' directory and the legacy_user.js file to compile excluding the user.js file that is in the 'scripts/user' directory. I have tried the below but the contents of the user.js file keeps overwriting the contents of the legacy_user.js file and they end up being identical:
module.exports = (options = {}) => {
return [
{
mode: options.production ? 'production' : 'development',
entry: {
app: path.resolve(__dirname, 'scripts/app'),
user: path.resolve(__dirname, 'scripts/user'),
'video/trim': path.resolve(__dirname, 'scripts/video/trim')
},
output: { path: path.resolve(__dirname, '../public_html/dist') },
module: {
rules: [
{
test: /\.js$/,
exclude: [/(node_modules)/, /legacy_user\.js$/],
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env'],
plugins: ['#babel/plugin-transform-runtime']
}
}
}, {
test: /\.(s[ac]ss|css)$/i,
use: ['style-loader', 'css-loader', 'sass-loader']
},
{ test: /\.(png|jpg|woff(2)?|ttf|eot|svg)$/, loader: 'file-loader' }
]
},
},
{
mode: options.production ? 'production' : 'development',
entry: {
legacy_user: path.resolve(__dirname, 'scripts/user')
},
output: {
path: path.resolve(__dirname, '../public_html/dist')
},
module: {
rules: [
{
test: /\.js$/,
exclude: [/(node_modules)/, /user\.js$/],
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env'],
plugins: ['#babel/plugin-transform-runtime']
}
}
}, {
test: /\.(s[ac]ss|css)$/i,
use: ['style-loader', 'css-loader', 'sass-loader']
},
{ test: /\.(png|jpg|woff(2)?|ttf|eot|svg)$/, loader: 'file-loader' }
]
},
}
]
}
Any help on this would be greatly appreciated!
How can I target all CSS and SCSS files in a folder with an entry point, process them and then output the result into a single file in Webpack 4?
For JavaScript seems very straightforward: In the following example, I'm getting all files with js extension located in assets/js then they are transpiled and saved into /dist/bundle.js:
const path = require("path")
const glob = require("glob")
module.exports = {
devtool: 'source-map',
entry: glob.sync("./assets/js/*.js"),
output: {
path: path.resolve(__dirname, "./dist/js/"),
filename: 'bundle.js',
publicPath: '/dist'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: { presets: ["es2015"] }
}
}
]
},
}
I'd like to do the same (along with the previous example) but with CSS and SCSS files. I've tried:
const path = require("path")
const glob = require("glob")
const mcep = require("mini-css-extract-plugin")
module.exports = {
devtool: 'source-map',
entry: {
javascript: glob.sync("./assets/js/*.js"),
css: glob.sync("./assets/css/**/"),
},
output: {
path: path.resolve(__dirname, "./dist/js/"),
filename: 'bundle.js',
publicPath: '/dist'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: { presets: ["es2015"] }
}
},
{
test: /\.(sa|sc|c)css$/,
use: [
{
loader: mcep.loader
},
{
loader: "file-loader",
/*options: {
name: "bundle.css",
outputPath: "dist/css/"
}*/
},
{
loader: "style-loader" // creates style nodes from JS strings
},
{
loader: "css-loader" // translates CSS into CommonJS
},
{
loader: "sass-loader" // compiles Sass to CSS
}
]
}
]
},
plugins: [
new mcep({
filename: "./dist/css/[name].css",
chunks: ['css']
})
]
}
but it does not work. Again, I'd like to target all files within a specific folder, process them and ouput them into /dist/css/something.css, I don't want to import them into a js file.
Thanks
Why am I receiving this error? I also have bootstrap files being imported into the main custom.scss file. Not sure if this is creating any issues?
I'm receiving this error when attempting to use the scss loader in
webpack:
Unexpected character '#' (4:0)
You may need an appropriate loader to handle this file type.
|
|
| #import "_bootstrap";
| #import "spinner";
| #import "navigations";
# ./js/app.js 5:0-30
Here is my webpack.config.js script:
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: './js/app.js',
output: {
path: __dirname,
filename: 'js/bundle.js'
},
watch: true,
module: {
rules: [
{
test: /\.(jpe?g|png|gif|svg)$/i,
//test: /\.(png|jpg)$/,
use: 'file-loader'
}
],
loaders: [
{
test: /.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react']
}
},
{
test: /.scss?$/,
loader: 'style-loader!css-loader!sass-loader'
}
]
},
};
Here is my require script located in my app.js file:
require('../scss/custom.scss');
I believe you need to move the loader rule into module:
module.exports = {
entry: './js/app.js',
output: {
path: __dirname,
filename: 'js/bundle.js'
},
watch: true,
module: {
rules: [
{
test: /\.(jpe?g|png|gif|svg)$/i,
//test: /\.(png|jpg)$/,
use: 'file-loader'
},
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react']
}
},
{
test: /\.scss?$/,
loader: 'style-loader!css-loader!sass-loader'
}
]
}
};
If that doesn't work, you can try the use to specify the loaders:
module.exports = {
module: {
rules: [
{
test: /\.scss?$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' },
{ loader: 'sass-loader' },
]
}
]
}
};
When running webpack-dev-server produces an error
Module build failed: TypeError: text.forEach is not a function
enter image description here
'use strict';
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var path = require('path');
module.exports = {
entry: {
app: ['./client/main.js'],
index: ['./server/index.pug']
},
output: {
path: path.resolve(__dirname, "..", "public",'js'),
publicPath: "/js/",
filename: '[name].js'
},
module: {
rules: [
{
test: /\.pug$/,
loader: ExtractTextPlugin.extract( 'pug-loader')
},
{
test: /\.js$/,
loader: "babel-loader",
exclude: /node_modules/,
query: {
presets: ['es2015']
}
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract({
fallback: "style-loader",
use: [{
loader: "css-loader"
}, {
loader: "postcss-loader"
}, {
loader: "sass-loader"
}]
})
},
{
test: /\.vue$/,
loader: "vue-loader"
}
]
},
resolve: {
extensions: [".vue", ".js", ".json",".pug",".html"],
alias: {
'vue$': 'vue/dist/vue.common.js'
}
},
plugins: [
new ExtractTextPlugin("[name].html"),
new ExtractTextPlugin("[name].css"),
new webpack.NoEmitOnErrorsPlugin(),
new webpack.optimize.CommonsChunkPlugin({
name: "main",
minChunks: 2
})
],
}
Before that, I tried to do it through HtmlWebpackPlugin but there it returned plain text!
I have a no-sql database in the root of my project and I don't want webpack to include it in its bundle. Now I have to rebuild everytime the db gets updated. I'm using webpack 2.2.1. This is what I have:
var path = require('path')
var utils = require('./utils')
var config = require('../config')
var vueLoaderConfig = require('./vue-loader.conf')
function resolve (dir) {
return path.join(__dirname, '..', dir)
}
module.exports = {
entry: {
app: './resources/main.js'
},
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
resolve: {
extensions: ['.js', '.vue', '.json'],
modules: [
resolve('resources'),
resolve('node_modules')
],
alias: {
'vue$': 'vue/dist/vue.common.js',
'src': resolve('resources'),
'assets': resolve('resources/assets'),
'components': resolve('resources/components')
}
},
module: {
rules: [
{
test: /\.(js|vue)$/,
loader: 'eslint-loader',
enforce: "pre",
include: [resolve('resources'), resolve('test')],
options: {
formatter: require('eslint-friendly-formatter')
}
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('resources'), resolve('test')]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
query: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
query: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
}
}
I tried to exclude it by adding it to the externals like so
externals: ['./../db.json'],
Or adding a rule like so
{
test: /\.json$/,
exclude: resolve('db.json')
}
as long as you require()/import it, you will always have to re-build, because webpack will convert it into a new file, as a webpack module.
What you really have to do is load it via AJAX from the browser after your app has started, with your AJAX tool of choice.