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's Tutorial (reproduced)