After hours of pulling my hair out, I finally got webpack to run on an existing project, that I'm trying to port to Laravel.
When I run webpack it compiles now...
...but when I run gulp in the root, which executes Elixir, I get this error message:
node_modules/webpack/lib/NullFactory.js:9 undefined is not a function
My webpack.config.js looks like this:
var path = require('path');
var webpack = require('webpack');
var debug = process.env.NODE_ENV !== "production";
module.exports = {
devtool: 'source-map',
entry: debug ? [
'webpack-hot-middleware/client',
'./resources/assets/js/client/index'
] : [
'./resources/assets/js/client/index'
],
output: {
path: path.join(__dirname, 'public/js'),
filename: 'bundle.js',
publicPath: '/static/'
},
plugins: debug ? [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
] : [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': "'production'"
}
}),
new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false,warnings: false })
],
resolve: {
root: [
path.resolve('./resources/assets/js/client')
],
alias: {
},
},
module: {
loaders: [
// js
{
test: /\.js$/,
loaders: ['babel'],
include: path.join(__dirname, 'resources/assets/js/client')
},
// CSS
{
test: /\.styl$/,
include: path.join(__dirname, 'resources/assets/js/client'),
loader: 'style-loader!css-loader!stylus-loader'
},
{
test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'
},
{
test: /\.json?$/,
loader: 'json'
},
{ test: /\.html$/, loader: "html" }
/* {
test: /\.jsx?$/,
loader: 'babel',
exclude: /node_modules/,
query: {
cacheDirectory: true,
presets: ['react', 'es2015']
}
}*/
]
}
};
Ok, I have very outdated version of Node... upgrading fixed it.
Related
So i have a laravel/vuejs app , i'm trying to preload the css chunks that i have generated upon splitting components, it works fine but it generates an index.html. Is it possible to somehow do it in blade templates? What could be the solution?
Here is my webpack.config.js
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const {VueLoaderPlugin} = require("vue-loader");
const PreloadWebpackPlugin = require('preload-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require("path");
module.exports = {
entry: {
main: "./resources/js/app.js",
},
output: {
publicPath: '/',
path: path.resolve(__dirname, "public"),
},
plugins: [
new HtmlWebpackPlugin(),
new VuetifyLoaderPlugin(),
new VueLoaderPlugin(),
new MiniCssExtractPlugin({
filename: `components/[name].css`
}),
new PreloadWebpackPlugin({
rel: 'preload',
include: 'asyncChunks', // can be 'allChunks' or 'initial' or see more on npm page
fileBlacklist: [/\.map|.js/], // here may be chunks that you don't want to have preloaded
})
],
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
},
"css-loader"
]
},
{
test: /\.js$/,
loader: 'babel-loader',
},
{
test: /\.s[ac]ss$/i,
use: [
// Translates CSS into CommonJS
'css-loader',
// Compiles Sass to CSS
'sass-loader',
],
},
{
test: /\.vue$/,
loader: "vue-loader",
options: {
extractCSS: true
}
},
],
},
resolve: {
extensions: ['.js', '.vue'],
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
},
optimization: {
splitChunks: {
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/](vue|axios|jquery|bootstrap)[\\/]/,
name: 'vendor',
chunks: 'all'
}
}
}
}
}
And one final question , is it better to preload/prefetch the js chunks too? ( to optimize the performance )
My scss files are not getting compiled. It doesn't understand what I do with my code. I want to be able to use Sass instead of CSS but I can't find the right way to compile Sass.
I am using the webpack template with Vue.js
My webpack config file looks like this:
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: './src/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'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'#': resolve('src'),
}
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /\.scss$/,
use: [ 'style-loader','css-loader','sass-loader' ],
loaders: ['style', 'css', 'sass']
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), 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]')
}
}
]
}
}
One way of doing it is to have a single scss file as an entry. This is where all your different scss file gets imported. Something like this. Then you import that scss file in source code of your js entry file (in this case ./src/main.js). So when webpack reads your main.js it will see import './myscssfile.scss' and looks for a loader (or I think it does). Here is how I do my scss module in webpack2:
module: {
rules: [
// my js stuff
{ test: /\.js$/, enforce: 'pre', loader: 'eslint-loader', exclude: /node_modules/ },
// my scss stuff
{
test: /\.scss$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
modules: true,
importLoaders: 2,
sourceMap: true,
localIdentName: '[local]___[hash:base64:5]'
}
},
{
loader: 'autoprefixer-loader',
options: {
browsers: 'last 2 version'
}
},
{
loader: 'sass-loader',
options: {
outputStyle: 'expanded',
sourceMap: true
}
}
]
}
]
}
I hope it works.
Just use <style lang="sass"></style in your component. Let me know if it helps.
I've spent last few hours to set up a new project utilizing Webpack 2 and Babel 6.
The problem I have is non working debugger (any browser). Breakpoints are simply ignored. Using debugger; works fine but browser does not breaks execution exactly in that line.
webpack.config.js:
const path = require("path");
module.exports = {
entry: path.resolve(__dirname, "src", "index.js"),
output: {
filename: "app.js",
path: path.resolve(__dirname, "dist")
},
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader"
}]
},
devServer: {
contentBase: path.resolve(__dirname, "dist")
}
};
.babel.rc:
{
"presets": [
"latest"
]
}
I'm running the whole thing with webpack-dev-server -d
devtool: "source-map", option in webpack config should solve your problem.
entry: ['babel-polyfill', './src/index.jsx'],
output: {
filename: 'js/bundle.[hash].js',
path: path.resolve(__dirname, 'build'),
publicPath: '/'
},
resolve: {
extensions: ['.js', '.jsx'],
alias: {
config: path.join(__dirname, `config/${env}.configuration.js`)
}
},
**devtool: "source-map",**
module: {
rules: [
{
test: require.resolve('jquery'),
use: [
{
loader: 'expose-loader',
options: 'jQuery'
}
]
},
Having the following webpack configuration for assets compiling I can't get autoprefixer to work. The extracted css does not get the needed prefixes.
var webpack = require('webpack'),
precss = require('precss'),
autoprefixer = require('autoprefixer'),
ExtractTextPlugin = require('extract-text-webpack-plugin'),
path = require('path');
const sassLoaders = [
'css-loader!autoprefixer-loader?browsers=last 2 version',
'postcss-loader',
'sass-loader?indentedSyntax=sass&includePaths[]=' + path.resolve(__dirname, '.')
]
const config = {
entry: {
//nsb: ['./js/nsb']
dashboard: ['./js/dashboard']
},
module: {
loaders: [
{
test: /\.sass$/,
loader: ExtractTextPlugin.extract('style-loader', sassLoaders.join('!'))
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('css!sass')
},
{
test: /\.docs\.css$/,
loader: "style-loader!css-loader!postcss-loader?pack=cleaner"
},
{
test: /\.css$/,
loader: "style-loader!css-loader!postcss-loader"
},
{ 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" }
]
},
postcss: function () {
return {
defaults: [precss, autoprefixer],
cleaner: [autoprefixer({ browsers: [] })]
};
},
output: {
filename: '[name].js',
path: path.join(__dirname, './build'),
publicPath: '/bundles/dashboard/build/'
},
amd: {jQuery: true},
plugins: [
new ExtractTextPlugin('[name].css'),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
}),
new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js', Infinity)
],
/* postcss: [
autoprefixer({
browsers: ['last 2 versions']
})
],
*/
resolve: {
alias: {
jquery: 'node_modules/jquery/dist/jquery.js',
magnificPopup: 'node_modules/maginific-popup/dist/jquery.magnific-popup.js' //JQuery Plugin
},
modulesDirectories: ['./js', 'node_modules'],
extensions: ['', '.js', '.sass'],
root: [path.join(__dirname, './')]
}
}
module.exports = config;
The css-loader comes with it's own autoprefixer config you will need to disable this in order for your config to work. So wherever you have css-loader you need to do add to disable the css-loader autoprefixer.
css-loader?-autoprefixer
More info can found here & here
So your config will look like this
var webpack = require('webpack'),
precss = require('precss'),
autoprefixer = require('autoprefixer'),
ExtractTextPlugin = require('extract-text-webpack-plugin'),
path = require('path');
const sassLoaders = [
'css-loader?-autoprefixer!autoprefixer-loader?browsers=last 2 version',
'postcss-loader',
'sass-loader?indentedSyntax=sass&includePaths[]=' + path.resolve(__dirname, '.')
]
const config = {
entry: {
//nsb: ['./js/nsb']
dashboard: ['./js/dashboard']
},
module: {
loaders: [
{
test: /\.sass$/,
loader: ExtractTextPlugin.extract('style-loader', sassLoaders.join('!'))
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('css!sass')
},
{
test: /\.docs\.css$/,
loader: "style-loader!css-loader?-autoprefixer!postcss-loader?pack=cleaner"
},
{
test: /\.css$/,
loader: "style-loader!css-loader?-autoprefixer!postcss-loader"
},
{ 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" }
]
},
postcss: function () {
return {
defaults: [precss, autoprefixer],
cleaner: [autoprefixer({ browsers: [] })]
};
},
output: {
filename: '[name].js',
path: path.join(__dirname, './build'),
publicPath: '/bundles/dashboard/build/'
},
amd: {jQuery: true},
plugins: [
new ExtractTextPlugin('[name].css'),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
}),
new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js', Infinity)
],
/* postcss: [
autoprefixer({
browsers: ['last 2 versions']
})
],
*/
resolve: {
alias: {
jquery: 'node_modules/jquery/dist/jquery.js',
magnificPopup: 'node_modules/maginific-popup/dist/jquery.magnific-popup.js' //JQuery Plugin
},
modulesDirectories: ['./js', 'node_modules'],
extensions: ['', '.js', '.sass'],
root: [path.join(__dirname, './')]
}
}
module.exports = config;
Also, I think you can remove the autoprefixer-loader that you have inside your sassLoaders since you are using PostCSS with autoprefixer.
You could try the following code, notice the addition of "?-autoprefixer" between css-loader and postcss-loader.
var webpack = require('webpack'),
precss = require('precss'),
autoprefixer = require('autoprefixer'),
ExtractTextPlugin = require('extract-text-webpack-plugin'),
path = require('path');
const sassLoaders = [
'css-loader!autoprefixer-loader?browsers=last 2 version',
'postcss-loader',
'sass-loader?indentedSyntax=sass&includePaths[]=' + path.resolve(__dirname,
'.')
]
const config = {
entry: {
//nsb: ['./js/nsb']
dashboard: ['./js/dashboard']
},
module: {
loaders: [
{
test: /\.sass$/,
loader: ExtractTextPlugin.extract('style-loader', sassLoaders.join('!'))
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('css!sass')
},
{
test: /\.docs\.css$/,
loader: "style-loader!css-loader?-autoprefixer!postcss-loader?pack=cleaner"
},
{
test: /\.css$/,
loader: "style-loader!css-loader?-autoprefixer!postcss-loader"
},
{ 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" }
]
},
postcss: function () {
return {
defaults: [precss, autoprefixer],
cleaner: [autoprefixer({ browsers: [] })]
};
},
output: {
filename: '[name].js',
path: path.join(__dirname, './build'),
publicPath: '/bundles/dashboard/build/'
},
amd: {jQuery: true},
plugins: [
new ExtractTextPlugin('[name].css'),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
}),
new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js', Infinity)
],
/* postcss: [
autoprefixer({
browsers: ['last 2 versions']
})
],
*/
resolve: {
alias: {
jquery: 'node_modules/jquery/dist/jquery.js',
magnificPopup: 'node_modules/maginific-popup/dist/jquery.magnific-popup.js' //JQuery Plugin
},
modulesDirectories: ['./js', 'node_modules'],
extensions: ['', '.js', '.sass'],
root: [path.join(__dirname, './')]
}
}
module.exports = config;
One more note: In my project's root directory I also have a postcss.config.js with the following content:
module.exports = {
parser: 'postcss-scss',
plugins: [
require('autoprefixer'),
]
}
Is there a way to get webpack to "recompile" sass and reload your page on the fly?
I've been searching around but have not found an example.
Here is what I've got:
My folder structure
-app
---public
------dist
---------index.html
---------sass
------------webpack.scss
It seems like my sass only recompiles when I run webpack but it doesn't recompile when I am running the webpack-dev-server
var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var webpack = require('webpack');
module.exports = {
entry: {
app: './app/main.js',
//All 3rd party source
vendor: ['react', 'redux', 'lodash']
},
output: {
path: path.join(__dirname, 'app', 'public', 'dist'),
publicPath: '/app/public/dist/',
filename: 'app.js'
},
module: {
loaders: [
{ test: /\.js$/, loaders: ['react-hot', 'babel'], exclude: /node_modules/ },
{ test: /.jsx?$/, loader: 'babel-loader', exclude: /node_modules/ },
{ test: /\.css/, loader: ExtractTextPlugin.extract('css') },
{ test: /\.scss$/, loader: ExtractTextPlugin.extract('!css!sass?sourceMap') }
]
},
sassLoader: {
includePaths: [ path.resolve(__dirname, './app/public/sass/')]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new webpack.optimize.CommonsChunkPlugin("vendor", "vendor.js", Infinity),
new ExtractTextPlugin('./css/style.css',{
allChunks: true
})
],
debug: true,
//watch: true
};