Webpack Getting Started--front-end essentials

Webpack Getting Started--what is Webpack?

webpack js jsx coffee less/sass require (XXX)   jsx and sass this does not bother us, because  webpack  loader ) in dealing with these things .

Why use Webpack?

Very simple one reason, do not write react 's reunion do not use it?

Installation

First you need to install the node(my version is v5.4.1) and then execute

$ NPM Install Webpack-g

Of course if a regular project relies on writing Package.json packages better :

$ NPM Init

$ NPM Install Webpack--save-dev

Our Package.json in the root directory of the project can be seen: (Other packages depending on your project need to be installed separately)

{  "Name": "Webpack",  "Version": "1.0.0",  "description": "Demo",  "Main": "Main.js",  "Scripts": {    "Start": "Webpack-dev-server",    "Test": "Echo \" Error:no test specified\ "&& exit 1"  },  "Author": "RoRo Yan",  "License": "ISC",  "Dependencies": {    "React": "^0.14.6"  },  "Devdependencies": {    "Webpack": "^1.12.13",    "Webpack-dev-server": "^1.11.0",    "Babel-core": "^6.4.5",    "Babel-loader": "^6.2.1",    "Css-loader": "^0.23.1",    "File-loader": "^0.8.5",    "Jsx-loader": "^0.13.2",    "Node-libs-browser": "^1.0.0",    "Sass-loader": "^3.1.2",    "Style-loader": "^0.13.0",    "Url-loader": "^0.5.7"  }}

Configuration file

Create our Webpack profile webpack.config.js: (This file requires a hand code OH)

varWebpack = require (' Webpack '));varCommonsplugin =NewWebpack.optimize.CommonsChunkPlugin (' Common.js '); Module.exports={entry:"./main.js", Output: {path:'./build ',//the pictures and JS will be packed here.FileName: "Bundle.js"}, module: {loaders: [{test:/\.css$/, Loader:"Style-loader!css-loader"}, {test:/\.less$/, Loader:' Style-loader!css-loader!less-loader '            }, //use! To connect multiple loader{test:/\. (png|jpg) $/, Loader:' url-loader?limit=8192 '            } //Inline base64 URLs, limited <=8k pictures, other URLs]}, Resolve: {extensions: [', '. js ', '. json ', ' coffee ']}, plugins: [NewWebpack. Hotmodulereplacementplugin (),NewWebpack. Noerrorsplugin ()]}

For this configuration file is explained below:

1) Entry:entry can be a string or an array or an object. Specifies the packaged entry file, a key-value pair, which is a portal file

2) Output: The name of the package result file, where I specify it in./build Folder Packaging output

3) Resolve: Used to indicate which suffix the program auto-complete recognizes,
Note that the first extensions is an empty string! Corresponds to a situation where no suffix is required.

4) Module: and some regular. When a file that needs to be loaded matches the test's regular, it calls the following loader to process the file, which is why Webpack is powerful.

References to 1.js

For example, the definition of all the files at the end of the. JS is handled with Babel-loader, and the. Jsx end of the file is Jsx-loader processed and then babel-loader processed. Of course these loader also need to be installed via NPM install

2. References to Styles and pictures

Require ('./bootstrap.css '); require ('./myapp.sass '); var img = document.createelement (' img '); Img.src = require ('./glyph.png ');

When you refer to CSS (or SASS bar), Webpack will inline the CSS into the JavaScript package, and require () will insert a <style> tag into the page. When you introduce a picture, Webpack inserts the URL of the corresponding image in the package, which is returned by require (), and the picture may be converted to Dataurl in base64 format. But note that all these have to be written in the Webpack.config.js file for the corresponding loader:

5) Plugins: This defines the plugins that need to be used,

For example, Commonsplugin will extract a common section when packaging multiple portal files, generating Common.js

The Noerrorsplugin plug-in is also configured to skip code and log errors at compile time, so that the package does not get an error after compiling the runtime: Of course Webpack has many other configurations, depending on its configuration document

Get ready

Create a new index.html file (for example) in the root of the project, which is something necessary to introduce a program in the portal file.

<!DOCTYPE HTML><HTMLLang= "en"><Head>    <MetaCharSet= "UTF-8">    <title></title></Head><Body><Scriptsrc= "./build/bundle.js"></Script></Body></HTML>

Note that the reference to the Bundle.js file is very important, he is our packaging after the import file, do not introduce it program is not run up.

Run

On the command line, type

Webpack

When you find that the hint is green, it shows success.

Webpack-p to compile ( compress code ) against the publishing environment

Webpack--watch for continuous incremental compilation of the development process

webpack-d to generate sourcemaps

As the project grows, the compilation process may grow longer, so we can show some progress bars and add color to achieve more friendly output. We can use the following command to achieve the goal:

Webpack--progress--colors

Development Server

Provide a development server, enable HTTP static server , install globally with the following command

NPM Install Webpack-dev-server-g

Start the server

Webpack-dev-server--progress--colors

This binds a small Express Server to localhost:8080 to serve your static resources and bundle(auto-compile). By accessing Http://localhost:8080/webpack-dev-server/bundle, the web browser page is automatically updated each time the bundle is recompiled.

Defects

Webpack the error is not friendly, the middle process printing out to see is a good choice:

Webpack--display-error-details

Summary

Webpack is my current access to a better front-end development tool. Many features were previously seen on the FIS documentation, but the FIS are relatively heavy and I never get started. This essay is mainly about Webpack introduction, so you probably understand what is webpack, how to use the tool the simplest, this tutorial does not involve react knowledge, to say together, too much,

Webpack 's official website is http://webpack.github.io/ ,

Document address is http://webpack.github.io/docs/

Webpack Getting Started--front-end essentials