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!