(ii) Use of Webpack entry--webpack

Previous article (i) Webpack Getting Started--webpack installation, we know the installation of Webpack, next we want to learn how to use Webpack.

The following is from the Webpack document (not literal translation): http://webpack.github.io/docs/usage.html

Simple Webpack Use   Create a modular JavaScript projectCreate a file, create two JS files in the folder, named Cats.js, App.js, and use COMMONJS syntax to create the file contents. Cats.js File Contents:

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

App.js (entry point) content:

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

' Entry point ' is where the application begins, and is where Webpack starts to track the dependencies between modules. Start packingGive Webpack a population file (app.js), set a special output file (app.bundle.js):Webpackapp.js app.bundle.jsApp.bundle.js part of the content: This shows that not only app.js inside the content is packaged into the App.bundle.js,app.js dependency degree cats.js is also packaged in. Webpack packaging principle is to read edge analysis of the import file dependencies, analysis of the import file dependencies, and so on, as long as there are dependencies to analyze and package to the output file (app.bundle.js), it is very intuitive to show the Webpack packaging principle:

Packaged files are packaged and can now be used to run the node App.bundle.js command to see what the output is (the Cats module is output):
Complex Webpack UseWith the above, we probably know how Webpack is packaged and run, so let's take a look at some of the more complicated cases. The webpack is a very flexible module packaging tool. It provides many advanced features, but not all features are used by the command line. To use more Webpack features, you need to create a configuration file. Project StructureIn a real webpack project, we organize the resource files and packaged files in separate folders. In the following example we put the resource file in the SRC folder, and the package file is placed in the dist. Our final project directory structure is this: start creating projects, creating folders and files. 1. Create the project file named Demo2. Create SRC and Dist folders in the Demo folder 3. In the SRC folder, create App.js, Cats.js, and the corresponding app.js, cats.js content.  4. Initialize the project with the following command to create the Package.json configuration file. NPM Init 5. Install the Webpack plug-in, and the Webpack plugin is configured in the Package.json file

NPM Install Webpack--save-dev

Create and configure the Webpack configuration file1. Create a webpack.config.js file with the content:

Module.exports = {     entry: './src/app.js ',     output: {         path: './dist ',         filename: ' App.bundle.js '     }} ;

2. With the configuration file, you can simply package it with the Webpack command.WebpackA app.bundle.js file is available under the Dist folder. 3. Run the Node dist/app.bundle.js command and get a list of the Cats arrays.nodeDist/app.bundle.js

  [‘dave‘, ‘henry‘, ‘martha‘]

using loaders

Webpack only supports native JavaScript modules, but many people use translators such as ES2015, Coffeescript, typescript, and so on. Webpack ' loaders ' can solve the problem of translation. Loaders is a special module that Webpack used to load other modules written in other languages into JavaScript that Webpack can recognize. For example, Babel-loader uses Babel to load ES2015 files.

' Json-loader ' loading JSON file

Loaders can be linked, indeed there are times when you need to talk loaders links together. For example. ' Yaml-loader ' can only convert Yaml to JSON. So you need to link it to ' json-loader ' so you can use it.   translate ES2015 with Babel-loaderIn this example, we will tell Webpack to run our resource file through Babel so we can use the ES2015 feature 1. Install Babel and presets: npm install babel-core babel-preset-es2015 2. Install Babel-loader: npm install babel-loader--save-dev 3. Add a file named. BABELRC and use the Presets configuration Babel

 { "presets": [ "es2015" ] }

4. Modify Webpack.config.js to allow ' babel-loader ' to process all the. JS End Files

Module.exports = {     entry: './src/app.js ',     output: {         path: './dist ',         filename: ' App.bundle.js ',     },     module: {         loaders: [{             test:/\.js$/,             exclude:/node_modules/,             loader: ' Babel-loader ',         }]     }}

Where exclude:/node_modules/configuration is to exclude the contents of the Node_modules file, reducing compilation time. 5. Install the libraries you want to use such as jquery

NPM install jquery  babel-polyfill--save

Now we use--save instead of the--save-dev we used earlier, and these libraries will be used at runtime. We used the Babel-polyfill, so the ES2015 API is available in the old browser. 6. Modify the Src/app.js file

Import ' Babel-polyfill '; Import cats from './cats '; Import $ from ' jquery '; $ (' 
7. Packaging modules with Webpack
  Webpack
8. Load index.html file This app can run
<! DOCTYPE html>
When you open index.html, you can see a list of cats content
using plugins
In your workflow, usually you want to do some extra package processing. For example, compressing files makes it easier for clients to load faster. Plug-ins can solve this problem. We will add the Uglify plugin to the configuration file:
Const WEBPACK = require (' Webpack '); module.exports = {    entry: './src/app.js ',    output: {        path: './dist ',        filename: ' App.bundle.js ',    },    module: {        loaders: [{            test:/\.jsx?$/,            exclude:/node_ modules/,            loader: ' Babel ',        }]    },    plugins: [        new Webpack.optimize.UglifyJsPlugin ({            Compress: {                warnings:false,            },            output: {                comments:false,            },        }),    ]}
The Uglify plugin is included in the Webpack, so there is no need for additional reference modules, but not all of them, Webpack does not contain plugins, third-party plug-ins or their own written plugins to include additional reference modules.
(ii) Use of Webpack entry--webpack