My wechat public account: Road of Cultivation in front, welcome to follow.

Recently, I began to want to maintain a personal public account. The original intention is to urge myself to keep taking notes and to sort out and record what I have learned. Further requirements are to improve hands-on skills, essay writing skills, and experience sharing. The ultimate goal is to maintain a personal brand image, like @Ruan Yifeng, @Zhang Xinxu, @Qingfeng, @JustJavac and other well-known IT technicians in the industry, and then use their own brand image to obtain some legitimate economic benefits to improve their lives. After all, studying hard and working hard is all about a better life.

In view of the above reasons and purposes, I opened a wechat public account and updated the article to SegmentFault and Digging Gold to further expand the spread. At present, I have written 7 original articles. In this process, we have the following experiences:

1, unable to adhere to the original day more embarrass.

Because my writing motivation is their own study notes, work notes. In other words, I need to have a continuous learning and working process, and then record the problems and solutions encountered in the process. This requires forcing habits and cutting back on things you used to spend time doing. So far, we have done these things. But I can’t deal with temporary emergencies, especially if they take time to deal with. Once the matter is resolved, he has exhausted, inadvertently powerless to adhere to the day more.

At present, I think of the solution is that first of all, I still want to adhere to the original daily articles, focusing on study notes, work notes and some reflection. Then once there is a temporary emergency that consumes a lot of time and experience, which may lead to the inability to update the article the next day, you can choose to reprint some excellent articles.

At present, the author of a public account @ Su Nan reprint permission. I hope I can get more authorship in the future.

2. Embarrass with no articles to write about.

The previous several articles are mainly some of their own problems encountered, the continuity of the article is not strong. If you want to keep improving, you have to have a new problem that’s worth writing about. It is not that a simple problem, such as punctuation errors, grammatical errors, can be taken to write an article. Moreover, the number of words should not be too small, otherwise you can directly send a note on SF. Additional estimate has 20, 30 article only, it is the composition that primary school student writes ~ do not have what to read value.

So the solution I came up with was to do a series. For example, the current Webpack Starter Notes series. First of all, I am learning Webpack, then the knowledge points of webpack are enough for me to update for a period of time, and finally, the content of the article is enough and rich. So this series was born.

When this series is updated, don’t panic, there are ES6, Vue and so on series can be written. Another is some non – series of sexual articles, can be inserted into the day inside. In this way, the content of the public number will be enriched, and it will not worry about no article, no original article.

3. The joy of receiving messages and rewards from fans.

My idea of update is to write the article on SF platform first, write it quickly with Markdown, then update it to Nuggets, and finally update it to wechat public platform, and send regular mass messages the next day.

During this process, my SF reputation has exceeded 1.5K, and the attention of the Nuggets and SF fans has also increased. Every time I see a new fan and “like” collection, I feel motivated to keep writing. Different from wechat, Nuggets and SF are people who have never met each other. They only care about and collect articles because they are good or bad.

Compared to SF and Nuggets, most of my fans are my family and friends. They were forced by me to follow my official account. In fact, they have a lot of people, do not know what I write, but still pay attention to the public number. Thank you very much for their support

Compared to the increase in the number of fans, the most happy is to receive real money rewards. However, the reward has not been into my account, I do not know how to do wechat. In fact, these periods, give me the most reward is my parents, I wrote an article they will silently give me 1 yuan below ~ poor parents heart ~

Different from other public number reward, I set the amount is 1 yuan, 2 yuan, 5 yuan, small reward. Because I think the amount of reward is too high, but will scare some friends. If you can tip me a dollar, you are already very happy.

To sum up, no matter how difficult the problem is, I will stick to it without hesitation.

The following is the text.

The installation

Webpack introduction notes (a), mainly introduces the core concept of Webpack, is the basic knowledge of the whole learning process. Then follow the guide manual given by the official documents. In addition, I will modify the content of the document according to my personal understanding and operation process. If there is any discrepancy, please refer to the original text.

To use WebPack, you must have Node.js installed, and be sure to use the latest stable version. Otherwise, the version of Node is too low, which can cause unexpected problems.

The official manual provides two Installation modes: Local Installation and Global Installation. In the yellow warning box, it is obvious that a global installation is not recommended because it will lock WebPack to the specified version and will fail to build in projects with different webPack versions. So let’s just use a local installation.

