Home > Developer > Web Develop
1. InstallationNote: The content of this article is based on a quick reference for beginners.
Please refer to the official documentation for more details.
This article is posted on my blog in sync, so please follow ^_^
2. Basic use-g webpack
Suppose the project file structure is as follows:
/app |--index.html |--main.js |--mymodule.js
index.htmlThe code is as follows:
<! DOCTYPE html>="EN">><meta CharSet="UTF-8"> <title> Document</title>< Span class= "token operator" ></head><body> <script Src=> </script></body></html> main.js and mymodule.js code is as follows:
//main.jsrequire ( Span class= "token string" > "/mymodule.js ' ) ; Mymodule.jsmodule.exports = function ({document. Write ( ' Hello Webpack ' ;} Then execute the command:
webpack main.js app.js
The build file is packaged app.js .
It is cumbersome to manually enter the source file name and output file name each time, and you can use the configuration file to manage it. In the app directory, create a new webpack.config.js file with the following contents:
module.exports = { entry: ‘./main.js‘, output: { filename: ‘app.js‘ }};
And then execute
webpack
It will automatically generate the packaged files.
However, each time you change the source file, you need to execute the command manually, you can watch automatically detect the file changes and repack by adding. The configuration file is modified as follows:
module.exports = { entry: ‘./main.js‘, output: { filename: ‘app.js‘ }, watch: true};
Configuration files can be configured for a variety of other functions, see the official documentation for details.
4. Using LoaderMany module packaging tools are only for JS files, and Webpack is the power of the concept of the module is extended, that all static files are modules, including CSS, HTML templates, fonts, coffeescript and so on. Although Webpack itself is still capable of handling only JS files, it is possible to process other files through a series of loader.
The following css-loader style-loader example shows how to package a style file. Install the dependent module first by executing the following command:
npm install css-loader style-loader --save-dev
Then app create a new file under the directory style.css with the following contents:
{ background: red;}
Then modify the main.js following:
require(‘./mymodule.js‘)();require(‘style!css!./style.css‘);
Because Webpack cannot directly handle CSS files, it is require necessary to specify the required loader in the statement, a file can be processed sequentially, between loader and loader, and between loader and filenames ! . In this example, it can also be seen that if more than one loader is used, the data flow is from right to left, that is, from the style.css beginning, followed by css-loader and style-loader .
However, if there are multiple CSS files, each require statement needs to add loader instructions, very inconvenient, so you can webpack.config.js configure in the file, configured as follows:
Loaders:[{test/\.css$/ ' style!css ' }]//orloaders: [{test: /\.css$/: [ ' style ' ' CSS ' ]For more information on loader, refer to:
Now if you need to use angular in this example, first index.html introduce the <script> Angular library in the label, and then modify the mymodule.js following:
var angular = require(‘angular‘);angular.module(‘MyModule‘, []);
At this point, if the execution webpack command will report the following error:
in ./mymodule.jsModule not found: Error: Cannot resolve module ‘angular‘ in /xxx/xxx/app @ ./mymodule.js 1:14-32
This is because Webpack cannot parse the angular dependent module, and external dependencies need to be configured in the configuration file:
externals: { ‘angular‘: true}
For more information, refer to Configuration#externals.
6. Output TypeNow if we want the packaged file as a separate library and follow the AMD specification can be used by Requirejs, you can modify the configuration file as follows:
output: { filename: ‘app.js‘, library: ‘app‘, libraryTarget: ‘amd‘}
At this point the output is app.js structured as follows:
define("app", ["angular"], function( /* ... */ ) { /* ... */});
With configuration output.libraryTarget , you can customize the output module type, including AMD,COMMONJS, variables, and many other output types. Refer to Configuration#output for details.
Now if the project directory structure is as follows:
/app |--components.js |--index.html |--main.js |--mymodule.js
Where mymodule.js main.js and Components.js . If we want main.js output to app.js , output is app.components.js , you can modify the configuration file as follows:
entry: { app: ‘./main.js‘, ‘app.coomponents‘: ‘./components.js‘},output: { filename: ‘[name].js‘}
Webpack Getting Started Tutorial
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
