Webpack Starter Pack html,css,js,img (i)

Webpack in the end is what, a lot of things on the Internet, the more you see the more you don't know what to say, so today I intend to record this period of time to learn the results of Webpack,

Webpack is the packing file, html,css,js,img, why did he pack it? Frankly, we can use the new things in advance, ES6 now browser support is not very good, but this is not a problem, you can use ES6 to write scripts,

Then through the Webpack to package into the Es5,vue project inside the Vue file is the same, but also need to webpack packaged into a browser to identify the files to normal use, nonsense, we have to

Find a disk, create a new demo file, cmd in (first to install node. js, node. JS comes with Package Manager NPM),

Execute in turn,

NPM Init-y, generating a Package.json file

NPM Install WEBPACK-G Global installation Webpack

NPM Install Webpack--save-dev Project

After the successful construction of the following file construction, (Bootstrap,jquery,layer, can not be built temporarily)

Index.html

Index.js

1. Pack Html,js (most webpack tutorials are module.exports and import start, I think the need to use the time to say the best)

Let's start by looking at how to package HTML, and JS

Plug-ins are required to package HTML

NPM Install HTML-webpack-plugin --save-dev

When the above is done, start configuring Webpack.config.js

The code is as follows, do not understand not nervous, first run up and say

varWebpack = require (' Webpack '));varPath = require (' path ');varHtmlwebpackplugin = require (' Html-webpack-plugin ');//add-ons for packaging HTMLModule.exports={entry:{' App/dist/js/index ': './app/src/js/index.js '//Entry File         //We are multi-page projects, multi-page Portal configuration is the case,         //There may be a lot of pages under App/src/page, just like this.}, output:{//__dirname The path of the current Webpack.config.jsFileName: ' [name].js ',//the name of index.js after packing,                                     //this [name] means that the key value in the entry key value pair is configured, App/dist/js/index, the last index,                                     //no matter how you src/js/index.js this script, it will be index.js after you pack it.        //path:path.resolve (__dirname)     },     //Pluginsplugins:[NewHtmlwebpackplugin ({chunks:[' App/dist/js/index '], FileName:' App/index.html ', Template:' App/src/page/index.html '          })     ]}

CMD into the demo file

Input webpack-p (compile)

That's what happens when you're successful.

Finally turn around and look at our demo file to see what changes are in there.

After packing, a index.htm and a dist file are generated under the app file

Packed out of index.html

Packed out of Index.js

Open app/index.html

This is the way to success!!!

The observation found that after the packaging of the index.html automatically introduced the packaging of the index.js, before packaging we do not have to introduce a script under app/src/page/index.html, everything to webpack! (This will be the case with packaged CSS later, too)

After packing the index.js is also compressed, flattered!!!

End

We write js,css,html is written under the src file, production environment, release version we will only publish dist inside the thing,

Currently, only the JS files are packaged in the Dist file, and the subsequent packages are CSS, even img

Webpack Starter Pack html,css,js,img (i)