Very, very new to webpack, but I'm trying to set it up to translate my typescript and my sass code and minify and bundle each into a single file apiece. I followed this tutorial but it didn't work in the end.
I got it to translat the typescript into js and minify it, but not the sass.
It will compile the sass in css, but I need it to be minified and this isn't doing that.
I'm making a ASP.NET app in visual studio. My webpack.config.js file looks like this:
const path = require('path');
module.exports = {
entry:'./wwwroot/scripts/site.ts',
output: {
path: path.resolve(__dirname, 'wwwroot/js'),
filename: 'site.bundle.js'
},
module:{
rules: [{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
}]
},
resolve: {
extensions: ['.tsx', '.ts', '.js']
},
optimization: {
minimizer: [new UglifyJsPlugin()]],
}
}
module.exports = {
entry:'./wwwroot/sass/site.scss',
output: {
path: path.resolve(__dirname, 'wwwroot/css'),
filename: 'site.bundle.css'
},
module:{
rules: [{
test: /\.scss$/,
use: ['style-loader', 'css-laoder', 'sass-laoder']
}]
}
resolve: {
extensions: ['.css']
}
}
Related
I am using WebPack to build a chrome extension. I import the css file in the popup.js file and it correctly styles my page but bundler also inserts the css file to the html which is unnecessary if I know correctly since it is injected to the output js file. Because the css file is included in the hmtl, I get a "Failed to load resource: net::ERR_FILE_NOT_FOUND". I want to know how to exclude the CSS file from the html and basically dont have the following line.
<link rel="stylesheet" href="popup-styles.css" />
This is my webpack.config.js file.
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CopyPlugin = require("copy-webpack-plugin");
module.exports = {
entry: {
popup: "./src/popup.js",
background: "./src/background.js",
content: "./src/content.js",
},
output: {
path: path.resolve(__dirname, "dist"),
filename: "[name].js",
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ["#babel/preset-env", "#babel/preset-react"],
},
},
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/popup.html",
filename: "popup.html",
chunks: ["popup"],
}),
new CopyPlugin({
patterns: [{ from: "public" }],
}),
],
};
For 2 days I have been trying to compile the js and css file to a separate file because now everything is together. Does anyone have any idea how this can be solved?
I would be very grateful for your help.
There is my code webpack.config.js
const path = require('path');
const webpack = require('webpack');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'src/dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env']
}
}
},
{
test: /\.scss$/,
use: [
"style-loader", // creates style nodes from JS strings
{
loader: "css-loader",
options: {
url: false
}
},
"sass-loader" // compiles Sass to CSS, using Node Sass by default
]
},
]
},
plugins: [
new BrowserSyncPlugin({
// browse to http://localhost:3000/ during development,
// ./public directory is being served
host: 'localhost',
port: 3000,
files: ['./src/*.html'],
server: { baseDir: ['src'] }
}),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
})
]
};
I think MiniCssExtractPlugin is what you are looking for.
It takes the output of css-loader and create .css bundles. It takes care of downloading them in the browser (by pushing a section of code in webpack runtime code), and also yeah, it minifies the .css :).
Simple usage:
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
plugins: [new MiniCssExtractPlugin()],
module: {
rules: [
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
],
},
};
Yes you are right. Style-loader creates javascript snippets that later in runtime creates .css rules and push them to the browser global css scope.
When I run npm run build "build": "webpack" webpack produces dist folder for me with main.css, index.html and index.js but the images from CSS or from HTML don't work and they are not there.
In CSS in dist folder they are referenced like so
background-image: url("../../../assets/img/works/works-3.jpg");
And in HTML
<img src="./assets/img/logo.png">
I'm not sure what to fix so my images are working.
I have this webpack config
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const SpritesmithPlugin = require('webpack-spritesmith');
var path = require('path');
module.exports = {
mode: 'development',
entry: './src/app.js',
module: {
rules: [
{
test: /\.css$|\.sass$|\.scss$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader?url=false'
},
{ loader: 'sass-loader' }
]
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{test: /\.png$|jpg|jpeg/, use: [
'file-loader?name=i/[hash].[ext]'
]}
]
},
resolve: {
extensions: ['.js', '.es6'],
modules: ['node_modules', 'spritesmith-generated']
},
output: {
path: __dirname + '/dist',
filename: 'index.js'
},
devServer: {
port: 8080,
contentBase: './src',
watchContentBase: true
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css'
}),
new HtmlWebpackPlugin({
template: './src/index.html'
}),
new SpritesmithPlugin({
src: {
cwd: path.resolve(__dirname, 'src/assets/img/icons'),
glob: '*.png'
},
target: {
image: path.resolve(__dirname, 'src/spritesmith-generated/sprite.png'),
css: path.resolve(__dirname, 'src/spritesmith-generated/sprite.scss')
},
apiOptions: {
cssImageRef: '../spritesmith-generated/sprite.png'
}
})
]
};
UPD installed Copy Webpack Plugin and copied assets folder to dist folder. Images in HTML are working fine, but images in CSS do not.
After using CopyWebpackPlugin you need to need to change your background-url to /dist/images/imageName . But it depends how are structuring your build folder. This plugin copy all assets to your build folder so you need to import them from your dist folder.
TL;DR: Is there any way to automatically scan or automatically import all stylesheets used by our web packages, from our node_modules folder?
I am working on a project that uses angularJS as its MVC framework, and we are currently in the process of migrating to use webpack. I currently wrote the following configuration:
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const bbProperties = require('./webpack.properties');
const appRoot = __dirname + "/../../..";
console.log('__dirname:', __dirname);
module.exports = {
entry: {
app: appRoot + bbProperties.app.entryScript,
login: appRoot + bbProperties.login.entryScript
},
output: {
path: appRoot + bbProperties.distFolder,
publicPath: "dist",
filename: "js/[name].bundle.js",
},
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2017']
}
},
{
test: /\.css$/,
//exclude: /node_modules/,
use: [
{loader: 'style-loader'},
{loader: 'css-loader', query: {importLoaders: 1}},
{loader: 'postcss-loader', query: {config: {path: __dirname+'/postcss.config.js'}}}
]
},
{
test: /\.(png|jpg|jpeg|gif)$/,
exclude: /node_modules/,
use: [
{
loader: 'file-loader',
options: {
name:'[name].[ext]',
outputPath:"/assets/images/"
}
}
]
},
{
test: /\.(ttf|eot|woff|woff2|svg)($|\?.*$)/,
exclude: /node_modules/,
use: [
{
loader: 'file-loader',
options: {
name:'[name].[ext]',
outputPath:"/assets/fonts/"
}
}
]
},
]
},
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery",
moment: "moment"/*,
_: "lodash",
"window._": "lodash",
angular: "angular"*/
}),
//Creates an html file with all bundles injected as <script> tags
new HtmlWebpackPlugin({
chunks: ['app'],
filename: '../angular-app/menu/' + bbProperties.app.outputFile,
hash: "true", //cache busting
template: appRoot + bbProperties.app.location + "/" + bbProperties.app.inputFile
}),
//Second html bundle for login page
new HtmlWebpackPlugin({
chunks: ['login'],
filename: '../'+bbProperties.login.outputFile,
hash: "true", //cache busting
template: appRoot + bbProperties.login.location + "/" + bbProperties.login.inputFile
})
],
stats: {colors: true},
devtool: 'source-map',
node: {
fs: "empty"
}
};
As far as I understand, webpack will start creating a bundle from each entry file, adding any file it encounters in import statements recursively.
I also understand that I can require a package from my node_modules directory, and that in such a case webpack will search for a package.json file and import the file specified in the 'main' property of that file.
Lets say we are dependant on several packages, components and frameworks (for example: angular-ui-grid, angular-material etc...), I know I can manually import their CSS files using css loaders by importing them into my JS code.
Is there any way to automatically scan or automatically import all stylesheets used by those packages, from our node_modules folder?
I have this Webpack config for compiling CSS, JavaScript and HTML
{
entry: {
main: ['babel-polyfill', path.join(__dirname, 'clientside', 'client.js')],
styles: path.join(__dirname, 'clientside', 'styles.css')
},
output: {
path: path.join(__dirname, 'public'),
filename: '[name].js'
},
module:
{
loaders: [
{ test: /\.js$/,
loader: 'babel',
query: { presets:['es2015', 'stage-0'] }
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
}
],
},
plugins: [
new ExtractTextPlugin('./styles.css'),
new webpack.optimize.UglifyJsPlugin({ minimize: true }),
new HtmlWebpackPlugin({
template: 'clientside/index.html',
inject: 'body',
chunks: ['main'],
minify: htmlMinifierObj
})
],
}
The problem with this config is it creates an unnecessary styles.js file, I don't need it.
I also know I can include styles.css inside my JS file but I don't think it's a good idea, because I want to keep JavaScript and CSS separated.
So, my question is: how can I edit my config to get rid of this unnecessary file?