Webpack's study uses a

Webpack This tool is a bit confusing to me at the beginning of my study. I spent two or three days repeating the instructional video. Finally, there is a little clue, the following writing I learned about webpack understanding and notes.

First look at introduction http://webpackdoc.com/index.html

"webpack   is now the most Popular front-end resource modular management and packaging tools. It can package many loose modules according to dependencies and rules into front-end resources that meet the deployment of the production environment. You can also code-separate modules that are loaded on demand, and then load asynchronously when you actually need them. by   loader  commonjs modules, amd module, es6 module, css , picture, json coffeescript , less "

Fetch and reprint this page please specify address http://www.cnblogs.com/yupinghua/p/6295385.html

above is the introduction of the Webpack Chinese guide, said Webpack is a module packaging tools, based on the module's dependencies for static analysis, and then these modules according to the specified rules to generate the corresponding static resources.

I am talking about the CSS and JS packaged into a JS file, the above address is described in detail.

first make sure that the Nodejs is installed on your computer because you are sure you need to use NPM package management tools and Requirejs. By default, you will already be using these tools.

first step, global install webpack, open cmd, enter command: NPM install-g Webpack Enter

then use the command line to enter the project directory, such as D:\wamp\www\project

Create a Package.json configuration item under this project folder , enter the command: NPM init enter;

If the project is just practice, then you can always go to the carriage. Finally you have to enter Yes;

in this way, you can see the creation of a package.json configuration file under the project folder;

Next Create the current project webpack dependency, enter the command: NPM install--save-dev Webpack Enter

It is important to note that the configuration item is created first and then the dependencies are installed.

This creates the Webpack version in the corresponding devdependencies of the configuration item .

The dependencies are installed under the Node_modules folder in the project directory .

For example Project planning:

Under the project folder, there are

App folder

--main.js

--work.js

Node_modules folder

Public Folder

--index.html

Package.json configuration file

To introduce Work.js in main.js, enter the following:

Requier ('./work.js ');

Write the following code in work.js:

document.write (' Welcome to the Webpack Packaging tool ');

then introduce script in the index.html.

<script src= "./webpack.js" ></script>

Enter the project directory with the command line d:\wamp\www\project>, enter Webpack app/main.js public/webpack.js return

Open index.html with a browser

The basic functionality of Webpack has been successfully used .

-----------

Because the file path and file name are used in the output, it is inconvenient if the project is large enough for the file name to be long enough.

here 's a look at the configuration items that use Webpack, so that you can write the files you want to package, so you don't have to knock out a long command every time, and you avoid errors.

in the Project project directory, create a file webpack.config.js and write the following:

Module.exports = {

__dirname is a global variable in Nodejs that points to the root directory of the project

Entry:__dirname+ '/app/main.js ',//entry points to the location of the portal file

output:{

Location of the packaged file placement

Path:__dirname+ '/public ',

FileName: ' Webpack.js '

}

}

Then enter the Webpack carriage return only on the command line , and after success, generate the same webpack.js

there is a need to install the global Webpack to execute, and now the problem is to write the global path if there is no global installation

In another way, write astatement in the Package.json configuration item

Write "Start" in the scripts of the Package.json configuration item: "Webpack",

Delete webpack.js, and then enter NPM start return on the command line

also generate webpack.js

Open Browser also can see Welcome to use the Webpack tool

again, note that if you do not use start in Package.json, this is the NPM self-contained key name. What if you want to use something else?

It is also possible to use other names, such as KS, "KS": "Webpack",

then enter the command and replace it with npm run KS enter.

Webpack's study uses a