My webpack build has 2 entries the vendor.js => vendor.js file and index.js => bundle.js.
Obviously vendor.js is the file where all the 3rd party libraries go, and in index.js goes my code.
I've been encountering some issues, many of the 3rd party libraries I include (in vendor.js), does not execute from bundle.js . Why is that?
My webpack configuration:
import path from 'path';
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var CopyWebpackPlugin = require('copy-webpack-plugin');
var precss = require('precss');
var autoprefixer = require('autoprefixer');
module.exports = {
entry: {
bundle: './dev/index.js',
vendor: './dev/vendor.js'
},
output: {
path: path.join(__dirname, 'dist'),
// publicPath: 'http://localhost:3000/',
filename: '[name].[hash].js',
chunkFilename: '[id].bundle.js'
},
externals: [
{
"./dev/assets/Paraxify/paraxify.js": "paraxify",
}
],
module: {
loaders: [
{
test: /\.js$/,
// exclude: path.resolve(__dirname, "node_modules"),
loader: 'babel-loader',
// exclude: [
// path.resolve(__dirname, "node_modules"),
// ],
query: {
compact: true,
plugins: ["transform-es2015-modules-commonjs"],
presets: ['es2015', 'stage-0']
}
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract(
"style",
"css!postcss-loader!sass")
},
// { test: /jquery/, loader: 'expose?$!expose?jQuery' },
{ test: /\.jpg$/, loader: "file-loader?name=./assets/imgs/[name].jpg" },
{ test: /\.png$/, loader: "file-loader?name=./assets/imgs/[name].png" },
{ test: /\.(gif|woff|woff2|eot|ttf|svg)$/, loader: "url-loader" },
// { test: /\grabbing.gif$/, loader: "url-loader" },
// { test: /\preloader.gif$/, loader: "url-loader" },
// { test: /\default-skin.svg$/, loader: "url-loader" },
// { test: /\/default-skin.png$/, loader: "url-loader" }
// { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }
]
},
postcss: function () {
return [precss, autoprefixer];
},
plugins: [
new CopyWebpackPlugin([
{ from: './dev/assets', to: 'assets' }
]),
new CopyWebpackPlugin([
{ from: './dev/bootstrap3', to: 'bootstrap3' }
]),
new webpack.optimize.CommonsChunkPlugin({
name: ['bundle', 'vendor']
}),
new HtmlWebpackPlugin({
hash: false,
template: 'ejs!./dev/index.html',
inject: 'body'
}),
new ExtractTextPlugin("styles.[hash].css"),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
}),
// new webpack.ProvidePlugin({
// twentytwenty: "frontend/dev/assets/twentytwenty/js/jquery.twentytwenty"
// })
]
};
Example of the issue :
Vendor.js : Importing Scrollreveal (https://scrollrevealjs.org/)
import $ from 'jquery';
// import 'eqcss';
// import Rx from 'rx';
import * as ScrollReveal from 'scrollreveal';
And when I do : window.sr = ScrollReveal({ reset: true }); for the variable to be available globally, I get an error in the browser's console : Uncaught TypeError: ScrollReveal is not a function
Can someone explain me What I'm doing incorrectly? Thanks
Related
Below is the webpack config code and it's size is around 6.2 MB. In production mode it looks more time load the signin page url and from second time onwards it looks good , the problem with first time and need suggestion to reduce the bundle.js file size
webpack.base.js
module.exports = {
//Running babel to every file
module: {
rules: [
{
test: /\.js?$/,
loader: 'babel-loader',
exclude: /node_modules/,
options: {
presets: [
'react',
'stage-0',
['env', { targets: { browsers: ['last 2 versions'] } }]
]
}
}, {
test: /\.css$/,
loader: "style-loader!css-loader"
},
{
test: /\.less$/,
use:[
{
loader: "style-loader"
},
{
loader: 'css-loader'
},
{
loader: "less-loader"
}
]
},
{
test: /\.(jpe?g|png|gif|woff|woff2|eot|ttf|svg|otf)(\?[a-z0-9=.]+)?$/,
loader: 'url-loader?limit=100000'
}
]
}//end module
}
webpack.client.js:
const config = {
entry: './src/client/client.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'public')
}
};
module.exports = merge(baseConfig, config)
webpack.server.js:
const server_config = {
//letting webapck know that this bundle is created for node server.
target: 'node',
entry: './src/server/server.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'build')
},
externals: [webpackNodeExternals()],
node:{
__dirname:false
}
};
module.exports = merge(baseConfig, server_config);
Here is how I optimize webpack. You can view my full config here
First you need to run webpack production mode when you want to build in production
webpack -p --mode=production
Below is minial config
const path = require("path");
const webpack = require("webpack");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CompressionPlugin = require("compression-webpack-plugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const WebpackShellPlugin = require('webpack-shell-plugin');
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
module.exports = {
optimization: {
minimizer: [
new UglifyJsPlugin({ // minify js file
cache: true,
parallel: true,
sourceMap: false,
extractComments: 'all',
uglifyOptions: {
compress: true,
output: null
}
}),
new OptimizeCSSAssetsPlugin({ // minify css
cssProcessorOptions: {
safe: true,
discardComments: {
removeAll: true,
},
},
})
]
},
plugins: [
new CompressionPlugin({ // gzip js and css
test: /\.(js|css)/
}),
new UglifyJsPlugin(), // uglify js
new WebpackShellPlugin({
onBuildStart: ['echo "Starting postcss command"'],
onBuildEnd: ['postcss --dir wwwroot/dist wwwroot/dist/*.css'] // uglify css using postcss
})
],
module: {
rules: [{
test: /\.scss$/,
use: [
'style-loader',
MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: {
minimize: true,
sourceMap: true
}
},
{
loader: "sass-loader"
}
]
},
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: ["babel-loader", "eslint-loader"]
},
{
test: /\.(jpe?g|png|gif)$/i,
loader: "file-loader"
},
{
test: /\.(woff|ttf|otf|eot|woff2|svg)$/i,
loader: "file-loader"
}
]
}
};
I am trying to integrate Webpack 2 into the build process of an AngularJS 1.6 application. I am actually trying to extract the CSS from the generated HTML using the ExtractTextPlugin.
The problem is when I extract the CSS file using the ExtractTextPlugin:
The CSS is extracted into an external file styles.css but it isn't loaded on the page unless I make a change on the CSS file in the chrome console (Even just adding a space) Here I added a space and the CSS was loaded.
I don't understand why isn't the CSS loaded on first run and why does it load when I make any small change.
More Details:
I have been following this tutorial on SurviveJS and other tutorials on the survivejs website and main Webpack website.
This is my current Webpack Configuration file:
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack')
const path = require('path')
const ngAnnotatePlugin = require('ng-annotate-webpack-plugin');
const FaviconsWebpackPlugin = require('favicons-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin');
const fs = require('fs');
const gracefulFs = require('graceful-fs');
const TypedocWebpackPlugin = require('typedoc-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const cssnano = require('cssnano');
const posthtml = require('posthtml');
gracefulFs.gracefulify(fs);
module.exports = {
entry: {
main: './src/index.ts'
},
output: {
filename: '[name].[chunkhash].js',
path: path.resolve(__dirname, '../dist'),
publicPath: '../'
},
plugins: [
new CleanWebpackPlugin(['dist'], {
root: __dirname + "/../",
verbose: true
}),
new ngAnnotatePlugin({
add: true
}),
new webpack.optimize.UglifyJsPlugin(),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
'window.jquery': 'jquery'
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: function (module) {
return module.context
&& (module.context.indexOf('node_modules') !== -1 || module.context.indexOf('bower_components') !== -1);
}
}),
//CommonChunksPlugin will now extract all the common modules from vendor and main bundles
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest'
}),
new webpack.LoaderOptionsPlugin(),
new HtmlWebpackPlugin({
template: './src/index.html',
inject: 'body',
hash: true
}),
new CopyWebpackPlugin([{
context: 'raw/',
from: '**/*',
}]),
new OptimizeCssAssetsPlugin({
cssProcessor: cssnano,
cssProcessorOptions: {
discardComments: {
removeAll: true
}
},
canPrint: true
}),
new ExtractTextPlugin("styles.css")
],
module: {
loaders: [
{
test: /\.ts(x?)$/,
loader: 'ts-loader'
},
{
test: /\.less$/i,
use: ExtractTextPlugin.extract({
fallback: ['style-loader', 'css-loader', 'less-loader'],
use: ['css-loader', 'less-loader']
})
},
{
test: /\.html$/,
exclude: /node_modules/,
use: [
{
loader: 'html-loader',
options: {
minimize: true
}
}
]
},
{
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'
},
{
test: /\.(gif|png|jpe?g|svg|ico)$/i,
loaders: [
'file-loader',
{
loader: 'image-webpack-loader',
query: {
mozjpeg: {
progressive: true,
},
gifsicle: {
interlaced: false,
},
optipng: {
optimizationLevel: 7,
},
pngquant: {
quality: '75-90',
speed: 3,
},
}
}
]
},
{
test: /\.ts$/,
enforce: "pre",
loader: 'tslint-loader'
},
{
test: /^((?!\.spec\.ts).)*.ts$/,
enforce: "post",
exclude: /(node_modules|bower_components)/,
loader: 'istanbul-instrumenter-loader'
}
]
},
resolve: {
extensions: [".tsx", ".ts", ".js"],
modules: [path.resolve(__dirname, "src"), "node_modules", "bower_components"]
}
};
I get this error in app.js:
Uncaught ReferenceError: require is not defined
Why webpack require not work? Is any additional wabpack configutarion needed to make this work?
webpack.config.js
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: ['./src/app.js', './src/styles/styles.scss'],
output: {
filename: 'dist/bundle.js'
},
resolve: {
extensions: ['.js'],
},
module: {
rules: [
{ // regular css files
test: /\.css$/,
loader: ExtractTextPlugin.extract({
loader: 'css-loader?importLoaders=1',
}),
},
{ // sass / scss loader for webpack
test: /\.(sass|scss)$/,
loader: ExtractTextPlugin.extract(['css-loader', 'sass-loader'])
},
{
test: /\.hbs$/,
loader: 'handlebars-loader'
}
]
},
plugins: [
new ExtractTextPlugin({ // define where to save the file
filename: 'dist/[name].bundle.css',
allChunks: true,
}),
],
};
app.js
const something = require("./something.js");
Webpack generates too large a file
Webpack 2.x
Webpack experts, i now want to connect css in thejs file
How i include
import 'bootstrap/dist/css/bootstrap-theme.min.css';
import 'bootstrap-select/dist/css/bootstrap-select.min.css';
import 'bootstrap-multiselect/dist/css/bootstrap-multiselect.css';
import 'font-awesome/css/font-awesome.min.css';
import 'angular-ui-notification/dist/angular-ui-notification.min.css';
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';
import '../css/styles.css';
import '../css/custom.css';
import '../css/max-width_767.css';
webpack config
var glob = require('glob'),
ngAnnotate = require('ng-annotate-webpack-plugin'),
ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry: __dirname + '/application/application.js',
output: {
path: __dirname + '/build',
filename: 'bundle.js'
},
plugins: [
new ngAnnotate({
add: true,
}),
new ExtractTextPlugin({
filename: '[name].css',
})
],
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel-loader',
query: {
presets: ['babel-preset-es2015'].map(require.resolve)
},
exclude: /(node_modules|bower_components)/
},
{
test: /\.(png|woff|woff2|eot|ttf|svg|gif|jpg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'url-loader'
},
{
test: /\.css$/,
loader: 'style-loader!css-loader'
}
]
},
node: {
fs: 'empty'
}
};
That's what i'm getting out of the way, a huge bundle.js file is probably 5 MB with all fonts, pictures, etc.
bundle.js 5.53 MB 0 [emitted] [big] main
I just want to concatenate only css and output to bundle.css
What am I doing wrong ?
You have included extract-text-plugin but you dont actually seem to be using it.
Change here:
{
test: /\.css$/,
loader: 'style-loader!css-loader'
}
To something like:
{
test: /\.css$/,
loader: ExtractTextPlugin.extract({
fallbackLoader: "style-loader",
loader: "css-loader"
})
}
it's answer
It was necessary to look at the limit
var glob = require('glob'),
ngAnnotate = require('ng-annotate-webpack-plugin'),
ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: __dirname + '/application/application.js',
output: {
path: __dirname + '/build',
filename: 'bundle.js'
},
plugins: [
new ngAnnotate({
add: true,
}),
new ExtractTextPlugin('bundle.css'),
],
resolve: {
alias: {
moment: __dirname + '/node_modules/moment/min/moment'
},
},
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel-loader',
query: {
presets: ['babel-preset-es2015'].map(require.resolve)
},
exclude: /(node_modules|bower_components)/
},
{
test: /\.(png|woff|woff2|eot|ttf|svg|gif|jpg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'url-loader',
options: {
limit: 1000
}
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
})
}
]
},
node: {
fs: 'empty'
},
devServer: {
historyApiFallback: true
}
};
I begin to leart webpack and stack. In code below doesn't create new css file and 'main.css' and i don't understand why. Code ends successfully and jade>html creating.
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry: "./src/main.js",
output: {
path: "dist",
filename: "bundle.js"
},
module: {
loaders: [
{
test: /\.js$/,
loader: "babel-loader",
options: { presets: ["es2015"] }
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style','css')
},
{
test: /\.jade$/,
loader: "jade"
}]
},
plugins: [
new ExtractTextPlugin("main.css"),
new HtmlWebpackPlugin({
template: './src/jade/index.jade'
})
]
};