How to use Webpack to package your project

Webpack is one of the most commonly used packaging tools in front-end development, plus gulp,grunt. This is not the case before, so here's a look at the process of packaging with Webpack.

Grunt and gulp work in a configuration file that indicates specific steps for tasks such as compiling, combining, and compressing certain files, which can then be done automatically for you.

The way Webpack works is to treat your project as a whole, With a given master file (for example: Index.js), Webpack will start to find all dependent files for your project from this file, use loaders to process them, and finally package it as a browser-aware JavaScript file.

Let's create a new project to describe in detail the process of using Webpack to package a project:

1. Install NPM, this will not be repeated, and then execute NPM init in a directory, so that a project package is initialized, there is a Package.json file, this file must be known to everyone

2. then install the Webpack, since we want to pack, we need to put webpack this tool installed, the installation method has two, one is the global installation is installed in the project, the command executed in the Package.json directory of the project is NPM Install-g Webpack and NPM install--save-dev Webpack, where we are installed in the project, using the second installation method

3. After installation we can see a node_module folder under the project directory, then we can write our own project, we first set up a folder of the app and public, create two new files in the app, Test.js and Main.js, respectively, create a new index.html file in Pulic so that our basic project prototype is created

4. We write a fragment in index.html:

<! DOCTYPE html>"en">  "  utf-8">    <title>webpack project</title>  'root'>    </div>    <script src=  "bundle.js"></script>  </body>
5. We write such a method in Test.js except for:
// Test.js  = function () {  var test= document.createelement ('div' ) );   " Hi there and testing! " ;   return test;};
6. We import the Test.js method into the Main.js:
var test= require ('./test.js'  );d Ocument.getelementbyid (    'root'). appendchild (Test ());
7. below we can use the Webpack tool to package, in the root directory of the project, that is, the directory containing Node_module, execute the following command Node_modules/.bin/webpack App/main.js Public/bundle.js, this command is to use Webpack to name the packaged file Bundle.js placed in the public folder, where App/main,js is the entry of the project. We can see that the terminal will print a log containing such

8. This means that our packing is done, and then we open the index.html file to see what we entered: Hi there and testing!
9. in order to configure the project portal, but also configure the output file name and so on, the command line input is more troublesome, we can use the way the file configuration, in the root directory of the project to create a new Webpack.congfig.js file, the following content to write in
Module.exports = {  entry:  "/app/main.js",// The only entry file that has been mentioned many times    output: {    "/public",// where the files are stored after packing     "bundle.js"// Package output file name   }}
So that we can directly use the Node_modules/.bin/webpack directly to the packaging operation
 If we do not want to use node_modules/.bin/webpack and so on, we are accustomed to use NPM xxx and so on, we set up the launch command in our Package.json:
" Scripts " : {    "webpack""webpack"// the place to be configured is here.  }
Then we execute the NPM run Webpack and we can also perform the packaging tasks
 Next we introduce, how to directly introduce JSON type of file, here we use the Loaders module, first say the application scenario bar. We now have a JSON file, we want to import it into the module, and then read the information inside, the following is the directory of our files:

 If we want to import this JSON file in any module, such as Test.js or main.js, for example, there is such a content in our Test.json file
// Test.json {  "Test""Hi there and geetings from json! " }
We want to use this test field in Test.js
var test = require ('./test.json'= function () {  var Geet = document.createelement ('div');   = Test.greettext;   return Geet;};
We are going to introduce Json-loader, in the following way: executing in the root directory
Install loader that can be loaded with JSON
NPM Install--save-dev Json-loader
Then we'll configure our webpack.config.js as below.
Module.exports ={entry: __dirname+"/app/main.js", Output: {path: __dirname+"/public", FileName:"Bundle.js"}, module: {//add JSON loader to the configuration fileLoaders: [{test:/\.json$/, use:"Json-loader"      }    ]  }}
Finally we execute NPM run Webpack, packaged, open index.html page will show Test.json inside the hi there and geetings from json! this content
 If we want to pack CSS styles together, NPM install--save-dev style-loader css-loader, And then the corresponding configuration in the webpack.config.js, so that the JS and CSS into a file, you can also pack them separately.
 How to use Webpack to package your project