Basic usage of Webpack

If you are a member of the front end, you may not be unfamiliar with webpack. It can be a lot of such as js,css, pictures, etc. packaged into modules, is all the module. When we write ES6 some of the new syntax is =, some browsers may not support, this is we can use webpack go and Babel to convert it to the current browser recognized code. But if you just contact Webpack, may learn to some concepts may not be very understanding, go to the official website to see sometimes lengthy documents make people very circle, online search, out of the results of people difficult to understand. I would like to summarize today, the use of Webpack, if you want to more in-depth study, it is recommended that you go to the official website to see the document. If just want to understand, basic use, I this article probably can satisfy you. First, Webpack early work

1, Concept: Webpack is a modern JavaScript application of the modular Packer (module Bundler)

2, four cores. Entrance (Entry): The beginning of the chart is called the entry point exit (Output): After all the resources (assets) are wrapping together, we also need to tell Webpack where to package our application loader (Loader): Webpack Loader These files are converted to modules, and the converted files are added to the dependency graph.

Plugins (Plugins): Plug-ins (Plugins) are most commonly used (but not limited to) to perform actions and custom functions in the "compilation" and "Chunk" lifecycle of the packaging module

The concept does not understand, it doesn't matter, look down, when you go into the example, these concepts naturally know what is meant.

3. Pre-environment

Using Webpack is an environment that requires node.js. Install node.js Here I do not do detailed introduction, online search a lot, a fool-type installation. After installation we will also be able to use NPM, if you feel that NPM download slow speed, you can use Taobao to provide a mirror image cnpm to install, here I do not do detailed introduction, online to search how to install.

Create a new test file second, install Webpack

1. Installation Webpack

Global Install NPM Install WEBPACK-G

You can also partially install NPM install--save-dev Webpack

If you install successfully will generate a Node_modules folder, the global installation will be installed under the C disk, the local installation will be installed in your project inside.

I am here to install it locally.

2. Initializing the environment in test file: NPM Init
You will be prompted to set some basic information about the NPM package, such as name, version, description, and so on. Here you can not care about it, always press Enter the line.

At this point, you should generate a Package.json file in your folder (package the configuration file when you publish).

3. Structure of file directory
① an app folder and a build folder in the test file.
② build a Webpack.config.js file in the test file (must, the filename must be the file name)
Create a new index.html file and App.js file in the ③test folder

App folder: is our portal folder (that is, entry to specify the entry folder), that is, we write code, write JS folder
Build folder: Is our export folder (that is, output specified export folder), that is, we JS compiled to store the folder
Webpack.config.js: Is the Webpack configuration file, the Webpack will read it first when it is started.

The underlying directory structure is as follows:

---app
     --index.html
     --app.js
---build
---node_modules
---package.json
--- Webpack.config.js

Iii. Configuring Webpack.config.js Files
Let's do a simple example here to make you more aware that after we compile the App.js in the app folder (this is because some code is compiled to use, such as ES6 part of the code after compiling to allow the browser to identify, sass and less files compiled into a readable CSS file), We app.js and put it under the build folder. So we need to simply configure the Webpack.config.js file, and before we configure the file, we'll write a little code.

Index.html:

<! DOCTYPE html>
 
App.js:

document.getElementById ("Content"). InnerHTML = "I am the first page";
 
Okay, let's configure the Webpack.config.js file.

var path = require (' path '); Node global path API, write on the line, not too much relationship
Module.exports = {
    entry: './app/app.js ',//import file
    output:{//Export File
       path: Path.join (__dirname, ' bulid '),//save address of the compiled file, here is the relative path, remember to spell
       filename: ' newapp.js '  //compile, generated file name
    }

};
 
This is the most basic configuration.

Next we start Wepack:
① If you are globally installed directly at the command line input Webpack
② If you are partially installed you can open the Package.json file and configure the command yourself.
For example:

Modify the code in the red box to "start": "Webpack" means that start webpack can be replaced with the start command.
Execution: NPM start
Results:


It means you have succeeded. Then you will have a newapp.js file in your build file

When we open the Index.html page, it shows this:

Four, multi-file compilation
Multi-file compilation, we add a apptwo.js and index-2.html files to the app folder, and there are two JS files in the app folder that will be compiled,
Written in index-2.html:

<! DOCTYPE html>
 
Apptwo.js:

document.getElementById ("Contentwo"). InnerHTML = "I am the second page";
 
Key content
Webpack.config.js file We do this to configure:

var path = require (' path ');
Module.exports = {
    entry:{  //entry file for multiple files, use object to spell
       app: './app/app.js ',
       apptwo: './app/apptwo.js '
    },
    output:{
       path:path.join (__dirname, ' bulid '),
       filename: ' [name].js '//Because it is multiple files so we use [name] To give the variable the corresponding file name generated per file}

};
 
Execution: NPM start
Results app.js files and apptwo.js files are generated under the Bilud folder
The index.html and index-2.html under the App folder will show:



Key content
In the HTML file we introduce JS is this introduced <script src= ". /bulid/apptwo.js "></script> in fact, because in the node.js environment, our paths are corresponding, (equivalent to the same directory) we can write this <script src=" Apptwo.js " ></script> can also load the JS file.

Automatic compilation of thermal loading

Webpack provides us with a few commands: Webpack//The most basic way to start webpack webpack-w//provide watch method; real-time package update webpack-p//compress the packaged files webpack-d//provide Source map for easy mode code

When we modify the code to be compiled we do not want to start the webpack every time, then we use the WEBPACK-W command, view real-time code changes.

① For example we perform the NPM start-w command (here we are local to the name of our own configuration, if you are installing a global direct use of webpack-w,)
② We can also configure the Package.json file to be modified to

Run NPM start after the modification is complete
When we modify the JS code to be compiled, directly refresh the browser, the code will change.

In addition, we think, if we modify the code, do not have to repeat the start Webpack, but also do not have to manually refresh the browser, as long as we save, the browser automatically refresh what to do.
Then we used the thermal loading of the webpack.
First want to use thermal loading, we want to install Webpack-dev-server
① Install webpack-dev-server command: NPM install Webpack-dev-server
② Modify Webpack.config.js File

var path = require (' path '); Node global path API, write on the line, do not too much relationship
Module.exports = {
     entry:{  //entry file for multiple files, use object writing
       app: './app/app.js ',
    },
    output:{//Export file
       path:path.join (__dirname, ' bulid '),//save address of compiled file, here is the relative path, remember to spell
       Publicpath: '/ Bulid/',//* * Main is to add this * * Configure compile-time public path
       filename: ' [name].js '  //compiled, generated file name
    }

};
 
③ Modify Package.json File


The ④html page also needs to be changed:

<! DOCTYPE html>
 
Vi. compressing and packing files
Top we pack the JS file, there will be a lot of comments, and the default code, as shown:

We want to compress the code, here are two ways:
1. Configure Package.json Files:

Then execute the webpack-p command.

The resulting app.js file will be compressed:

2. Configure Webpack.config.js Files

var path = require (' path '); 
var  webpack = require (' Webpack ');//Add
module.exports = {
    entry:{  
       app: './app/app.js ',
    },
    output:{ 
       path:path.join (__dirname, ' bulid '), 
       publicpath: '/bulid/', 
       filename: ' [name].js '  
    },
    plugins:[  //Add
         new Webpack.optimize.UglifyJsPlugin ()
    ]

};
 
Then execute, Webpack will get the same compression code as above.