Webpack Journey into the Pit (i) is not the beginning of the start
Original reproduced from: Http://weibo.com/u/2194745681?is_hot=1
- Webpack Journey into the Pit (i) is not the beginning of the start
- Webpack Journey into the Pit (ii) loader introduction
- Webpack Journey into the Pit (iii) Webpack.config INTRODUCTION
- Webpack Journey into the Pit (iv) sail
- Webpack Journey into the Pit (v) load the Vue Single file component
- Webpack into the Pit Tour (vi) with Vue-router to achieve spa
What is Webpack
I don't really want to write this stuff, but it seems like all the tutorials have this. Just write two sentences. can be skipped directly.
Webpack is a module loader and packaging tool developed by the German developer Tobias Koppers, which can be used and processed as modules in Webpack, such as JS (including JSX), coffee, style (including less/sass), picture, etc. Therefore, Webpack JS can be referenced in CSS, CSS can be embedded in the image dataurl.
corresponding to a variety of different file types of resources, Webpack have corresponding modules loader such as Vue with is of vue-loader
course this is something, in the back we say.
Please see:
Installation
Premise: Because Webpack is a node-based project, you first need to make sure that your PC is already installed node.js
, as well npm
. The version I am using here is: node:v5.8.0 ,npm:3.7.3
If the issue of the version, please update to the latest version.
In the event that NPM is installed too slowly, you can use the NRM project to switch the NPM source address.
Let's start with a global installation and run the following command: npm install webpack -g
it may take a little time.
After the installation is successful, enter it at the command line to webpack -h
view the currently installed version information. And the instructions you can use.
Of course, we should all install WEBAPCK into the current project dependencies, so that we can use the project's local version of Webpack.
1234567891011 |
# Make sure you've entered the project directory # Make sure there is already a package.json, do not create through NPM init #, straight all the way to the right, back to the details of the contents. # Install Webpack dependent npm install Webpack--save-dev# simple notation:-_-, abbreviated form NPM i webpack-d#–save: The module name is added to the dependencies, can be simplified to parameter-S. #–save-dev: The module name is added to the devdependencies and can be simplified to the parameter-D. |
After the installation, our package.json
catalogue should look like this:
123456789101112131415 |
{ "name": " First-demo", "version": " 1.0.0", "description": "This is my First-demo ", " main ": " Index.js ", " scripts ": { " test ": " echo \ "Error:no Test specified\ "&& exit 1" }, "author": "Guowenfh", "license": " MIT ", " dependencies ": {}, " devdependencies ": { " webpack ": " ^1.12.14 " }} |
Now that the environment has been installed, let's start with the Webpack for our first packaged run program!
First create a static page index.html
and a JS entry file entry.js
, (here you want to use any name can be, just need to read the file in the packaging when the name is good, but then know the meaning of the name!) ):
1234567891011 |
<!--index.html --<html> <head> <meta charset="Utf-8" > </head> <body> <H1 id="app" ></h1> <script src="Bundle.js" ></script> <!--Note that this is not the file we created, but the files generated with Webpack- -</body> </html> |
12 |
/*** entry.js ***/ document.getElementById (' app '). Innerhtml="This is my first package successful program"; |
Files have been created successfully, then start our packaging!
webpack entry.js bundle.js
Open in the browser index.html
, you can see the text we set! : This is my first successful package.
Would it be nice to introduce this simple feature directly into the HTML? That's true, but we're just getting started, don't worry.
Now let's add a file with the following name first.js
:
123 |
var h2= document.createelement ("H2")h2.innerhtml="No, that's a quick second package!" "; Document.body.appendChild (H2); |
Change entry.js
:
123 |
document.getElementById (' app '). Innerhtml="This is my first package successful program"; //Add require ("./first.js"); |
Repeat the work again and pack it again. webpack entry.js bundle.js
, if successful, the packaging process displays logs:
1234567 |
Hash:b1cfe7ff9d75ce235dc9Version:webpack 1.12.14time:54ms Asset Size Chunks Chunk namesbundle.js 1.82 KB 0 [emitted] ma in [0]./entry.js 208 bytes {0} [built] [1]./first.js 145 bytes {0} [built] |
Webpack
The portal file is parsed and the individual files that contain dependencies are parsed . These files (modules) are packaged in bundle.js
. Webpack
Each module is assigned a unique id
and pass through this id
index and Access module. When the page starts, the code is executed first entry.js
, and the other modules are executed at run require
time.
Refresh the browser, you can find that our code has been in effect, and new text appears.
Well, I know it's easy for you to look at, wait till we get a grade.
Webpack Novice Admission