Exploring the Vue-cli version 3 BETA's webpack setup

I am currently exploring the new version of vuejs/vue-cli ( beta 3.0 ) that promises to simplify webpack configuration significantly. However, there are limited examples available at this time...

As part of my testing, I attempted to transition from vue-cli v2

webpack.dev.conf.js

plugins: [
    //...
    // copy custom static assets
    new CopyWebpackPlugin([
        {
            from: path.resolve(__dirname, '../static'),
            to: config.dev.assetsSubDirectory,
            ignore: ['.*']
        }
    ]) ]

to the latest vue-cli version 3 (beta)

vue.config.js

const path = require('path')

module.exports = {
    chainWebpack: config => {
        config
            .plugin('copy')
            .use(require('copy-webpack-plugin')), [{
                from: path.resolve(__dirname, '../static'),
                to: 'static', ignore: ['.*']
            }]
    }
}

When I run

npm run serve

no errors are reported...

which seems to indicate that everything is working fine. Nevertheless, I would appreciate any resources such as tutorials, documentation or existing code examples related to this topic. At the moment, I am only able to learn about new features by studying code snippets.

My current challenge involves converting this piece of code:

new webpack.ProvidePlugin({
  $: 'jquery',
  jquery: 'jquery',
  jQuery: 'jquery',
  'window.jQuery': 'jquery'
}),

I attempted to modify it using:

config
  .plugin('provide')
  .use(require('webpack.ProvidePlugin')), [{
    $: 'jquery',
    jquery: 'jquery',
    jQuery: 'jquery',
    'window.jQuery': 'jquery'
  }]

but encountered an error:

 INFO  Starting development server...
 ERROR  Error: Cannot find module 'webpack.ProvidePlugin'
 Error: Cannot find module 'webpack.ProvidePlugin'
   at Function.Module._resolveFilename (module.js:536:15)

Answer №1

If you're not using webpack v4, this solution should do the trick (v4 might throw an error for unknown reasons):

const webpack = require('webpack');

module.exports = {
    chainWebpack: config => {
        config
            .plugin('provide')
            .use(webpack.ProvidePlugin, [{
                $: 'jquery',
                jquery: 'jquery',
                jQuery: 'jquery',
                'window.jQuery': 'jquery'
            }]);
    },
};

If you're looking to customize your vue-cli configuration, you may find this resource helpful (referenced in the comments).

Remember: when passing parameters to the plugin, use an array even though it expects an Object. The use() method requires an array of arguments for proper functioning.

Answer №2

Your require statement is incorrect and unnecessary, it has nothing to do with webpack or vue-cli

Here's an example of correct code:

config
  .plugin('provide')
  .use(require('webpack').ProvidePlugin, [{
    $: 'jquery',
    jquery: 'jquery',
    jQuery: 'jquery',
    'window.jQuery': 'jquery'
  }])

Answer №3

Before proceeding, it's important to establish the parameters for using the new plugin...

const path = require('path')
const webpack = require('webpack')

module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        jquery: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery'
      })
    ]
  }
}

Answer №4

When working on a new project created with the latest version of Vue CLI (3.2.1), I came across the need to configure jQuery by adding a Webpack Plugin to the project.

To achieve this, I successfully configured it in the vue.config.js file using the following syntax that combines insights from top answers:

module.exports = {
  chainWebpack: config => {
    config.plugin("provide").use(require("webpack").ProvidePlugin, [
      {
        $: "jquery",
        jQuery: "jquery"
      }
    ]);
  }
};

This approach eliminates the need to install webpack separately and involves passing an array of objects to the config.plugin function instead of just one object.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I send a PHP object using ng-click

Understanding how to pass a PHP variable in ng-click is one thing, but passing a complete PHP object through the ng-click function seems to be a challenge. I have successfully passed a JavaScript object through it, but when it comes to passing a PHP object ...

Problem with UV mapping when adjusting texture size

I am currently working on an application to modify minecraft models. To display the drawn texture mapped on the 3D player model, I am using ThreeJS. However, I'm facing a challenge related to changing the texture size. Initially, the texture is mappe ...

Utilizing AngularJS to implement checkbox selection within a table

I'm working on a method that will receive an Id from a table when a checkbox is checked and update the $scope.selected array in my Angular controller. If the checkbox is unchecked, it should remove the corresponding item from $scope.selected. Here&ap ...

Retrieve the content of an element within a freshly launched window

