I have one src/styles/main.scss file which I want to convert to build/styles/main.css and then use it in index.html.
I have been trying to setup webpack with text extractor plugin but unable to achieve the final result.
This is my directory structure:
project
// build needs to be generated, as of now only js folder with index.js is generated
- build
- src
- styles
- main.scss
- components
- header.scss
- js
- stores
// some other files
- webpack.config.js
webpack.config.js
const webpack = require('webpack');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const path = require('path');
const BUILD_DIR = path.resolve(__dirname, 'build/js');
const APP_DIR = path.resolve(__dirname, 'src');
const config = {
devtool: 'eval-source-map',
entry: {
"index": APP_DIR + '/js/index.jsx'
},
output: {
path: BUILD_DIR,
filename: '[name].js'
},
module: {
rules: [
{
test: /\.scss$/,
include: APP_DIR,
exclude: /node_modules/,
use: ExtractTextPlugin.extract(
'style-loader', // backup loader when not building .css file
'css-loader!sass-loader'
)
},
{
test: /\.(jsx|js)?/,
exclude: /node_modules/,
include: APP_DIR,
loader: 'babel-loader'
}
]
},
resolve: {
extensions: [".js", ".jsx"]
},
plugins: [
new ExtractTextPlugin("build/styles/main.css")
]
};
module.exports = config;
Related
I have this setup currently. The first three entries (app, blocks, react) compile as expected to the rootDir/prod/[name].min.js - This already works
I want the 4th entry (which is a dynamic one). I have this directory: rootDir/gutenberg/blocks/[blockNameDir]/frontend.js; I want the frontend.js file for each of the [blockNameDir] directories to be compiled to the same directory as frontend.min.js.
I figured out how to use the glob for the dynamic entry, but I am stuck at the dynamic output. Thanks in advance.
const path = require('path');
var glob = require('glob');
const outputDir = path.resolve(__dirname, 'prod');
module.exports = {
mode: 'development',
entry: {
app: path.resolve(__dirname, './src/js/app.js'),
blocks: path.resolve(__dirname, './gutenberg/blocks.js'),
react: path.resolve(__dirname, './src/js/app-react.js'),
frontend: glob.sync(
path.resolve(__dirname, './gutenberg/blocks/**/frontend.js')
),
},
devtool: 'inline-source-map',
output: {
path: outputDir,
filename: '[name].min.js',
},
devtool: 'source-map',
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: ['babel-loader'],
},
{
test: /\.js$/,
use: ['source-map-loader'],
enforce: 'pre',
},
],
},
};
Hey I have this project which has this structure:
bundler -> webpack.common.js
src -> main.js, index.html, styles.css
package.json
node_modules... the rest doesnt matter really
It is set up like when I do: npm run dev webpack creates a live server using my current main.js for my index.html
The webpack.common.js looks like this:
const CopyWebpackPlugin = require("copy-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCSSExtractPlugin = require("mini-css-extract-plugin");
const path = require("path");
module.exports = {
entry: path.resolve(__dirname, "../src/current_script.js"),
output: {
hashFunction: "xxhash64",
filename: "bundle.[contenthash].js",
path: path.resolve(__dirname, "../dist"),
},
devtool: "source-map",
plugins: [
new CopyWebpackPlugin({
patterns: [{ from: path.resolve(__dirname, "../static") }],
}),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, "../src/index.html"),
minify: true,
}),
new MiniCSSExtractPlugin(),
],
module: {
rules: [
// HTML
{
test: /\.(html)$/,
use: ["html-loader"],
},
// JS
{
test: /\.js$/,
exclude: /node_modules/,
use: ["babel-loader"],
},
// CSS
{
test: /\.css$/,
use: [MiniCSSExtractPlugin.loader, "css-loader"],
},
// Images
{
test: /\.(jpg|png|gif|svg)$/,
type: "asset/resource",
generator: {
filename: "assets/images/[hash][ext]",
},
},
// Fonts
{
test: /\.(ttf|eot|woff|woff2)$/,
type: "asset/resource",
generator: {
filename: "assets/fonts/[hash][ext]",
},
},
],
},
};
```
Now my question is how can I define multiple entries under certain URLs.
So for example now under localhost/ it will redirect me to index.html using my main.js
Is there a way of having localhost/2 use my index.html with another js file like main2.js
Below is my webpack.config.js. I'm working on a phaser game with a restAPI. My assets are in a folder off the root. My problem is I compiled with webpack and it changed the code in the boot scene of phaser to look for my assets in 'build/assets'. There is no such folder, so in the browser it's giving me the 404 not found errors. Is there a way to prevent this in the webpack.config? Or should I just copy the assets folder inside the build folder?
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'build'),
publicPath: '/build/',
filename: 'project.bundle.js',
},
module: {
rules: [
{
test: /\.m?js$/,
use: { loader: 'babel-loader' },
exclude: /node_modules/,
},
{
test: [/\.vert$/, /\.frag$/],
use: 'raw-loader',
},
],
},
plugins: [
new webpack.DefinePlugin({
'CANVAS_RENDERER': JSON.stringify(true),
'WEBGL_RENDERER': JSON.stringify(true),
}),
],
};
I am trying to process a .scss file with Webpack 2.2.0 but instead of getting it injected into a style tag into my index.html file, I wanted to extract it into a .css file with ExtractTextPlugin.
The following is my webpack.config.js file:
// webpack.config.js
let path = require('path');
let ExtractTextPlugin = require('extract-text-webpack-plugin');
let extractCSS = new ExtractTextPlugin('[name].css');
module.exports = {
context: path.resolve(__dirname, './src'),
entry: './index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: 'dist/'
},
module: {
rules: [
{
test: /\.js$/,
use: 'babel-loader',
},
{
test: /\.(sass|scss)$/,
use: [
///////////////////////////////////////
// THIS WONT WORK AND CAUSES THE ERROR
///////////////////////////////////////
extractCSS.extract({
fallbackLoader: 'style-loader',
loader: ['css-loader', 'sass-loader']
}),
/////////////
// THIS WORKS
/////////////
// 'style-loader', 'css-loader', 'sass-loader'
]
},
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
loader: 'file-loader?name=[path][name].[ext]'
}
]
},
plugins: [
extractCSS
]
}
Any help is appreciated. Thanks.
This is a bug currently in ETP. I believe my switching use to "loader" that this will solve your problem. Module parse failed error for SCSS file.
I have the following app structure:
/webapp
/lib
/assets
ic_add_black_24px.svg
ic_clear_black_24px.svg
..
..
Here is my webpack.config.js:
var path = require('path'),
webpack = require("webpack"),
libPath = path.join(__dirname, 'lib'),
wwwPath = path.join(__dirname, 'www'),
pkg = require(path.join(__dirname,'package.json')),
HtmlWebpackPlugin = require('html-webpack-plugin');
var config = {
entry: path.join(libPath, 'index.js'),
output: {
path: path.join(wwwPath),
filename: 'bundle-[hash:6].js'
},
module: {
loaders: [{
test: /\.html$/,
loader: 'file?name=templates/[name]-[hash:6].html'
}, {
test: /\.(png|jpg|svg)$/,
loader: 'file-loader?name=assets/[name].[ext]' // inline base64 URLs for <=10kb images, direct URLs for the rest
}, {
test: /\.css$/,
loader: "style!css"
}, {
test: /\.scss$/,
loader: "style!css!autoprefixer!sass"
}, {
test: /\.js$/,
exclude: /(node_modules)/,
loader: "ng-annotate?add=true!babel"
}, {
test: [/fontawesome-webfont\.svg/, /fontawesome-webfont\.eot/, /fontawesome-webfont\.ttf/, /fontawesome-webfont\.woff/, /fontawesome-webfont\.woff2/],
loader: 'file?name=fonts/[name].[ext]'
}]
},
plugins: [
// HtmlWebpackPlugin: Simplifies creation of HTML files to serve your webpack bundles : https://www.npmjs.com/package/html-webpack-plugin
new HtmlWebpackPlugin({
filename: 'index.html',
pkg: pkg,
template: path.join(libPath, 'index.html')
}),
// OccurenceOrderPlugin: Assign the module and chunk ids by occurrence count. : https://webpack.github.io/docs/list-of-plugins.html#occurenceorderplugin
new webpack.optimize.OccurenceOrderPlugin(),
// Deduplication: find duplicate dependencies & prevents duplicate inclusion : https://github.com/webpack/docs/wiki/optimization#deduplication
new webpack.optimize.DedupePlugin()
]
};
module.exports = config;
Here is how I am using the svg asset in one of my html file:
<md-card-header>
<span flex></span>
<md-button class="md-icon-button" aria-label="remove condition" style="background-color: #DCD8D8" ng-click="event.removeCondition(condition)">
<md-icon md-svg-src="/lib/assets/ic_clear_black_24px.svg"></md-icon>
</md-button>
</md-card-header>
When I do rm -rf www/* && webpack -p, it creates the bundle successfully, but without any assets loaded.. I have tried to use svg-loader, url-loader, file, but none of them works.. What am I doing wrong here?
In case it helps anyone, I ended up using CopyWebpackPlugin to load the assets manually to my required location. This is what my webpack.config looks like now:
var path = require('path'),
webpack = require("webpack"),
libPath = path.join(__dirname, 'lib'),
wwwPath = path.join(__dirname, 'www'),
pkg = require(path.join(__dirname,'package.json')),
CopyWebpackPlugin = require('copy-webpack-plugin'),
HtmlWebpackPlugin = require('html-webpack-plugin');
var config = {
entry: path.join(libPath, 'index.js'),
output: {
path: path.join(wwwPath),
filename: 'bundle-[hash:6].js'
},
module: {
loaders: [{
test: /\.html$/,
loader: 'file?name=templates/[name]-[hash:6].html'
}, {
test: /\.(png|jpg|svg)$/,
loader: 'svg-url-loader?name=assets/[name].[ext]' // inline base64 URLs for <=10kb images, direct URLs for the rest
}, {
test: /\.css$/,
loader: "style!css"
}, {
test: /\.scss$/,
loader: "style!css!autoprefixer!sass"
}, {
test: /\.js$/,
exclude: /(node_modules)/,
loader: "ng-annotate?add=true!babel"
}, {
test: [/fontawesome-webfont\.svg/, /fontawesome-webfont\.eot/, /fontawesome-webfont\.ttf/, /fontawesome-webfont\.woff/, /fontawesome-webfont\.woff2/],
loader: 'file?name=fonts/[name].[ext]'
}]
},
plugins: [
new CopyWebpackPlugin([{
from: 'lib/assets',
to: wwwPath + '/lib/assets'
}]),
// HtmlWebpackPlugin: Simplifies creation of HTML files to serve your webpack bundles : https://www.npmjs.com/package/html-webpack-plugin
new HtmlWebpackPlugin({
filename: 'index.html',
pkg: pkg,
template: path.join(libPath, 'index.html')
}),
// OccurenceOrderPlugin: Assign the module and chunk ids by occurrence count. : https://webpack.github.io/docs/list-of-plugins.html#occurenceorderplugin
new webpack.optimize.OccurenceOrderPlugin(),
// Deduplication: find duplicate dependencies & prevents duplicate inclusion : https://github.com/webpack/docs/wiki/optimization#deduplication
new webpack.optimize.DedupePlugin()
]
};
module.exports = config;