Start by installing the latest version of Webpack:

npm install --save-dev webpack
Copy the code

Since you are using WebPack V4 and above, install the CLI tool again:

npm install --save-dev webpack-cli
Copy the code

Note: I actually used CNPM instead of NPM when installing. Because of well-known reasons, the domestic download and installation will be slow or even slow, so I use Taobao mirror, you can use baidu to specify ~ all the NPM command mentioned in the following article, please change to CNPM.

The advantage of using a local installation is that it is easier when upgrading projects. If the above two commands are executed correctly, there will be an additional node_modules directory and a package.json file in the local directory. Open the package.json file with the following contents:

package.json

{
  "devDependencies": {
    "webpack": "^ 4.27.1"."webpack-cli": "^ 3.1.2." "}}Copy the code

This is the dependency we just installed. At this point, package.json is only 3 lines of code, so if you’re new to Webpack and you’re new to Node, you’ll be questioned by the rest of the code in the manual. Because then the manual adds a script code. Before we add this code to our project, we will execute the following command:

npm init
Copy the code

This command initializes a new package.json, and since we generated one when we installed webpack, the rest is appended directly to the file.

After executing the NPM init command, it will ask you a series of questions. If the default information is ok, just press enter. The newly generated package.json looks like this:

package.json

{
  "devDependencies": {
    "webpack": "^ 4.27.1"."webpack-cli": "^ 3.1.2." "
  },
  "name": "webpackstudy"."description": "Beginner's Notes for Webpack"."version": "1.0.0"."main": "index.js"."dependencies": {
    "ajv-errors": "^" 1.0.1. },"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git"."url": "[email protected]:siberiawolf0307/webpackStudy.git"
  },
  "author": "siberiawolf"."license": "MIT"
}

Copy the code

Because the generated dependencies are too much, I directly omit them. Now you can find scripts in the manual. We can add the code from the official website after the default test. As follows:

package.json

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"."start": "webpack --config webpack.config.js"
  }
Copy the code

Add: If the default package.json is used, the license will be filled in by the user. Being unfamiliar with the open source license, I specifically checked which one to use. After comparison, I found that using MIT protocol is more suitable for me. MIT protocol is a relatively loose protocol. This agreement allows others to use your code in any way under the name of the original author, but the original author bears no risk for the use of the code, and certainly no obligation for technical support. JQuery and Rails are MIT protocols.

Add scripts. Start to run webpack and run the configuration file webpack.config.js. Since the manual has not added any js files at this point, do not execute this command yet ~ we will learn later.

Note: I will host this section of code to Tencent cloud developer platform, if you need to view this section of content, please find the Installation directory.

start

If you’ve actually gone through the installation process and are a beginner, delete the package.json file in your folder first. Please note that we are operating in a completely new directory following the example given in the manual.

Since we must already be in a working directory when we perform the installation section, for example, my working directory is webpackStudy, create a new directory mkdir webpack-demo && CD webpack-demo is omitted from the document. The following code examples are in this working directory.

Since the package.json file has been deleted, let’s generate a new one:

npm init -y
npm install webpack webpack-cli --save-dev
Copy the code

NPM init -y: NPM init -y: NPM init -y: NPM init -y: NPM init -y: NPM init -y In addition, since webPack is already installed in this working directory, the execution will be very fast.

Next, we create the corresponding HTML and JS files.

project

 webpackStudy
  |- package.json
+ |- index.html
+ |- /src
+   |- index.js

Copy the code

src/index.js

function component() {
  let element = document.createElement('div');

  // Lodash, currently included via a script, is required forElement.innerhtml = _. Join ([element.innerhtml = _. Join ([element.innerhtml = _.'Hello'.'webpack'].' ');

  return element;
}

document.body.appendChild(component());
Copy the code

index.html

<! doctype html> <html> <head> <title>Getting Started</title> <script src="https://unpkg.com/[email protected]"></script>
  </head>
  <body>
    <script src="./src/index.js"></script>
  </body>
</html>
Copy the code

Create the index.html file in the working directory, create the SRC directory, and then create the index.js file. The file is organized as shown above. Then copy and paste the HTML and JS code.