I am looking to utilize JavaScript to open an html file and input some data into specific elements. My attempt so far has been: var info_window = window.open('info_print.html') info_window.document.getElementById('new_info').innerHTML ...

Setting up PostCSS nesting with Vite: A beginner's guide

Here are the steps I have taken so far: I installed postcss-nesting using npm install postcss-nesting --save-dev I configured vite.config.js as follows: import { fileURLToPath, URL } from 'url'; import { defineConfig } from 'vite&apo ...

The search function for selecting plugins is not functioning properly when additional options are added

Is there a way to use select options with search functionality, but the options are appended? I've tried using plugins like tom-select, selectize, and chosen but none of them seem to work with the appended options. Can anyone provide assistance on how ...

When attempting to invoke the rest function, an error occurs stating that the dataService.init in Angular is not

Learning AngularJS has been my current focus. To practice, I have been working on a Quiz app tutorial. However, I encountered an issue when trying to call the rest function of a factory after injecting it into one of my controllers. The JSON data for this ...

consistent character spacing for a custom font upload

Developing an application that necessitates counting up and opting for the font Orbitron due to its square appearance. The issue arises as, unlike the default chrome font, the width of this font's digits is not consistent, causing the count character ...

Navigating the use of PHP variables in JavaScript

Whenever I select an option from the menu, a Javascript function changes the input value based on a PHP variable. Below is an example of how I assign values from 1 to n to each option: $i = 0; foreach($videos as $val) { echo '<option value=&ap ...

What steps do I need to follow to create a 3D shooting game using HTML5 Canvas?

I'm eager to create a 3D shooter game with HTML5 Canvas, focusing solely on shooting mechanics without any movement. Can anyone provide guidance on how to accomplish this? I've looked for tutorials online, but haven't come across any that m ...

Issue with Angular: Unable to properly sort data while modifying queryParams

Within the component.ts file: export class TabsComponent implements OnInit { constructor( private store$: Store<UsersState>, private router: ActivatedRoute ) {} ngOnInit(): void { this.onFilterByIncome(); this.router.queryParam ...

Javascript AppendChild Problem with Internet Explorer

When it comes to this particular snippet of code, everything seems to run smoothly in Firefox and Chrome. However, Internet Explorer is causing some major headaches. var anotherDiv= document.getElementById("anotherDiv"); var destination = document.getElem ...

Guide to making axios/api calls in a Nativescript mobile application

In my development process, I am working on creating a small application using Nativescript-vue. This application requires backend functionality that is built on the laravel framework for making API calls to retrieve relevant data. For example, when a user ...

The modal fails to display when the content is positioned below a setInterval function

i have created a notification system using ajax currently, I am attempting to open a modal by clicking on the content of the notification with setInterval the modal works perfectly when the content of my notification is not being updated via setInterval. ...

In the matrix game, if a user chooses two balls of the same color, those two matching color patterns will be eliminated

I am currently working on a matrix game with the following condition: When a user selects two balls of the same color, they will destroy the two patterns with the same color. I have successfully implemented horizontal and vertical selection. However, I ...

Are there any potential performance implications to passing an anonymous function as a prop?

Is it true that both anonymous functions and normal functions are recreated on every render? Since components are functions, is it necessary to recreate all functions every time they are called? And does using a normal function offer any performance improv ...

The Keycloak URL was unable to be framed due to a breach in the Content Security Policy directive stating "frame-ancestors 'self'"

My current challenge involves hitting the Keycloak server as soon as the page loads, allowing users to authenticate there and obtain the necessary token. However, I encounter an error when attempting to provide all the required information to Keycloak: Ref ...

Experience a unique custom layout using AppRouter in Next.js version 13, with the added

My goal is to encapsulate the _app.js file within a custom layout, similar to what I have done before. This way, I can include a Navbar at the top and wrap everything else within a container: //layout.js file import { Container } from 'react-bootstrap ...

Creating an expand and collapse animation in a `flex` accordion can be achieved even when the container size is fixed using

Good day, I am in need of a fixed-height HTML/CSS/JS accordion. The requirement is for the accordion container's height to be fixed (100% body height) and for any panel content overflow, the scrollbar should appear inside the panel's content div ...

Vertical Orientation in HTML

Would appreciate some assistance on creating a vertical text with HTML similar to the example in the linked screenshot. It needs to be straightforward and vertically oriented. Check out the screenshot for reference ...