I just use simple grunt-webpack and it is not working.
Always get 404. I need to use the Angular 2 router I can see webpack-dev-server is not working, not serving.
In the config I tried:
output: {
path: root(folder.build.dist.root),
publicPath: '/',
filename: '[name].js',
chunkFilename: '[id].chunk.js'
},
devServer: {
historyApiFallback: {
index: '/index.html'
},
stats: true,
inline: true,
progress: true
}
Yes, a fixed it!
I was using grunt-webpack, so the config devServer not working.
I had to add the devServer config with grunt like this:
"webpack-dev-server": {
options: {
webpack: webpackConfigDev,
},
'cory-run': webpackConfigDev.devServer
},
Related
I only used Vite with the default settings so far, but now I am trying to migrate an old Vue 2 project to Vue 3 and trying to use Vite instead of webpack.
I have the following vue.config.js (excerpt)
var path = require('path');
module.exports = {
filenameHashing: false,
outputDir: 'src/main/resources/public/clientlibs/vue-dist',
css: {
extract: false,
},
pages: {
'attachments': {
entry: 'src/vue/pages/attachments/main.ts',
chunks: ['chunk-vendors', 'chunk-common', 'attachments'],
},
'base': {
entry: 'src/vue/pages/base/main.ts',
chunks: ['chunk-vendors', 'chunk-common', 'base'],
},
'templates': {
entry: 'src/vue/pages/templates/main.ts',
chunks: ['chunk-vendors', 'chunk-common', 'templates'],
},
},
configureWebpack: {
output: {
libraryExport: 'default',
filename: '[name].js',
chunkFilename: 'chunks/[name].js',
},
resolve: {
alias: {
'#': path.resolve(__dirname, 'src/vue'),
},
},
},
}
Reading the documentation I can use this for the vite.config.js:
import { defineConfig } from 'vite'
export default defineConfig({
build: {
lib: [
{
entry: 'src/vue/pages/attachments/main.ts',
fileName: 'attachments',
},
{
entry: 'src/vue/pages/base/main.ts',
fileName: 'base',
},
{
entry: 'src/vue/pages/templates/main.ts',
fileName: 'templates',
},
]
}
});
But how do I manage to have the chunk-vendors (3rd party plugins) and chunk-common (own shared code) extracted as well with proper tree shaking?
Also relevant how does the rollupOptions look like to have something similar as the configureWebpack section?
When I run npm run start for my project, my HTML and JS work great, but my CSS does not render. Screenshot below.
I bundled using webpack. I'm absolutely certain (and double checked) that my style.css file is linked in my index.html file.
My webpack.config.js file is below - could the issue lay there?
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: ['babel-polyfill', './src/js/index.js'],
output: {
path: path.resolve(__dirname, 'src'),
filename: 'js/bundle.js'
},
devServer: {
contentBase: './dist'
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: './src/index.html'
})
],
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader:'babel-loader'
}
}
]
}
};
File Path:
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.
I am working with the gatsby-source-wordpress plugin
If I hard code my API keys/secret into my Gatsby.config, everything works fine, but I want to add these as .env variables so that I can .gitignore for deployment, and this is where things are breaking.
At the root of my directory, I have a .env file which looks like this
CLIENT_SECRET=10987654321
CLIENT_ID=123456
USER=secret#secret.com
PASS=mypassword1
I'm then try to access these in gatsby.config, like this
require('dotenv').config({
path: `.env.${process.env.NODE_ENV}`
});
module.exports = {
siteMetadata: {
title: 'Gatsby Default Starter',
},
plugins: [
{
resolve: 'gatsby-source-wordpress',
options: {
baseUrl: 'myurl.com',
protocol: 'http',
hostingWPCOM: true,
useACF: false,
auth: {
wpcom_app_clientSecret: `${process.env.CLIENT_SECRET}`,
wpcom_app_clientId: `${process.env.CLIENT_ID}`,
wpcom_user: `${process.env.USER}`,
wpcom_pass: `${process.env.PASS}`,
},
},
},
{
resolve: `gatsby-plugin-emotion`,
},
'gatsby-plugin-react-helmet',
{
resolve: `gatsby-plugin-manifest`,
options: {
name: 'gatsby-starter-default',
short_name: 'starter',
start_url: '/',
background_color: '#663399',
theme_color: '#663399',
display: 'minimal-ui',
icon: 'src/images/gatsby-icon.png', // This path is
relative to the root of the site.
},
},
'gatsby-plugin-offline',
],
}
which is returning the following errors when I run either gatsby develop or gatsby build
source and transform nodesThe server response was "400 Bad Request"
source and transform nodesThe server response was "403 Forbidden"
Inner exception message : "User cannot access this private blog."
No routes to fetch. Ending.
So, the issue is the .env variables don't seem to be pulling through properly, but I can't see a reason why they wouldn't be? Is there anything I've missed in setting this up?
Gatsby doesn't know which plugin you mean (see How to use) and your overall syntax is wrong. The plugins is an array for example.
module.exports = {
plugins: [
{
resolve: "gatsby-source-wordpress",
options: {
auth: {
wpcom_app_clientSecret: process.env.CLIENT_SECRET,
wpcom_app_clientId: process.env.CLIENT_ID,
wpcom_user: process.env.USER,
wpcom_pass: process.env.PASS,
}
}
}
]
}
This should work assuming that you also define the other necessary fields mentioned in the README.
I found a plugin (https://github.com/wcandillon/grunt-swagger-js-codegen), which uses a configuration like:
'swagger-js-codegen': {
options: {
apis: [
{
swagger: 'swagger/auth.json',
moduleName: 'custom.dao',
className: 'AuthDao',
fileName: 'auth.dao.js',
angularjs: true
},
{
swagger: 'swagger/init.json',
moduleName: 'custom.dao',
className: 'InitDao',
fileName: 'init.dao.js',
angularjs: true
},
...
],
dest: 'src/'
}
}
but I don't want to add an object for every file.
I wrote a custom plugin, which can read all json fileName from swagger directory, but I don't know, how can I add it to swagger-js-codegen?
Thanks a very lot!