Home > Developer > Web Develop
Recently learning the framework, choosing Vue, and then touching the single-file component in Vue, the official recommendation to build these single-file Vue components using Webpack + Vue-loader, and began the Webpack journey into the pit.
This series is based on the fact that no build tools and modular tools have been used. And there may be many incorrect places, I hope you understand, and point out that mistakes help improve. Thank you!
This is a series of articles, all the exercises in this collection exist in my GitHub warehouse Vue-webpack, after I have a new understanding and understanding of the article will be the occasional correction and update. The following is a list of the currently completed:
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:
Official website View: Https://github.com/webpack/webpack
InstallationPremise: 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] |
WebpackThe portal file is parsed and the individual files that contain dependencies are parsed . These files (modules) are packaged in bundle.js . WebpackEach 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.
The following is the reference document, also equivalent to a summary bar, there are many I have not practice, or can see more, good articles should be posted
Webpack Journey into the Pit (i) is not the beginning of the start
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
