Webpack Learning Note One (Getting started)

The Webpack integrates module loading and packaging functions, which are more and more welcome in the front-end circle for two years. Usually use Requirejs, seajs as module loading, with Grunt/gulp as the front-end construction. Webpack is compatible with Amd/cmd mode as a modular load, and as a modular resource can be js/css/image coffeescript/sass/less ES2015 modles TypeScript and other functions are very powerful, As a front-end build tool, it can also be used with grunt/gulp mates. Configuration file Webpack.config.js is also very clear.

I. Installation Webpack

npm install webpack -g 全局安装，这个时候可能会报错：npm warn optional dep failed...等错误， 可能是nodejs版本太低了 ，nodejs.org下载最新安装包即可 。

Two. command-line interface

1. Creation of 2 JS files

Cats.js

var cats = [' Dave ', ' Henry ', ' martha '];module.exports = cats;

App.js (Master file)

Cats = require ('./cats.js '); Console.log (cats);

On the command line output:

Webpack./app.js app.bundle.js

The merged compressed App.bundle.js file will be generated. Can be executed directly as Nodejs module: node app.bundle.js look at the effect.

Three. Using the configuration file

In the project root directory NPM init creates the Package.json file. You will be prompted to enter package related information.

NPM install webpack--save-dev Download the Webpack module and add Webpack to the package development dependency (so that other co-developers can go directly to NPM install).

In the project root of the new webpack.config.js inside the Webpack is the relevant configuration information.

Const WEBPACK = require (' Webpack ');  Load Webpack Module module.exports = {    entry: './src/app.js ',  //Main entry file    output: {        path: './bin ',    // Output file directory        filename: ' app.bundle.js '   //output filename    },    plugins: [        new Webpack.optimize.UglifyJsPlugin ({  //Using UGLIFYJS plugin            compress: {                warnings:false            },            output: {                Comments:false            }        })    ]};

Webpack comes with the Uglifyjs plugin and JS loader, so you don't need to add additional plugins yourself.

Go to the project root directory and run Webpack directly on the command line. You will see more than one app.bundle.js file in the bin directory.

Directory structure:

|--src

|--bin

|--node-modules

|--webpack.config.js

For the name of the folder, Webpack official website is said:

In the wild, there is many project structures. Some projects use app instead of SRC. Some projects use dist or build instead of bin. Projects with test usually use test, tests, spec, specs or colocate the test files in the source folder.

When you need to load other special resources, you need to download the relevant loading modules, such as: Babel-loader load es2015 (ECMAScript 6 abbreviation ES6, the new standard of JavaScript language. The current version of ES6 is released in 2015, so also known as ECMAScript 2015), if you want to be compatible with the older browser also need to download Babel-polyfill, so you can happily use ES6.

Webpack Learning Note One (Getting started)