Next, let’s modify the package.json file by dropping the main entry and setting private to prevent accidental code release.

package.json

{
 "description": "",
+   "private": true,
-   "main": "index.js"
}
Copy the code

Note that in the HTML page, we introduced the JS file Lodash. Lodash is a LIBRARY of JS utilities that are perfect for traversing groups of numbers, strings, objects, and more.

In the index.js file, there is no declaration displayed that needs to be imported into Lodash. This will cause the following problems:

No declaration is displayed,index.jsThe code is dependent on external extension libraries.
If the dependency does not exist, or an error is introduced, the application will not execute properly. For example, Lodash is not referenced.
If a dependency file is introduced but not used, the browser will download useless code.

What if we use Webpack to manage JS? Let’s see how it goes

Create a package file

Let’s start by adjusting our working catalog. Create a dist directory for your compressed and optimized code. The SRC directory we created earlier is used to store the original code. Move the index.html file you created earlier to the dist directory. The final file structure is as follows:

project

webpackStudy
  |- package.json
+ |- /dist
+   |- index.html
- |- index.html
  |- /src
    |- index.js
Copy the code

Since we want to display the declaration Lodash in index.js, we need to install it in the project directory first and run the following command:

npm install --save-dev lodash
Copy the code

Notice that I used the –save-dev parameter here. This adds Lodash to the devDependencies property of package.json.

Next, the Lodash reference is displayed through the import command.

src/index.js

+ import _ from 'lodash';
+
  function component() {
    let element = document.createElement('div');

-   // Lodash, currently included via a script, is required for this line to work
    element.innerHTML = _.join(['Hello'.'webpack'].' ');

    return element;
  }

  document.body.appendChild(component())
Copy the code

Then we need to update the index.html file because we’ve changed the way we rely on JS.

dist/index.html

<! doctype html> <html> <head> <title>Getting Started</title> - <script src="https://unpkg.com/[email protected]"></script>
   </head>
   <body>
-    <script src="./src/index.js"></script>
+    <script src="main.js"></script>
   </body>
  </html>
Copy the code

Finally, we execute the following command:

npx webpack
Copy the code

Then open the index.html file and you’ll see Hello WebPack.

Since we don’t use the configuration file to execute NPX webpack, we use the default, which generates main.js in the dist directory. This packaged file is introduced in index.html.

If you open main.js, you’ll see that Lodash is already in this file. Webpack has already added it for us.

Specifying a configuration file

In webpack4, you do not specify a configuration file. But that doesn’t scale well. So we create a webpack.config.js file.

Create the webpack.config.js file in the working directory. As follows:

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')}};Copy the code

Then run the following command:

npx webpack --config webpack.config.js
Copy the code

The result is the same as before

You can also omit the –config webpack.config.js parameter. If you add a webpack.config.js file, webpack automatically uses this configuration file.

However, if the file name is not webpack.config.js, you need to use –config. This is especially useful when configuration files are split into multiple files.

The way we used to run it directly from the command line, called the CLI, is now more flexible with configuration files. You can specify loaders, plugins, and so on.

NPM script

Remember in the start section, we added scripts.start? Now let’s also add a script to package.json so that we can simply call the script every time we run the program.

package.json

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"."build": "webpack --config webpack.config.js"
  }
Copy the code

Then run the following command on the cli:

npm run build
Copy the code

The command NPM run build is used to compile scripts in package.json, where build is what we just defined.

Note: I have hosted this section of code on Tencent Cloud Developer platform. If you want to view this section of code, please check Getting Started directory.

That’s the Getting Started part of the tutorial. To summarize the main points:

Install WebPack and the dependent JS library Lodash
Package files using the default configuration and the specified configuration file
Run webPack using the NPM script

Keep an eye out for the rest of the handbook handbook for notes on organizing the official Webpack documentation.

(to be continued)

Related articles

Introduction to Webpack Learning Notes (1)

Introduction to Webpack Learning Notes (2)

Introduction to Webpack Learning Notes (3)

Introduction to Webpack Learning Notes (4)

Introduction to Webpack Learning Notes (2)

The installation

start

Create a package file

Specifying a configuration file

NPM script

Related Posts

Quick registration certification small procedures, public number development version, authorized login process code description

Webpack5 Manually builds the React TS project

HTML image tag