0 Basics teach you to build Webpack Run Package project (not to be continued)

These days in the spare time of the project to learn Webpack packaging items, very honored to find some of the great God of the article to learn, Die Hard chew for a few days, finally knows. In the future work still need to continue to study, below I will share I learned a little thing these days, I hope to let me a still not a small white-collar entry webpack to get started. This article is mainly to extract the great God of the article plus their own manual some process records, do not like to spray, thank you! Driving!!! Driving!!!

　　First, what is Webpack

　　Webpack is a modular wrapper (module bundler)for a modern JavaScript application. When Webpack processes an application, it constructs a dependency graph recursively (dependency graph), which contains each module that the application requires, and then packages all of them into a small bundle -usually with only one , which is loaded by the browser.

How Webpack works: Treat your project as a whole, With a given master file (for example: Index.js), Webpack will start to find all dependent files for your project from this file, use loaders to process them, and finally package them as one (or more) browser-aware JavaScript files.

　　

　　Second, the use of Webpack

1 , Initialization of projects

After the Webpack installation is complete, we then enter a command to initialize the project, initializing the command:NPM init; In the process of initialization, the terminal will ask you a series of information such as project name, project description, author and so on, but don't worry, if you are not ready to publish your module in NPM, the answer to these questions is not important, enter the default.

At this time, a Package.json file is generated in the directory, which is a standard NPM documentation that contains a wealth of information, including the current project's dependency module, custom script tasks, and so on.

2, installation Webpack

　　Create a new project directory, open the terminal into the new directory enter the command to install Webpack:

　　Global Installation: 　NPM inatsll webpack-g; Follow directory installation:npm inatsll--save-dev webpack;　　　

　　3. Project Construction

In the root directory new app and public two directories and a profile Webpack.config.js,app folder to hold the original data and we will write the JavaScript module, the public folder is used to store the files for the browser to read (including the use of Webpack packaging generated by the J s file and a index.html file), and then we add the Main.js file and the Project.js file separately in the app directory, and add the index.html file to the public directory.

Directory structure:

　　

Let's look at the code for each file, and run some of the process results:

index.html file:

　　

Main.js file:

　　

Project.js file:

　　

Webpack.config.js file: Here the configuration is to specify that the Main.js file is our only portal file, and the Bundle.js file is the file name that we output after packaging, and the path we store after packaging.

　　Put entry and output this write Webpack attribute Word stands for what, I do not explain here, can go to webpack Chinese document learning, Link: https://doc.webpack-china.org/concepts/　　

　　

Package.json file:

　　

After each file is configured, we enter: NPM start at the command line, which is the project to start packing the file:

　　

We can see that Webpack has compiled our main.js and project.js files, and we can find a compiled Bubundle.js file automatically generated in the public directory after the compilation is complete. Then we can open our index.html file in the browser and open it normally. :

　　

Congratulations, now that you have learned the most basic way to pack your webpack.

　　Third, a little more advanced

1. Building local services using Webpack

　　After the local service is built, the browser listens for changes to your code and automatically refreshes the results of the changes. Next we'll install this dependency package,

　　Service Dependent Packages: npm Install--save-dev webpack-dev-server, Devserver as one of the Webpack configuration options, the following are some of its configuration options, more configuration can refer to

　　

Add these commands to the Webpack configuration file, and the configuration file now looks webpack.config.js like this

　　Note that, Package.json, there is a small detail here, that is, we normally run the code when most of the input:npm run Dev, that is because in the Package.json configuration:

　　

If configured with the default server, the run project is entered directly:Run server. In addition, when our port property is not set, the default port number is: 8080, but above we changed to 8088,:

　　

　　2, the installation and configuration of loaders　　

　　LoadersIs webpack one of the most exciting features offered. Through the use of different loader , webpack have the ability to invoke external scripts or tools to achieve the processing of different formats of files, such as the analysis of the conversion scss to CSS, or the next generation of JS file (ES6,ES7) converted to modern browser-compatible JS file.

Loaders needs to be installed separately and needs to be webpack.config.js modules configured under the keywords in, Loaders's configuration includes the following:

• test: a regular expression that matches the extension name of the file processed by the loaders (must)
• loader: Name of loader (required)
• include/exclude: Manually add files (folders) that must be processed or block files (folders) that you do not need to process (optional);
• query: Provides additional setup options for loaders (optional)

　　3, the Babel configuration

　　Babel is actually a platform for compiling JavaScript, and its strength is that it can be compiled to help you achieve the following:

• Use the next generation of JavaScript code (ES6,ES7 ... ), even though these standards are not currently fully supported by the current browser;
• Use JavaScript-based languages to expand;

Installation and Configuration of Babel

Babel is actually a few modular packages, its core function is in babel-core the NPM package called, Webpack can combine their different packages to use, for each function or extension you need, you need to install a separate package (most of which is to resolve the ES6 babel-preset-es2015 package).

　　Install Babel dependencies:npm install --save-dev babel-core babel-loader babel-preset-es2015   （这里是连续安装了好几个依赖包），下面我们进行配置，代码

0 Basics teach you to build Webpack Run Package project (not to be continued)