How to use this package with laravel 6?
in my laravel project does not have webpack.config.js.
How use this webpack config with my laravel 6 project
module.exports = {
// ...
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
compiler: require('vue-template-babel-compiler')
}
}
]
}
}
https://github.com/JuniorTour/vue-template-babel-compiler/blob/main/doc/Usage.md#2-Webpack
thank you.
Sorry for my english
Related
I recently upgraded tom Next.js 11 and so I use the storybook webpack5 beta as well. But when I add the sass-loader to the config:
// .storybook/main.js
const path = require('path');
module.exports = {
core: {
builder: "webpack5",
},
stories: ['../stories/*.stories.#(ts|tsx|js|jsx|mdx)'],
addons: ['#storybook/addon-links', '#storybook/addon-essentials'],
webpackFinal: async (config, { configType }) => {
config.module.rules.push({
test: /\.s[ac]ss$/i,
use: [
"style-loader",
"css-loader",
"sass-loader",
],
},);
return config;
},
}
So when I start storybook then, the example has no className at all:
And the .index class has not compiled by sass like it should in a module:
To see it yourself you can checkout my example here
For Storybook you can use the Storybook Saas Addon which works just fine.
I am stuck when trying to use the "file.gql". Here my next.config.js file
module.exports = {
modules: {
rules: [
{
test: /\.(graphql|gql)$/,
exclude: /node_modules/,
loader: 'graphql-tag/loader',
},
]}
}
and this error message I got
Could you show me the right way to config this loader? thanks.
I am using a vue-cli 3/webpack 4 project .
My build is generated on AWS Codebuild which starts a new VM instance for each build.
Cache -loader in webpack caches the results of babel-loader, vue-loader and terser. But since I run a new instance VM every time I don’t take advantage of this.
If the caching itself has some overhead ,it’s better I turn it off then as suggested in some places like here.
How do I configure webpack via vue.conf object to remove the cache loader .
Thanks
My project generated webpack config for production is
rules: [
/* config.module.rule('vue') */
{
test: /\.vue$/,
use: [
/* config.module.rule('vue').use('cache-loader') */
{
loader: 'cache-loader',
options: {
cacheDirectory: '/Users/digitalsuppliers/work/new_build_branch/bmsconsole-client/node_modules/.cache/vue-loader',
cacheIdentifier: '22f91b09'
}
},
/* config.module.rule('vue').use('vue-loader') */
{
loader: 'vue-loader',
options: {
compilerOptions: {
preserveWhitespace: false
},
cacheDirectory: '/Users/digitalsuppliers/work/new_build_branch/bmsconsole-client/node_modules/.cache/vue-loader',
cacheIdentifier: '22f91b09'
}
}
]
},
{
test: /\.jsx?$/,
exclude: [
function () { /* omitted long function */ }
],
use: [
/* config.module.rule('js').use('cache-loader') */
{
loader: 'cache-loader',
options: {
cacheDirectory: '/Users/digitalsuppliers/work/new_build_branch/bmsconsole-client/node_modules/.cache/babel-loader',
cacheIdentifier: 'e8179b56'
}
},
/* config.module.rule('js').use('thread-loader') */
{
loader: 'thread-loader'
},
/* config.module.rule('js').use('babel-loader') */
{
loader: 'babel-loader'
}
]
}
One solution is to disable cache either completely or only in production/development based on condition.
In order to use it open your vue.config-js and write there
module.exports = {
chainWebpack: config => {
// disable cache for prod only, remove the if to disable it everywhere
// if (process.env.NODE_ENV === 'production') {
config.module.rule('vue').uses.delete('cache-loader');
config.module.rule('js').uses.delete('cache-loader');
config.module.rule('ts').uses.delete('cache-loader');
config.module.rule('tsx').uses.delete('cache-loader');
// }
},
In this example I've commented out the condition, so cache-loader is not used at all.
if you mount the vue-component by routing, would you trying to import component to async-way? not sync-way.
when router/index.js loaded..
then may be help you.
ex.
component: () => ({
component: import('#/views/your/pageComponent.vue'),
loading: this.loading,
error: this.error,
delay: this.delay,
timeout: this.timeout,
})
I am trying to use this package to use my scss as javascript objects in my React part of my Laravel project.
Now when I try do add the rule to my webpack.mix.js folder I always get the following error for all my .scss files
ERROR in ./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/lib??postcss!./node_modules/resolve-url-loader??ref--5-4!./node_modules/sass-loader/lib/loader.js??ref--5-5!./node_modules/css-loader??ref--9-0!./resources/assets/sass/app.scss
Module build failed:
^
Invalid CSS after "e": expected 1 selector or at-rule, was "exports = module.ex"
in /Users/user/Desktop/project/resources/assets/sass/app.scss (line 1, column 1)
# ./resources/assets/sass/app.scss 2:14-318
# multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss
my webpack.mix.js file:
let mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.react('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
mix.webpackConfig({
module: {
rules: [
{
test: /\.scss$/,
use: [
{
loader: "css-loader",
options: {
modules: true
}
}
]
}
]
}
});
EDIT
I've updated my webpack.mix.js and added the sass-loader but same error
mix.webpackConfig({
module: {
rules: [
{
test: /\.scss$/,
use: [
{
loader: "css-loader",
options: {
modules: true
}
},
{
loader: "sass-loader",
options: {
modules: true
}
}
]
}
]
}
});
I have found a very nice npm package that fixed all my issues:
https://github.com/leinelissen/laravel-mix-react-css-modules
There is no modules option to sass-loader. Also install style-loader
Try:
module: {
rules: [
{
test: /\.scss$/,
use: [
'style-loader',
{
loader: "css-loader",
options: {
modules: true
}
},
'sass-loader'
]
}
]
}
I am working on application that needs to be run on IE 8 enterprise version.I am getting following errors in the console:
Expected identifier : ;
indexOf is not available for the object.
For solving this I read this question on stackoverflow:
Babel 6.0.20 Modules feature not work in IE8
It suggests
transform-es3-member-expression-literals
transform-es3-property-literals
to be added.
But using this in webpack is not mentioned any where,not on babel official site.
Can anyone suggest the way how can I use it as a plugin to my project.
Note:I have already tried doing
var es3MemberExpressionLiterals = require('babel-plugin-transform-es3-member-expression-literals');
var es3PropertyLiterals = require('babel-plugin-transform-es3-property-literals');
plugins = [// Plugins for Webpack
new webpack.optimize.UglifyJsPlugin({minimize: false}),
new HtmlWebpackPlugin({
template: 'index.html', // Move the index.html file...
minify: { // Minifying it while it is parsed using the following, self–explanatory options
removeComments: false,
collapseWhitespace: false,
removeRedundantAttributes: false,
useShortDoctype: false,
removeEmptyAttributes: false,
removeStyleLinkTypeAttributes: false,
keepClosingSlash: true,
minifyJS: false,
minifyCSS: true,
minifyURLs: false
}
})
new es3MemberExpressionLiterals(),
new es3PropertyLiterals()
];
I've created a demo repository on github to show the full configuration by an example.
To get the two plugins running create a .babelrc file, with the following content
{
"plugins": [
"transform-es3-member-expression-literals",
"transform-es3-property-literals"
]
}
In the standard configuration babel-loader in your webpack.config.js babel takes a look into the .babelrc to configure plugins.
// webpack.config.js (partial code only)
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
}
]
}
If everything is set up correctly webpack should transform the following code
// src/main.js
var foo = { catch: function() {} };
console.log(foo.catch)
into
// bundle.js
/* 0 */
/***/ function(module, exports) {
var foo = { "catch": function () {} };
console.log(foo["catch"]);
/***/ }
See also the examples for the plugins: babel-plugin-transform-es3-property-literals and babel-plugin-transform-es3-member-expression-literals.
The question you link to is about Babel plugins, and you are trying to pass them as Webpack plugins. You'd need to set up Babel as a loader for your application and pass the plugins to that. Merge the following into your Webpack configuration.
module: {
loaders: [{
loader: 'babel',
test: /\.js$/,
exclude: /node_modules/,
plugins: [
'babel-plugin-transform-es3-member-expression-literals',
'babel-plugin-transform-es3-property-literals',
],
}],
},