The initial webpack

1 Create a folder. Create 111.html

2 Create a new SRC folder and place an index.js and module.js folder

3 Initialize NPM init

4 install local webpack NPM I –save-dev webpack webpack-cli

5 Create webpack.config.js to compile the configuration file

6 NPX webpack compilation

Entry and output

Etry configuration entry file

  • Role: Tell WebPack where the entry file for modularity is

  • Webpack can find all the modular files through the entry file for compilation and packaging

Project classification

  • A single page applies one HTML and one entry file

  • Multiple pages apply multiple HTML multiple entry files

How do I configure single entry ~~~js? How do I configure multiple entry ~~~jsCopy the code

output

Output Indicates the configuration export file

Action: Tells WebPack to compile packaged code, where to put it.

In other words: configuration is packaged code, within that file and folder

Create index.html in the Entry folder

Then initialize NPM init

Create a new SRC

Create several js files in SRC to write es6 code import and export

Create a new webpack.config.js file

Then install the WebPack plug-in

npm install -D babel-loader @babel/core @babel/preset-env webpack

Finally, run NPX webpack

loader

// What is webpack loader? // What is webpack loader? // What is webpack loader? // What is webpack loader? // NPM init // NPM install -d babel-loader@babel/core@babel /preset-env webpack // New .babelrc file // {// "presets": [// "@babel/preset-env" JSON installer name //]Copy the code

/ / use loader:Copy the code

// module: { // rules: [ {

// test: /.m? js$/,

// exclude: /(node_modules|bower_components)/,

// use: { // loader: ‘babel-loader’,

// options: { // presets: [‘@babel/preset-env’]

// }

// }

// }

// ]

// }