The words written in the front

Before reading this article, take a look at the webPack configuration file below. If you know everything, this article may be of limited benefit to you. You can scan it quickly or skip it. If you’re like me 10 days ago and you’re wondering about a lot of options, take some time to read this article, and one by one your doubts will disappear. If you haven’t had much experience with Webpack before, and if you are interested in Webpack, there is an example throughout this article. If you can write this example yourself, you will find that you have clearly entered the door of Webpack.

Var Webpack = require(' Webpack '); var HtmlWebpackPlugin = require('html-webpack-plugin'); var ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = { entry: __dirname + "/app/main.js", output: { path: __dirname + "/build", filename: "[name]-[hash].js" }, module: { loaders: [ { test: /\.json$/, loader: "json" }, { test: /\.js$/, exclude: /node_modules/, loader: 'babel' }, { test: /\.css$/, loader: ExtractTextPlugin.extract('style', 'css?modules!postcss') } ] }, postcss: [ require('autoprefixer') ], plugins: [ new HtmlWebpackPlugin({ template: __dirname + "/app/index.tmpl.html" }), new webpack.optimize.OccurenceOrderPlugin(), new webpack.optimize.UglifyJsPlugin(), new ExtractTextPlugin("[name]-[hash].css") ] }Copy the code

What is WebPack and why should you use it?

Why use WebPack

Many web pages today can be thought of as feature-rich applications with complex JavaScript code and a lot of dependency packages. Many good practices have emerged in the front-end community to simplify development

  • Modularity allows us to break down complex programs into smaller files.
  • Development languages such as TypeScript, which are extensions of JavaScript, allow us to implement features that cannot be used directly in current versions of JavaScript, and then be installed as JavaScript files for browsers to recognize.
  • CSS preprocessors such as Scss and LESS
  • .

These improvements have greatly improved our development efficiency, but the files developed using them require additional processing to be recognized by the browser. Manual processing is very complex, which provides the need for webPack-like tools.

What is a Webpack

WebPack can be thought of as a module baler: what it does is analyze the structure of your project, find JavaScript modules and other presets, and package them into the appropriate format for the browser to use.

How does WebPack compare to Grunt and Gulp

There is not much comparison between Webpack and the other two. Gulp/Grunt is a tool to optimize the workflow of the front end, while Webpack is a modular solution. The advantages of Webpack make Webpack a substitute for Gulp/Grunt class tools.

Grunt and Gulp work like this: in a configuration file, specify the steps for compiling, combining, and compressing certain files. The tool then automatically performs these tasks for you.




Grunt and Gulp workflow


Webpack works by treating your project as a whole. Given a main file (such as index.js), Webpack will start from that file to find all of your project’s dependent files, use loaders to process them, and preferably package them into a browser-aware JavaScript file.




How Webpack works


If you really want to compare the two, Webpack is faster and more straightforward, and can package more different types of files.

Start using Webpack

After a preliminary understanding of how Webpack works, we began to learn how to use Webpack step by step.

The installation

Webpack can be installed using NPM. Create an empty exercise folder (named Webpack Sample Progect here) and execute the following command after the terminal is transferred to this folder to complete the installation.

NPM install --save-dev webpack // Install to your project directoryCopy the code

Preparations for the official use of Webpack

  1. Create a package.json file in the above exercise folder. This is actually a standard NPM specification file that contains a wealth of information, including dependencies for the current project and custom script tasks. Used on terminalsnpm initThe package.json file is automatically created by the package.json command 
    npm initCopy the code

After entering this command, the terminal will ask you a series of information such as project name, project description, author, etc., but don’t worry, if you are not going to publish your module in NPM, the answers to these questions are not important.

  1. With the package.json file in place, we install Webpack as a dependency package in this project

    // install Webpack NPM install --save-dev WebpackCopy the code

  2. Go back to the empty folder and create two folders inside,app and public. App is used to store the raw data and JavaScript modules you wrote. The public folder is used to store data that is ready to be read by the browser (including packaged JS files generated using Webpack and an index.html file). The index.html file is placed in the public folder, and two JS files (greeters.js and main.js) are placed in the app folder. At this point, the project structure is shown in the figure below




    The project structure


The index.html file is just basic HTML code, and its sole purpose is to load the bundled JS file (bundle.js).



  
    
    Webpack Sample Project
  
  
    
       

    
       

    Copy the code