Home > Developer > Web Develop
Webpack Getting Started
Directory
1 Installing Webpack
2 Initializing a project
3 Webpack Configuration
4 Auto Refresh
5 third-party libraries
6 modularity
7 Packaging, Building
8 Webpack Templates
I recently used a lot of jspm, but because of the front-end development environment, it is very difficult to write test code, and the project needs to write tests, so decided to try Webpack first.
Installing Webpack
Webpack is a NPM package, so we use the NPM command to install it globally:
NPM Install Webpack-g
After the installation is complete, the Webpack command is available at the command line, and the Webpack--help can be used to view the various commands provided by Webpack.
Initialize Project
Grunt.js A class of tools that can initialize a project with yeoman, I don't see webpack have a similar approach, so when the node. JS Project is initialized.
NPM init Create a Package.json file
NPM Install Webpack--save-dev The local webpack in the current directory
After completing the above two steps, we have a Package.json file under our project, a Node_modules folder, and we also need a index.html file with the following content:
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>webpack Tutorials </title>
<body>
</body>
Webpack Configuration
Our code will be organized in the JavaScript module, the project will have a portal (entry) file, such as main.js, we need to specify its location through the Webpack configuration file.
Create a new Webpack.config.js file in the root directory and add the following:
Module.exports = {
Entry: './main.js '
};
Because we need to package and merge JS files before the project is deployed, we also need to configure an output in Webpack.config.js:
Module.exports = {
Entry: './main.js ',
Output: {
Path: __dirname,
FileName: ' Bundle.js '
}
}
The output defines the location and name of the file we have packaged.
After completing the above, try to execute the webpack command under the project root, we will have a bundle.js file in the root directory:
Webpack Build
Auto Refresh
So far, we have not opened the index.html file in the browser, in fact, we don't even have the Bundle.js file added to the index.html file. Now and first join:
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>webpack Tutorials </title>
<body>
<script src= "./bundle.js" ></script> <!--Add this line of code to the index.html file--
</body>
This is where Webpack is different from other tools, and it refers directly to the build JS file in the HTML file instead of the original Main.js file. Here are a few questions:
How does the change in Q:main.js or the module referenced in real-time compile to bundle.js?
A: Very simple, execute Webpack--watch in the root directory can monitor file changes and compile in real time
Q: The above is just a real-time compilation of JS files, how can we synchronize the changes to the browser page, to achieve real-time refresh?
A:webpack provides the webpack-dev-server to solve the problem of real-time refresh of the page while solving the above problem.
?
Installing Webpack-dev-server
Performing NPM install webpack-dev-server-g installing webpack-dev-server in the Global environment
Execute the command under the project root directory:
$ webpack-dev-server
This allows us to open our project file on the default http://localhost:8080 URL.
At this point, we may think that
JS file modification
Webpack-dev-server Monitoring to change
Webpack re-compiling
Update pages in the browser in real time
But unfortunately, we are "self-righteous". http://localhost:8080 This website is indifferent to the change of JS file.
We can enable the hot mode of webpack-dev-server and insert the following line in the code:
<script src= "Http://localhost:8080/webpack-dev-server.js" ></script>
This http://localhost:8080/this URL can also be based on the changes of JS automatically refreshed accordingly.
Third-party libraries
Webpack is not a package manager, so if we're going to use a third-party library, we need NPM or other tools. For example, to install JQuery in a project:
NPM Install jquery--save
Modular
Webpack self-proclaimed module bundler, in its definition, CSS, pictures, files and so on, can be loaded by the corresponding loader, into the JavaScript module, the following specific deployment instructions.
Modular JavaScript
If I want to introduce a ES6 module using ES6, for example:
Import $ from ' whatever ';
What to do? Browsers do not provide native support, webpack through various loader to solve this kind of problem. This ES6 syntax, for example, can be aided by Babel-loader:
Installing Babel-loader
NPM Install--save-dev Babel-loader
Configure Webpack.config.js
To add a module to the Module.exports value:
Module.exports = {
Entry: {
App: [' Webpack/hot/dev-server ', './main.js ']
},
Output: {
FileName: ' Bundle.js '
},
Module: {
Loaders: [
{test:/\.js$/, Loader: ' Babel ', Exclude:/node_modules/}
]
}
}
So that we can use the ES6 syntax in our JS file, Babel-loader will be responsible for compiling.
The method above is to define the loader for a type of file in the Webpack.config.js file, and we can specify it directly in the code:
Import $ from ' Babel!whatever '
Because Babel-loader allows us to use the ES6 syntax, our modules can be used to organize the code with ES6 modules: Export a simple module:
Script/log.js file
Export Default (param) = {
Console.log (' hello ', param);
}
Then import the use in Main.js:
Main.js file
Import log from "./script/log.js";
CSS Loader
We can use CSS in the traditional way, that is, add in the HTML file:
<link rel= "stylesheet" href= "Style/app.css" >
But in Webpack, CSS can also be modular and imported using import.
So we no longer use the link tag to refer to CSS, but to Webpack Style-loader and Css-loader. The former inserts the CSS file into the
Install CSS-related loaders
NPM Install Style-loader Css-loader--save-dev
Configuring the Webpack.config.js File
{
// ...
Module: {
Loaders: [
{test:/\.css$/, loaders: [' style ', ' CSS ']}
]
}
}
Introducing CSS in the Main.js file
Import './style/app.css ';
Restart Webpack-dev-server
Modular CSS
In the previous step, we import the CSS files in the JavaScript file in the CSS file packaging is export to the global environment, that is, we just changed the way to load CSS, when writing CSS, still need to pay attention to the use of naming norms, such as BEM, no The global environment CSS class conflicts and so on will not disappear.
Here, Webpack made a modular CSS attempt, the true meaning of "modularity," that CSS classes will not be leaked into the global environment, but only in the UI module-such as react.js such as modules, or Web Components. Similar attempts are ember-component-css with JSPM's plugin CSS.
Autoprefixer
When we write CSS, according to the specification written, build with autoprefixer can output-webkit,-moz such a browser prefix, Webpack also provide this function through loader.
Installing Autoprefixer-loader
NPM Install Autoprefixer-loader--save-dev
Configure Webpack.config.js
Loaders: [{
Loader: ' Style!css!autoprefixer? {browsers:["last 2 Version", "> 1%"]} ',
//...
}]
Restart Webpack-dev-server
If we write the body {Display:flex;} rule in CSS, and then look at the Bundle.js file, we can see code similar to the following:
Body {\n\tdisplay:-webkit-box;\n\tdisplay:-webkit-flex;\n\tdisplay:-ms-flexbox;\n\tdisplay:flex;\n}
Image
The picture is also a module, but it uses file loader or URL loader, which determines whether to use the data URL based on the defined size range.
Import loadingimg from ' file!.. /img/loading.gif '
React.render (, document.getElementById (' app '));
Packaging, Building
After the project is finished, the code needs to be compressed, confused, merged, and so on at the command line:
Webpack
Webpack, the corresponding file is generated according to the configuration path and build file name in the Webpack.config.js file.
Webpack templates
The above said is step by step use Webpack to build the development environment, of course, in practical applications, large can borrow some templates, such as react hot boilerplate such a library.
Webpack installation configuration using the tutorial detailed
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
