webpack study entry notes 02 - initialize a project webpack

1. EDITORIAL

Now we begin formal study webpack up, webpack help us pack compile the project, so before the official start, we need to initialize a webpack based project.

In this blog, it will involve the following knowledge:

• Initializing a webpack based project
• The default setting packed experience webpack
• Custom webpack packaged profiles

2. Initialize a webpack based project

This step is simple, we can use npm or yarn package management tool to help us to quickly initiate a project, I believe many of those working in the front end of these two tools are not unfamiliar. So here it is an in-depth explanation of these two tools.

I used to use the Yarn , so you can directly create a new folder, and then run the command in the terminal yarn initto initiate a project. In this step might let you enter basic information about some of the projects, as follows:

question name (test):
question version (1.0.0):
question description:
question entry point (index.js):
question repository url:
question author:
question license (MIT):
question private:
复制代码

You enter according to their actual situation can, of course, can enter all the way, it will use the default option to initiate a project.

After initialization is complete, in the folder, it will generate a package.json file, the file record basic information about the project, and it will record a third-party package after we installed. In the latter project, in which we can also define scripts that help us manage the project, which will be mentioned later in the blog.

After the project initialization is complete, we need to install two packages, namely webpack and webpack-cli , which is used to package two packages compile the project. Step is very simple to install, perform the following yarn commands directly to the terminal:

yarn add webpack webpack-cli -D
复制代码

Explain: The above command -D option, indicating that the two packages is dependent on the development, on the line when the project does not need these two packages.

After these two packages installed, this project will create the basis webpack OK, you can continue to follow-up work.

3. Experience webpack default package set

After the project is created, we can not webpack be configured to be used because webpack has its own default configuration. Let's understand what its default configuration.

Create a directory in the project src directory, used to store program code. In this directory create a index.js file, note that it must be the name, which is the default configuration webpack requirements. In this document, we use the node syntax introduced another file name.js , code is as follows:

let myName = require("./name.js")
console.log(myName);
复制代码

Wherein name.js file code is as follows:

module.exports = "Allen Feng"
复制代码

Node.js is used above syntax, if you use a browser to direct rendering, it can not be successful rendering. This time we can use webpack packaged compile, run commands directly in the terminal npx webpack, wait for a while you can pack up a little success.

After the package is complete, observe the project directory, you can see this time more than a folder dist , you can see the file after the package after point into main.js . If this time in dist create a folder html files through the script tag introduced main.js file will be able to see printed in the browser console Allen Feng .

This is the use webpack default configuration package out of the effect, to sum up, in the default configuration in webpack:

• src directory must have index.js file, which is the default specified in the configuration file entry
• After webpack compiler package, adds the final code in the dist folder. If not, it will create the folder
• The default mode is the production of packaging webpack mode, i.e. the code compilation package will be compressed.

4. Custom webpack packaged profile

Above we have used the default configuration of the project webpack package compiled, but we might encounter such a demand:

• I do not want webpack from index.js start packing the file, but from App.js start packing files
• The package code is not compiled in dist directory, but other directories
• Do not compiled code compression package
• ......

This time, we can customize webpack configuration to achieve the desired effect. The steps are simple, in the main directory of the project (ie the same level and package.json) to create a new webpack.config.js file, which is webpack profile. In this document, the following code can be written webpack configuration:

let path = require("path");

module.exports = {
    mode: "development",
    entry: "./src/index.js",
    output: { 
        filename: "index.js",  
        path: path.resolve(__dirname, "dist")  
    }
}
复制代码

As shown in the code, we may in the configuration file, the specified webpack package mode, the file entry packaged, package export files. Below these three configuration options to do a detailed description:

1) mode: webpack arrangement pattern

webpack has two configuration modes: Production (production mode) and Development (development mode) . The default is used in the production mode , in this mode, the compiled code package will be compressed to save volume.

If you choose the development mode , then the final will not be compressed, the file size will be slightly larger.

2) entry: webpack file entry

webpack packaged compilation, sure to have a designated entry file, this file can be specified by the property. The default entry file is index.js file. If you want to change it to another file, modify the attribute. Note that this property may be used relative path specified.

3) output: webpack export documents

Where is the code to compile on webpack package, it is specified by the property. When the configuration of the property, to specify the export file of the file name and path . The default path is the dist folder index.js file. If you want to modify the other path and file name, modify this attribute. Note that the path to export the configuration file using an absolute path , I can refer to the above wording.

5. Postscript

Now finished the configuration webpack three basic options, we can be configured according to their needs. Follow-up will introduce some other configuration options. Come on, everybody!

Previous: webpack introductory study notes 01 - webpack Basic Introduction

Next: webpack introductory study notes 03 - custom scripts, project management help

Reproduced in: https: //juejin.im/post/5d0493c5f265da1b971a72a8