Webpack's fool-style tutorial

Contact Webpack also has a long time, the company's project has been using Webpack in packaging processing, but the first few days to teach the new situation, encountered a problem, that is: although the online webpack tutorials flying around, but it is difficult to find a new quick start, grounding gas, A fool-style tutorial, self-taught and too wasted time. Thinking about it, I decided to write a webpack, a fool-style tutorial to teach people who have not yet understood Webpack to start quickly.

For Webpack concept, use, benefits and so on are omitted, want to understand the Internet search can, here directly shows how to create a new instance of Webpack.

1, installation of Nodejs, installation process on-line search.

2. Create a new folder on D, E, or any of the disks named Webpack_demo:

3. Press the SHIFT key in the Webpack_demo file and click the right mouse button, then left click "Open command Line window here":

In the Command line window that opens, type:

NPM Init

Name indicates the project name, version, and so on, not one by one, see the field is easy to understand, one by one fill out or directly all the way to press ENTER, and finally appear "Is this OK? , the Package.json file is generated under the Webpack_demo folder after hitting enter.

4. In the command line, execute the following command separately, install the corresponding plug-in (--save-dev function is installed plug-in while the plug-in name is written to the Package.json devdependencies list):

NPM Install webpack--save-devnpm install jquery--save-devnpm install style-loader css-loader--save-devnpm Install extra Ct-text-webpack-plugin–save-dev

After the installation is complete, the Package.json code is as follows (name, version, description, etc. are added manually in the NPM init step):

{"Name": "Webpackdemo", "Version": "1.0.0", "description": "A Webpack Demo", "Main": "Index.js", "scripts": {"Te St ":" Echo \ "Error:no test specified\" && exit 1 "}," author ":" Liqiyuan "," License ":" ISC "," devdependencies ": {" Css-loader ":" ^0.26.1 "," Extract-text-webpack-plugin ":" ^1.0.1 "," jquery ":" ^3.1.1 "," Style-loader ":" ^0 .13.1 "," Webpack ":" ^1.14.0 "}}

5, at this time to view the Webpack_demo folder, you will find a more folder:

Double-click to open the contents of the folder below:

Indicates that the required plugins have been successfully installed.

6. Create a new file under the Webpack_demo file Webpack.config.js:

Edit the code as follows:

var extracttextplugin = require ("Extract-text-webpack-plugin"); module.exports = {entry: './js/main.js ', output: {PA　　　　Th: './dist ', filename: ' Bundle.js '}, plugins: [New Extracttextplugin ('./style.css ')], module: {//Loader configuration　　　　　　Loaders: [{test:/\.css$/, Loader:ExtractTextPlugin.extract ("Style-loader", "Css-loader")} {//test:/\. (png|jpg) $/,//loader: ' url-loader?limit=8192 '//}}};

The above code means:

Introduced extract-text-webpack-plugin this plug-in (to support the packaging of CSS files, the default only supports packaging JS files), Read the current directory in the JS folder main.js (portal file) content, the corresponding JS and CSS files packaged, packaged files into the current directory of the Dist folder, the packaged CSS file named Style.css, after the packaging of the JS file named Bundle.js.

7, Webpack_demo under the new JS folder, inside the new main.js, code editing as follows:

Require ('./index/index.js '); require ('./index/index2.js '); require ('. /css/index/index1.css '); require ('. /css/index/index2.css '); require ('. /css/common/public.css ');

The above code means: Introduce the Index.js,index2.js under the Index folder of the current directory, introduce the PUBLIC.CSS under the Index1.css,index2.css and common folders under the index file under the previous level directory CSS folder.

8, the new step in the corresponding path of CSS, JS, index, common folder, the inside of the corresponding CSS or JS file, each CSS, JS file written in different code.

9. Execute code in the window command line:

Webpack

You are prompted to pack successfully:

At this time open the Webpack_demo folder, found more Dist folder, open, inside the file as follows:

10. Create a new index.html file that only introduces Bundle.js and STYLE.CSS:

<! DOCTYPE html>
Double-click the browser to open this HTML, you will find the portal file Main.js inside all the JS and CSS files have been implemented.
Webpack's fool-style tutorial