I've created webpack config to my VueJS project. I want to separate styles from javascript code. I've used mini-css-extract-plugin but finally I receive only bundle.js file. What's wrong with this config and where is a mistake? Is there any missing loader. My config is below:
import path from 'path';
import OptimizeCssAssetsPlugin from 'optimize-css-assets-webpack-plugin';
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
import VueLoaderPlugin from 'vue-loader/lib/plugin';
import UglifyJsPlugin from 'uglifyjs-webpack-plugin';
import CleanWebpackPlugin from 'clean-webpack-plugin';
const devMode = process.env.NODE_ENV !== 'production';
const prodPlugins = [
new UglifyJsPlugin(),
new MiniCssExtractPlugin({
filename: "css/style.css"
}),
new OptimizeCssAssetsPlugin({
assetNameRegExp: /\.optimize\.css$/g,
cssProcessor: require('cssnano'),
cssProcessorOptions: { discardComments: { removeAll: true } },
canPrint: true
})
];
const basicPlugins = [
new CleanWebpackPlugin('dist'),
new VueLoaderPlugin()
];
const config = {
entry: {
bundle: './src/main.js'
},
output: {
filename: 'js/[name].js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' },
{
test: /\.css$/,
use: [
devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
'css-loader'
]
},
{ test: /\.(scss|sass)$/,
use: [
devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
'vue-style-loader',
'css-loader',
'sass-loader'
]
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
js: 'babel-loader',
}
}
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {}
}
]
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
},
extensions: ['*', '.js', '.vue', '.json']
},
plugins: !process.env.NODE_ENV || !devMode ? basicPlugins : basicPlugins.concat(prodPlugins)
};
module.exports = config;
My file package.json
{
"name": "",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"watch": "webpack --watch --mode development --hot",
"dev": "webpack-dev-server --mode development --progress --hot --open",
"build": "webpack --mode production --progress"
},
"author": "",
"license": "MIT",
"devDependencies": {
"autoprefixer-loader": "^3.2.0",
"babel-core": "^6.26.3",
"babel-eslint": "^8.2.3",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.7.0",
"babel-register": "^6.26.0",
"clean-webpack-plugin": "^0.1.19",
"css-loader": "^0.28.11",
"cssnano": "^3.10.0",
"eslint": "^4.19.1",
"eslint-watch": "^3.1.4",
"mini-css-extract-plugin": "^0.4.0",
"node-sass": "^4.9.0",
"optimize-css-assets-webpack-plugin": "^4.0.1",
"sass-loader": "^7.0.1",
"sass-resources-loader": "^1.3.3",
"style-loader": "^0.21.0",
"uglifyjs-webpack-plugin": "^1.2.5",
"vue-loader": "^15.0.10",
"vue-style-loader": "^4.1.0",
"vue-template-compiler": "^2.5.16",
"webpack": "^4.8.3",
"webpack-cli": "^2.1.3",
"webpack-dev-server": "^3.1.4"
},
"dependencies": {
"axios": "^0.18.0",
"material-design-icons": "^3.0.1",
"vue": "^2.5.16",
"vue-router": "^3.0.1",
"vuetify": "^1.0.17"
}
}
Note that any imported file is subject to tree shaking. This means if you use something like css-loader in your project and import a CSS file, it needs to be added to the side effect list so it will not be unintentionally dropped in production mode.
Blockquote
in your package.json, add:
"sideEffects": [
'.scss'
]
In Webpack 4, you can add "sideEffects: true" to the loader to prevent the compiler from dropping the CSS file output by MiniCssExtractPlugin.loader (See Webpack Tree Shaking Guide). This works with Angular + TypeScript (using "module:" "ES2015" in tsconfig). I imagine it would work for your set up as well.
{
test: /\.scss$/,
include: [
helpers.root('src', 'assets')
],
sideEffects: true,
use: [
MiniCssExtractPlugin.loader,
{loader: 'css-loader'},
{loader: 'resolve-url-loader'}, // Angular only
{loader: 'sass-loader'},
]
},
Check that you have set the NODE_ENV environment variable.
In your config the extracting of css to separate files (MiniCssExtractPlugin) will only occur when building for production, in other words, when NODE_ENV is set to 'production'. When building for development style-loader is being used which will inject the css within a tag.
Related
I have developed a VueJS project. After I run the command
npm run build
a dist folder containing a build.js file, build.js.map and images, get generated.
But there is no index.html file in /dist.
My project structure looks like this
And my webpack.config.js looks like this
var webpack = require('webpack')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
rules: [
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
],
}, {
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
},
extensions: ['*', '.js', '.vue', '.json']
},
devServer: {
historyApiFallback: true,
noInfo: true,
overlay: true
},
performance: {
hints: false
},
devtool: '#eval-source-map',
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
Here is my package.json
"name": "jitsi-demo",
"description": "This is demo Jitsi Project",
"version": "1.0.0",
"author": "---",
"license": "MIT",
"private": true,
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"ajax": "0.0.4",
"jquery": "^3.5.0",
"vue": "^2.5.11"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
],
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.0",
"babel-preset-stage-3": "^6.24.1",
"copy-webpack-plugin": "^5.1.1",
"cross-env": "^5.0.5",
"css-loader": "^0.28.7",
"file-loader": "^1.1.4",
"html-webpack-plugin": "^4.2.0",
"vue-loader": "^13.0.5",
"vue-template-compiler": "^2.4.4",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.1"
}
}
I have tried using CopyWebpackPlugin and HtmlWebpackPlugin after using I get another error
^
ReferenceError: HtmlWebpackPlugin is not defined```
I am setting up mocha + chai + enzyme to test my react components.
I have set up the webpack.config.js file as below
webpack.config.js
const path = require("path");
const HtmlPlugin = require("html-webpack-plugin");
module.exports = {
node: {
fs: 'empty'
},
entry: "./App.js",
output: {
path: path.join(
__dirname, '/prod'
),
filename: "app.bundle.js",
},
module: {
rules: [
{
test: /\.js$|jsx/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
}
},
{ test: /\.js$|jsx/, use: 'mocha-loader' },
],
options: {
presets: ["es2015"]
},
},
resolve: {
extensions: ['*', '.js', '.jsx'],
},
plugins: [
new HtmlPlugin({
template: './public/index.html'
})
]
}
webpack.config.test.js
const webPackExternals = require('webpack-node-externals')
module.exports = {
mode:'development',
target: 'node',
externals: [webPackExternals()],
module: {
rules: [
{
test: /\*.test\.js$/,
use: ['mocha-loader'],
exclude: /node_modules/,
},
{ test: /\.css$/, use: 'css-loader' },
]
},
}
package.json
{
"name": "tobacco-free",
"version": "1.0.0",
"description": "",
"main": "App.js",
"scripts": {
"build": "webpack --mode production",
"dev": "webpack-dev-server --mode development --open --hot",
"start": "serve ./prod",
"test": "mocha-webpack --webpack-config webpack.config.test.js \"./src/**/*.test.js\"",
"coverage": "nyc --reporter=lcov --reporter=text npm run test"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"istanbul-instrumenter-loader": "^3.0.1",
"mapbox-gl": "^1.8.1",
"nyc": "^15.0.0",
"react": "^16.13.0",
"react-dom": "^16.13.0",
"react-redux": "^7.2.0",
"react-router-dom": "^5.1.2",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0",
"serve": "^11.3.0",
"webpack": "^4.42.0",
"webpack-cli": "^3.3.11"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "7",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"chai": "^4.2.0",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.2",
"html-webpack-plugin": "^3.2.0",
"mocha": "^7.1.1",
"mocha-loader": "^4.0.2",
"mocha-webpack": "2.0.0-beta.0",
"webpack-dev-server": "^3.10.3",
"webpack-node-externals": "^1.7.2"
}
}
When I run yarn test, I get this error
https://github.com/amkayondo/imgBank/blob/master/Annotation%202020-03-21%20173230.jpg
You may need an appropriate loader to hand
le this file type, currently no loaders are
configured to process this file.
But I don't know the loader it needs because I added the use: ['mocha-loader'] In thewebpack.config.js. Please help me with this bug
I replaced the mocha-loader with babel-loader to enable mocha to understand the .jsx files
I also replace the test: /\*.test.js$\/ with test: /\.js$|jsx/ to enable mocha to get access to the test and its component
I also add the resolve key to resolve: { extensions: ['*', '.js', '.jsx'],} in the webpack.config.test.js file to enable mocha to read js and jsx files
modified webpack.config.test.js
const webPackExternals = require('webpack-node-externals')
module.exports = {
mode:'development',
target: 'node',
externals: [webPackExternals()],
module: {
rules: [
{
test: /\.js$|jsx/,
use: 'babel-loader',
exclude: /node_modules/,
},
{ test: /\.css$/, use: 'css-loader' },
]
},
resolve: {
extensions: ['*', '.js', '.jsx'],
},
}
I'm quite new to Webpack and when I initially set it up with my project it was working great but it seems to have got much slower as my project has progressed (maybe because more and more packages get included?). It's now taking over 1 second according to the console output:
This does not seem accurate though because in reality it's taking between 5 and 10 seconds and usually I just get bored of waiting and hit F5 to reload the page because it'll just be quicker. I'd like to get back to letting HMR do it's thing but I need to figure out why it's so slow and fix before I can do that.
Here is my webpack.config.js:
/// <binding />
const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const dirName = 'wwwroot/dist';
const devMode = process.env.NODE_ENV !== "production";
console.log('path:' + path.resolve(__dirname, 'wwwroot/images'));
module.exports = {
mode: devMode ? 'development' : 'production',
devtool: "source-map",
entry: {
app: './wwwroot/js/app.ts',
addadv: './wwwroot/js/pages/adventures/addadventure.ts'
},
output: {
path: path.resolve(__dirname, dirName),
filename: '[name].bundle.js',
publicPath: '/dist/'
},
optimization: {
splitChunks: {
chunks: 'initial'
}
},
module: {
rules: [
{
test: require.resolve('jquery'),
loader: 'expose-loader?$!expose-loader?jQuery'
},
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node-modules/
},
{
test: /\.s[c|a]ss$/,
use: [
'css-hot-loader',
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'postcss-loader',
options: {
config: {
ctx: {
env: devMode ? 'development' : 'production'
}
}
}
},
'resolve-url-loader',
'sass-loader'
]
},
{
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts/'
}
}]
},
{
test: /\.(png|svg|jpg|gif)$/,
include: [
path.resolve(__dirname, 'wwwroot/images')
],
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'images',
publicPath: 'images'
}
}
]
}
]
},
resolve: {
extensions: ['.tsx', '.ts', '.js']
},
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery'
}),
new CleanWebpackPlugin(dirName, {}),
new MiniCssExtractPlugin({
filename: "bundle.css",
chunkFilename: "bundle.css"
}),
new BundleAnalyzerPlugin({
analyzerMode: 'disabled',
generateStatsFile: true,
statsOptions: { source: false }
})
]
};
and my package.json
{
"name": "tap.extranet",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"watch-dev": "webpack --watch",
"build-dev": "webpack",
"build-prod": "cross-env NODE_ENV=production webpack",
"analyse-bundles": "webpack-bundle-analyzer --port 4200 wwwroot/dist/stats.json"
},
"author": "",
"license": "ISC",
"devDependencies": {
"#fortawesome/fontawesome-free": "^5.7.2",
"#types/jquery": "^3.3.29",
"#types/jqueryui": "1.12.7",
"#types/jquery.validation": "1.16.6",
"#types/jquery-validation-unobtrusive": "3.2.32",
"#types/webpack-env": "^1.13.7",
"#types/knockout": "^3.4.64",
"aspnet-webpack": "^3.0.0",
"autoprefixer": "^9.4.7",
"clean-webpack-plugin": "^1.0.1",
"cross-env": "^5.2.0",
"css-hot-loader": "^1.4.3",
"css-loader": "^2.1.0",
"cssnano": "^4.1.8",
"expose-loader": "^0.7.5",
"file-loader": "^3.0.1",
"font-awesome-loader": "^1.0.2",
"jquery": "^3.3.1",
"mini-css-extract-plugin": "^0.5.0",
"node-sass": "^4.11.0",
"popper.js": "^1.14.7",
"postcss-loader": "^3.0.0",
"precss": "^4.0.0",
"resolve-url-loader": "^3.0.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"ts-loader": "^5.3.3",
"typescript": "^3.3.3",
"url-loader": "^1.1.2",
"webpack": "^4.29.3",
"webpack-bundle-analyzer": "^3.0.4",
"webpack-cli": "^3.2.3",
"webpack-dev-middleware": "^3.5.2",
"webpack-hot-middleware": "^2.24.3",
"knockout": "3.5.0",
"knockout-sortable": "1.1.0",
"jquery-ui": "1.12.1"
},
"-vs-binding": {
"BeforeBuild": [
"build-dev"
],
"ProjectOpened": [
"watch-dev"
]
},
"dependencies": {
"bootstrap": "^4.3.0",
"font-awesome": "^4.7.0"
}
}
and finally, here is a screenshot of my bundles:
I've tried adding cache: true to the webpack config but that didn't make any difference.
I'm using webpack and postcss-loader to autoprefix and minify my CSS, before loading it into css-loader to use css-modules. I'm having trouble with minifying CSS. Examining the emitted .js file by webpack shows the CSS isn't minified with cssnano (because I can still see whitespace characters). What am I doing wrong?
Some relevant configuration files:
webpack.config.js:
const path = require('path');
const webpack = require('webpack');
var postCompileScript = require('./postCompile');
module.exports = {
entry: './src/popup.js',
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[local]__[hash:base64:6]',
importLoaders: 1,
minimize: true
}
},
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: [
require('autoprefixer')({})
],
minimize: true
}
}
]
},
{
test: /\.(png|jpg|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 8192
}
}
]
}
]
},
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
},
mode: 'production',
resolve: {
alias: {
"react": "preact-compat",
"react-dom": "preact-compat"
},
extensions: ['.js', '.jsx']
}
};
postcss.config.js:
module.exports = {
parser: 'sugarss',
plugins: {
'postcss-import': {},
'postcss-preset-env': {},
'cssnano': {}
}
}
package.json
{
"name": "REDACTED",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config ./webpack.config.js",
"deploy": "node ftp"
},
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^9.1.2",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"css-loader": "^1.0.0",
"cssnano": "^4.1.0",
"ftp": "^0.3.10",
"post-compile-webpack-plugin": "^0.1.2",
"postcss-loader": "^3.0.0",
"prepend-file": "^1.3.1",
"style-loader": "^0.22.1",
"uglifyjs-webpack-plugin": "^1.3.0",
"url-loader": "^1.1.1",
"webpack": "^4.16.5",
"webpack-bundle-analyzer": "^2.13.1",
"webpack-cli": "^3.1.0"
},
"dependencies": {
"iframe-resizer": "^3.6.1",
"js-cookie": "^2.2.0",
"npm": "^6.4.0",
"preact": "^8.3.1",
"preact-compat": "^3.18.3",
"react": "^16.4.2",
"react-dom": "^16.4.2",
"react-iframe-resizer-super": "^0.2.0"
}
}
Thanks in advance.
For any future readers: I solved my problem by just adding the cssnano plugin to the postcss-loader in the config. Thus the css rule is as follows (webpack.config.js):
{
test: /\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[local]__[hash:base64:6]',
importLoaders: 1,
minimize: true
}
},
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: [
require('autoprefixer')({}),
require('cssnano')({ preset: 'default' })
],
minimize: true
}
}
]
}
I am trying to get React Hot Reloader to work for my ReactJS project, but I am getting an error Error: Couldn't find preset "react-hot" relative to directory...
I did set up preset "react-hot" in .babelrc but what may be the issue? I have the following set up:
In my package.json:
{
"name": "practicing_client",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js"
},
"author": "John Bana",
"license": "ISC",
"dependencies": {
"axios": "^0.14.0",
"react": "^15.3.1",
"react-cookie": "^0.4.8",
"react-dom": "^15.3.1",
"react-redux": "^4.4.5",
"react-router": "^2.7.0",
"redux": "^3.6.0",
"redux-form": "^6.0.0-rc.3",
"redux-thunk": "^2.1.0"
},
"devDependencies": {
"babel-core": "^6.14.0",
"babel-loader": "^6.2.5",
"babel-preset-es2015": "^6.14.0",
"babel-preset-react": "^6.11.1",
"babel-preset-stage-0": "^6.5.0",
"css-loader": "^0.25.0",
"extract-text-webpack-plugin": "^1.0.1",
"node-sass": "^3.9.3",
"react-hot-loader": "^3.0.0-beta.3",
"sass-loader": "^4.0.1",
"style-loader": "^0.13.1",
"webpack": "^1.13.2",
"webpack-dev-server": "^1.15.1"
}
}
In my webpack.config.js
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const config = {
context: __dirname,
entry: './src/index.js',
output: {
path: __dirname,
filename: 'bundle.js'
},
module: {
loaders: [{
exclude: /node_modules/,
test: /\.(js|jsx)$/,
loader: 'babel'
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('css!sass')
}]
},
devServer: {
historyApiFallback: true,
contentBase: './'
},
plugins: [
new webpack.DefinePlugin({ 'process.env':{ 'NODE_ENV': JSON.stringify('production') } }),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.optimize.UglifyJsPlugin({
compress: { warnings: false },
output: {comments: false },
mangle: false,
sourcemap: false,
minimize: true,
mangle: { except: ['$super', '$', 'exports', 'require', '$q', '$ocLazyLoad'] }
}),
]
};
module.exports = config;
In my .babelrc:
{
"presets": ["react-hot", "react", "es2015", "stage-0"]
}
react-hot-loader isn't used by Babel, it's used by Webpack.
Remove react-hot from your Babel presets, then add the loader to your Webpack configuration file:
loaders: [{
exclude: /node_modules/,
test: /\.(js|jsx)$/,
loaders: ['react-hot', 'babel']
},