Home > Developer > Web Develop
What Webpack is, mentions this concept, many people may say immediately, the modular loader and the packing tool, may use the various resources as the module to be used and the processing and so on.
When it comes to front-end building tools, it inevitably mentions gulp, what is the difference between Webpack and gulp? At the beginning I was not very clear, always feel the difference between them, and then carefully studied to find the difference.
First of all, Webpack is just a function of front-end building. In essence, Webpack is a modular solution similar to require.js, except that some functions of the build tool are implemented through plugins, such as the ability to compile less as a CSS and be called as a module through Less-loader. Gulp is a series of plug-ins to automate the original complex task, is a pure tool, and can not be your CSS and other non-JS resources modular, but webpack can do this. In general, Gulp is a tool for automating tasks, so you can configure Webpack files with Gulp.
The advantages of Webpack are as follows:
1. Webpack follows the Commonjs form, but the support for Amd/cmd is also comprehensive and facilitates code migration for older projects.
2. Can be modularized not only JS, all static resources, such as CSS, pictures, etc. can be modular, that is, the introduction of require way.
3. Easy to develop, can replace part of GRUNT/GULP work, such as packing, compression confusion, picture turn base64 etc.
How to use the specific webpack can be learned through a very simple demo project:
First, create a new project on git and install webpack globally. (Of course, first you have to install node)
NPM Install webpack-g (may require sudo permissions).
The current version can be viewed through webpack-v after installation. If it appears as shown below, the installation is successful
hash:507b96dfc644d4199f75 1.12.15
2, configure dependencies via Packge.json. With NPM install, the NPM module is loaded, and the next step is to analyze what plug-ins are needed
1) Webpack must be relied on first.
2) This project exists js,html,less three parts, JS do not need to pass loader conversion, so need to less-loader, but the basic style loader must be required to rely on three plug-ins, Less-loader, Css-loader, Style-loader. As shown below:
"Dependencies": { "cnpm": "^4.2.0", "Css-loader": "^0.23.1","Less-loader": "^ 2.2.3 ", " Style-loader ":" ^0.13.1 ", " Webpack ":" ^1.12.15 " }3, configuration Management using Webpack.config.js, similar to Gulpfile.js (following the Common.js specification)
The first step is to introduce Webpack
varWebpack = require (' Webpack '));Module.exports={entry:'./js/index ',//Page Portal File configuration //file Output Configurationoutput: {path: __dirname,//Current file Package.jsonPathFileName: '/dist/index.js '//Packaged after the outputfiles, that is, dist under the Index.js}, module: {//Loader ConfigurationLoaders: [{test:/\.less$/, Loader:"Style-loader!css-loader!less-loader" }] }}
4, build the corresponding folders and files
1) HTML only need to load the package after the file, that is, dist/under the indx.js can not be the same as the original JS and CSS loaded separately
1 <Head>2 <MetaCharSet= "UTF-8">3 <title>Index</title>4 <Scriptsrc=".. /dist/index.js "></Script>5 </Head>
2) index.less is the simple less syntax style (to check if the CSS is in effect):
Body { color: red;}3) A simple return string in the module file Alerts.js for testing.
Module.exports = ' This was Webpack demo by Xiaoxiang to Rain ';
4) In the entry file, the less file and module alerts.js are introduced.
Require ('.. /less/index.less '); // Introduce less files var alerts = require ('./alerts.js '); // Module JS file alert (' So, it's so easy to use Webpack ');d ocument.write (alerts);5. Execute NPM Run Build
To see if it is successful, the Execute command can be configured in the Gulp file or can be configured in the Package.json. Configured here in Package.json:
"Scripts": { "build": "Webpack" },This is a simple webpack based on the completion of the demo, here is only a personal point of view, hope to attract the advice of the great God.
SOURCE git address: https://github.com/xiaoxiangdaiyu/webpack_demo.git
The difference between Webpack and gulp and its example construction
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
