Webpack Theory full version

A cursory study of the official documents of Webpack, for the time being, is about how Webpack is building a project as a whole, including a package that replaces Gulp and grunt, and a further step in the practical project. After all, there has been a period of time without, knowledge is to consolidate, not to consolidate is really unfamiliar, and webpack4 fresh out of the oven, claiming to achieve zero configuration. And recently the day after tomorrow students are learning about spring boot and Spring cloud, which is also known as the 0 configuration. Although the feeling technology is more and more, but "lazy" is still a lot of people, as the saying goes lazy promote the development of the world. Then, the next study webpack4 after the decomposition.

Here's an update on the last Webpack note:

Webpack

Application Static Module Packager

Webpack-dev-server provides you with a simple Web server and is able to reload in real time,

NPM Install-save-dev webpack-dev-server

When using Webpack Dev server and the node . js API, do not place the dev server option in the Webpack configuration object (webpack Config objects). Instead, when the option is created, it is passed as the second argument

Const WEBPACKDEVSERVER = require(' webpack-dev-server '); // service dependent

Const WEBPACK = require(' Webpack'); // webpack dependent

Const CONFIG = require('./webpack.config.js '); // webpack config dependent

Const OPTIONS = { dev-server configuration

Contentbase: './dist ',

Hot:true,

Host: ' localhost '

};

Webpackdevserver.adddevserverentrypoints(config, options);

const compiler = Webpack(config);

Const SERVER = new Webpackdevserver(compiler, Options);

Server.listen(, ' localhost ', () = {

Console.log(' Dev server listening on port ');

});

Webpack Development and production environment is different, the development environment to have a strong real-time reload module and hot replacement module, production environment requires faster load time, more optimized resource application.

But follow the dry principle:

Webpack-demo

|-Package.json

-|-webpack.config.js

+ |-webpack.common.js

+ |-webpack.dev.js

+ |-webpack.prod.js

|-/dist

|-/SRC

|-Index.js

|-Math.js

|-/node_modules

Based on this project directory, we extract the common Code of the development environment and production environment,

Webpack.common.js:

+ Const PATH = require(' path ');

+ Const Cleanwebpackplugin = require(' Clean-webpack-plugin ');

+ Const Htmlwebpackplugin = require(' Html-webpack-plugin ');

+

+ Module.exports = {

+ entry: {

+ app: './src/index.js '

+   },

+ plugins: [

+ New Cleanwebpackplugin([' Dist ']),

+ New Htmlwebpackplugin({

+ title: ' Production '

+     })

+   ],

+ output: {

+ filename: '[name].bundle.js ',

+ path:path.resolve(__dirname, ' Dist ')

+   }

+ };

Webpack.dev.js:

+ Const MERGE = require(' Webpack-merge ');

+ Const COMMON = require('./webpack.common.js ');

+

+ module.exports = Merge(common, {

+ devtool: ' Inline-source-map ',

+ Devserver: {

+ contentbase: './dist '

+   }

+ });

Webpack.prod.js:

+ Const MERGE = require(' Webpack-merge ');

+ Const Uglifyjsplugin = require(' Uglifyjs-webpack-plugin ');

+ Const COMMON = require('./webpack.common.js ');

+

+ module.exports = Merge(common, {

+ plugins: [

+ new Uglifyjsplugin()

+   ]

+ });

Prevent duplication of Commonschunkplugin

Another little known feature of Commonschunkplugin is the ability to extract webpack templates (bolierplate) and manifest in the modified build results . By using a name that is not used in the Enter configuration, the plugin automatically extracts what we need into a separate package

Extracttextplugin : Separating CSS from the main application

Bundle-loader : bundles for separating code and deferred load generation

Promise-loader : Similar to Bundle-loader : But using promises

Dynamic Import :

1 Import (calls to internal promises)

Polyfill shims support new JavaScript code and do not support new APIs

Lazy loading /loading on Demand

Cache:

When a new version is deployed, the browser will use its cached version without changing the name of the resource file, which it considers not to be updated. Change the file name by Output.filename to make sure the browser gets the modified files

Hash substitution can be used to include a build-related (build-specific) hash in the file name, but a better way is to use chunkhash substitution, which contains a file name ( chunk-specific) of the hash

Create Library

In addition to packaging the application code, Webpack is also used to package the JS library

Typesctript

Module.export = {

Entry: './src/index.ts',

Module: {

rules: [

test:/\.tsx?$/,

Use : ' Ts-loader',

exclude:/node-modules/

]

},

Resolve: {

extensions: ['. TSX', '. TS', '. js']

},

Output: {

filename : ' bundle.js',

path:p ath.resolve(__dirname , ' dist')

}

}

Progressive Network application (Progressive WEB application)

There are many things you can do, and the most important thing is that you can continue running while offline. This is achieved using a network technology called service workers.

--service Workers (service worker thread, walk different from page JS thread)

is a script that the browser runs independently of the Web page in the background. These scripts are applied to user interaction features that do not require a Web page. Now he includes push notifications and background sync capabilities, and in the future, service worker threads will support regular synchronization and geo-fencing capabilities. The core functionality discussed in this tutorial is to intercept and process network requests, including through programs to manage responses in the cache.

When the service worker thread is first implemented, the service worker thread details can be viewed through chrome://serviceworker-internals .

Finally, the server is stopped and refreshed, and you can still see the application running correctly

1 adding Workbox

Add Workbox-webpack-plugin plugin: npm install Workbox-webpack-plugin-save-dev

Webpakc.config.js inside add

Const Workboxplugin = require(' Workbox-webpack-plugin ');

and add new Workboxplugin to the plugin plugin (

clientsclaim : True,

skipwaiting : True /c2>

)

Migration of Webpack *

Managing dependent es6modules commonjs amd

Public path:

Publicpath

Webpack Theory full version