This is the 31st day of my participation in the August More Text Challenge

Use front-end automation tools: (webpack

Can serve as a beginner’s learning route, can refer to, learning progress is not particularly driven! Ongoing update

Combined with their own understanding, simple and comprehensive summary of the basic knowledge points in the process of learning JavaScript in vernacular Chinese, easy to deepen understanding!

Let’s get started! ‘Only a firm foundation can build a tall building ‘! Come on! Take it seriously!

0. Comb yesterday’s knowledge:

( gulp ):

Gulp automates painful or time-consuming tasks in the development process, thereby reducing the time you waste and creating more value.

1. Install environment: install Node.js first — install gulp

2. What is GULP – front-end automation tool

3. Methods in GULP

  • task() / src()  / dest() / pipe() / watch()

4. Gulp plugin

  • gulp-sass/ gulp-cssmin/ gulp-uglify/ gulp-concat/ gulp-rename/ gulp-imagemin

A webpack.

Front-end automation – static module packaging tool Webpack

Concept: WebPack is a static module packaging tool for modern JavaScript applications.

As shown in the cover image, our static resources are uniformly packaged into one or more bundles,

1. Useage Installation

1.1. Global installation

npm install -g webpack
# or specified version
npm install -g webpack@<version>
Copy the code

1.2. Partial installation

Create project directory — enter directory — NPM initializes package — install webpack

mkdir webpack-demo
cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev Enter the installation under the project
Copy the code

If you use webPack version WebPack V4 +, you need to install WebPack-CLI at the same time

2. Configure the package.json file to package folders into NPM packagesnpm init -y

To install the plug-in:

npm install html-webpack-plugin --save
Copy the code

3, configuration,webpack.config.jsfile

const path = require('path')
// Module exposure
module.exports = {
  entry: './src/entry.js'.// Entry file configuration item
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',}}Copy the code

4. Test the packaging project

Directory structure:

Run: NPM run webpack If the following configuration is used, run the NPM run dev command

(Configured in package.json)

Scripts:{ "dev":"webpack" }
Copy the code

5. Html-webpack-plugin is automatically generatedindex.html

Install the plugin under Dependencies

npm install html-webpack-plugin --save  
Copy the code

Modify the configuration file webpack.config.js for the plug-in to take effect

const HtmlWebpackPlugin = require("html-webpack-plugin"); // Import plug-ins
plugins : [
        new HtmlWebpackPlugin()    // Create a plug-in application object
    ]
filename:"newIndex.html".// Prints a new file name
template:"dist/index.html"   // Modify the HTML file template
Copy the code

6. Implement the process of packaging multiple interdependent JS files

Introduced in the entry file via the require() method

7. Style packaging: You can package static style files into bundle.js by installing the loader

Import styles in entry.js:

require("! style-loader! css-loader! . /css/style.css");Copy the code

Static resource import needs to be added! , you must import style-load first

8. Implementing automatic listening on project configuration files does not require manually running NPM run dev every time

Core idea: Modify package.json file

"build": "webpack --watch"  
Copy the code

Run NPM run build to implement automatic listening

9. NPM instruction

Node Package Manager

Node.js is a package management tool installed with Node.js development tool, convenient JS installation, upload, download package management tool

10. Distinguish dependencies from devDependencies

  • devDependenciesPackages on which the development pattern depends
  • dependenciesPackage management that the online mode relies on

Come on, dream chasers

Learning is a continuous process, stick to it, there will be harvest!

Accumulate over a long period, consolidate the foundation, early into Dachang!

It’s not easy to keep it up, and it’s not easy to keep it up. You’re great!

Calm Down & Carry On!

Read more:

Review of previous updates

【 relearn JS】 Every day to strengthen the foundation of the series of articles:

【 review JS】 Front-end automation tools – Gulp, 【 review JS】 talk about design patterns, And several ways of singleton factory | | the observer pattern, some kinds of modes of inheritance to JS 】 【 & closures & singleton pattern, prototype and prototype chain to JS 】 【 | | factory pattern constructors, consolidate the foundation – to revisit JS 】 【 object oriented/process/class and object oriented

Day23 – The front end also needs to understand some databases

Day1: js initialization, day2: various operators, day3: data types, day4: loop structure & conditional statements, day5: functions (emphasis), day6: scope & events,

【 DAY7 】 object & array method summary, 【day8】 string method & partial sorting,

【 DAY9 】Math object & Wrapper Function, 【 DAY10 】BOM- Browser object model,

【 DAY11 】DOM- Document Object Model

【 DAY13 】Event Event object first known (2),

【 DAY14 】 Event delegate & Drag principle

【 DAY15 】 Drag-and-drop implementation & regular introduction, 【 DAY16 】 regular specific method,

【 DAY17 】cookie, 【day18】ES6,

[DAY19] Js motion function encapsulation

[DAY21] The first three weeks of learning review, [DAY22] server and client

More on the way… Learning is a long way to go. – = =