Webpack Study Notes

A simple example, understand how to operate, how the file was made. In my opinion and gulp/grunt difference is not too big, but a lot of people say better, more advanced

WebPack

Website address: http://webpack.github.io/

Installation: #npm install-g Webpack

or #npm install webpack-g

If Linux/mac can be used #sudo npm install-g webpack

Create a project

(1) Create a directory and enter the directory

#mkdir webpack_test && CD webpack_test

(2) Create Package.json

#nam Init

All the way to the carriage.

(3) Download The webpack of the project

#npm Install Webpack--save-dev

# NPM Install Jsx-loader--save-dev//react jsx

# NPM Install Style-loader--save-dev//style//Style CSS less has dependencies

# NPM Install Css-loader--save-dev//CSS

# NPM Install less-loader--save-dev//less load

Less

(4) Create a webpack.config.js file

#touch Webpack.config.js

(5) Edit webpack.config.js file

#vi Webpack.config.js

var webpack = require (' Webpack ');

var = require (' less ');

Module.exports = {

/**

* [Context description]base directory

* @type {String}

*/

Context:__dirname+ "/src/",

/**

* [Entry description] module entry

* @type {String or Array or Object}

* values can omit suffixes. js

*/

Entry: './index ',

/**

* [Output DESCRIPTION] set input directory and file name

* can be set

* @type {Object}

*/

output:{

path: "./dist",

filename: "[name].min.js"

},

/**

* [module description] loader configuration

* @type {Object} Each file requires a loader to handle. all loaders need to use npm to load

*/

module:{

loaders:[

{

test:/\.less$/,loader: "style!css!less"

}

]

},

/**

* [Resolve description] Configure aliases

* @type {Object}

*/

resolve:{

alias:{

}

},

/**

* [Plugins description] plugin

* @type {Object}

*/

plugins:{

}

}

Create js file

#mkdir src && cd src

# Touch Index.js

#vi Index.js

Console.log ("Hello world!");

#webpack

#touch main.less

#vi main.less

@bg: #eee;

@fontSize: 40px;

body{

Background: @bg;

Font-size: @fontSize;

}

#vi Index.js

Add require ("./main.less");

Execution

#webpack--display-error-details-w// Clear View error

Or

#webpack

For configuring Express+webpack

I downloaded an example from GitHub.

Website:https://github.com/kenanpengyou/express-webpack-full-live-reload-example.git

After download

Go to Catalog

#npm Install

Upon completion

Browse: #node App_browsersync

The build file is the Webpack command #webpack

Release #webpack--config webpack.production.config.js-p

# node App

Source: Link: Https://pan.baidu.com/s/1boFCxJL Password: itn8

Webpack Study Notes