Preface
The webpack used by the team is very powerful. Sometimes when compilation fails, you have to find the author of the tool to solve the problem. You rarely investigate the reasons. I feel that you always have a slight understanding of webpack. Therefore, starting from this article, configure webpack from scratch and carefully experience the configuration process. The content of the article is too simple. If you have experience in webpack, you don’t need to read it down.
Version Description
The version of webpack used in this article is: 4.30.0
Start building
The purpose of this article is to use webpack to complete the compilation of es6, but I didn't expect the process to be too simple.
Install node and npm mirroring
Install node
Install npm Taobao mirror
Install webpack and webpack-cli
Open or create a new project and install webpack and webpack-cli using the command line:
$ cnpm install --save-dev webpack-cli
Install the compiled components of es6
Install babel-loader using the command line:
$ cnpm install --save-dev babel-loader @babel/core @babel/preset-env webpack
Create a file directory
The file directory I created is as follows:
webpack-es6 |- /dist |- |- /src |-
Define the entry and exit of packaging
Create a new file in the project directory and configure the packaged entry and exit according to the file directory:
const path = require('path');
= {
entry: './src/', // Define the entry js, that is, js before compilation output:{
filename:'', // Define the file name of the packaged output js path:(__dirname,'dist') // Directory of output js }
};
Adding js file processing rules
Processing rules for adding js files to files:
const path = require('path');
= {
entry: './src/',
output:{
filename:'',
path:(__dirname,'dist')
}，
// The following code is a newly added code module:{
rules:[
{
test: /\.js$/, // Match all js files loader: 'babel-loader' // Use babel-loader to process js files },
]
},
};
Add npm script
Add npm script to the file:
{
//... Omit the code "scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack" // Add this line, use the build command instead of the npx command },
//... Omit the code }
Configuration completed
The above completes the configuration of webpack packaging es6. The file directory at this time is as follows:
webpack-es6 |- node_modules |- /dist |- |- /src |- |- |- |-
Add code
Next we add code to test whether the configuration is successful.
File ./src/ Add code:
class Class{
constructor() {
= 'success';
}
appendToBody(){
const p = ('p');
= ;
(p);
}
}
const obj = new Class();
();
File ./dist/ Add code:
</html> <body></body> <script src="./"></script> </html>
Compile the program
Run the command line
$ npm run build
Open , if there is success on the page, es6 compilation is complete.
Summarize
I didn't expect that the configuration of webpack compiling es6 is so simple. The next step is to use webpack to compile postcss.
Reference link
webpack Chinese website:/
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.