Front-End Engineered Webpack (I.)

Basic usage of Webpack

1.app.js Introduction Module

Import Modulelog  from './module.js'//introduced modulelog from./module.js

2.module.js Export Module

Export Default function　　　　　　(){}; Export function () {}

3. Packaging

App.js dist/bundle.js //Package entry file app.js  Export file ./dist/bundle.js

　　Here to use Webpack this command to $ npm i-g webpack

Webpack.config.js the most settings

Const PATH = require (' path '); Built-  in module =  {'./app.js ',//ingress  output: {//Exit        Path:path.join (__dirname,dist),/ /With this method  the delimiter of the path (with \ or/) will        not error './dist ',//path is the output directory         used to store the packaged file ' Bundle.js '//PUBLICP Ath make reference directory for resource file   },
}

After configuring the above, only need to enter Webpack to implement packaging in the folder to generate the entity file

$ webpack

webpack-dev-server Hot Load added to module.export inside the development of this module to use to $ NPM i-d webpack-dev-server

devserver: {  ' dist ',//output bundle.js place   3000//port number },

Add a script face in the configuration Package.json

Dev: ' Webpack-dev-server '

Do not generate local files after packaging is present in memory

$ npm Run dev//Enter locallhost:3000 in the browser to access

After setting the Publicpath in the devserver output there is no need to set the Path and Publicpaht, then the page introduced is not the local folder inside the Bundle.js, but the Fillename attribute is in effect You can also set devserver inside the Publicpath to change the build directory here to notice a little devserver publicpath to indicate that the current path to use a '/' expression (the author is also a beginner this Something tried all night ... However this attribute is not very important)

Front-End Engineered Webpack (I.)