Webpack Setup Simple Vue Project Chapter 2.0 — Simple configuration of webpack.config.js

Small knowledge, big challenge! This paper is participating in theEssentials for programmers”Creative activities.

This article also participated in the “Digitalstar Project” to win a creative gift package and creative incentive money

preface

After the preparation of the previous chapter juejin.cn/post/702133… We are ready to configure!

Configuration to start

Now that we’re all set, it’s time to configure webpack.config.js. Why configure this? If the webpack.config.js file is empty and there is no output.filename, the webpack.config.js file will be read from the current path. The ‘output.filename’ configuration item is required.

Let’s start with the simplest oneWebpack. Config. Js:

webpack.config.js
module.exports = {
/* Webpack entry start */
  entry: './index.js'./* webpack output */
  output: {
    // Output the file name
    filename: './test.js'}}Copy the code

According to our configuration, Webpack will look for the index.js file and print the test.js file.

index.js

const test = 123
Copy the code

So far all our entry file does is simply define a test variable. Now our file directory structure looks like this:

Then we can hit Webpack on the console

But the error came

WARNING in configuration
The 'mode' option has not been set, 
webpack will fallback to 'production' for this value. 
Set 'mode' option to 'development' or 'production' to enable 
defaults for each environment.
You can also set it to 'none' to disable any default behavior. 
Learn more: https://webpack.js.org/configuration/mode/
Copy the code

Do you have a big head?

No problem, let’s add something to webpack.config.js

webpack.config.js

module.exports = {
/* Webpack entry start */
  entry: './index.js'./* webpack output */
  output: {
    // Output the file name
    filename: './test.js'
  },
  mode: 'development'
}
Copy the code

Then under package.json

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"."dev": "webpack --mode development"."build": "webpack --mode production"
  },

Copy the code

All is well:

For example, the following error was reported when packing:

Run the following code directly under the project directory:

npm install webpack --save-dev
Copy the code

OK! End of this section!