• Guest
HabraHabr
  • Main
  • Users

  • Development
    • Programming
    • Information Security
    • Website development
    • JavaScript
    • Game development
    • Open source
    • Developed for Android
    • Machine learning
    • Abnormal programming
    • Java
    • Python
    • Development of mobile applications
    • Analysis and design of systems
    • .NET
    • Mathematics
    • Algorithms
    • C#
    • System Programming
    • C++
    • C
    • Go
    • PHP
    • Reverse engineering
    • Assembler
    • Development under Linux
    • Big Data
    • Rust
    • Cryptography
    • Entertaining problems
    • Testing of IT systems
    • Testing Web Services
    • HTML
    • Programming microcontrollers
    • API
    • High performance
    • Developed for iOS
    • CSS
    • Industrial Programming
    • Development under Windows
    • Image processing
    • Compilers
    • FPGA
    • Professional literature
    • OpenStreetMap
    • Google Chrome
    • Data Mining
    • PostgreSQL
    • Development of robotics
    • Visualization of data
    • Angular
    • ReactJS
    • Search technologies
    • Debugging
    • Test mobile applications
    • Browsers
    • Designing and refactoring
    • IT Standards
    • Solidity
    • Node.JS
    • Git
    • LaTeX
    • SQL
    • Haskell
    • Unreal Engine
    • Unity3D
    • Development for the Internet of things
    • Functional Programming
    • Amazon Web Services
    • Google Cloud Platform
    • Development under AR and VR
    • Assembly systems
    • Version control systems
    • Kotlin
    • R
    • CAD/CAM
    • Customer Optimization
    • Development of communication systems
    • Microsoft Azure
    • Perfect code
    • Atlassian
    • Visual Studio
    • NoSQL
    • Yii
    • Mono и Moonlight
    • Parallel Programming
    • Asterisk
    • Yandex API
    • WordPress
    • Sports programming
    • Lua
    • Microsoft SQL Server
    • Payment systems
    • TypeScript
    • Scala
    • Google API
    • Development of data transmission systems
    • XML
    • Regular expressions
    • Development under Tizen
    • Swift
    • MySQL
    • Geoinformation services
    • Global Positioning Systems
    • Qt
    • Dart
    • Django
    • Development for Office 365
    • Erlang/OTP
    • GPGPU
    • Eclipse
    • Maps API
    • Testing games
    • Browser Extensions
    • 1C-Bitrix
    • Development under e-commerce
    • Xamarin
    • Xcode
    • Development under Windows Phone
    • Semantics
    • CMS
    • VueJS
    • GitHub
    • Open data
    • Sphinx
    • Ruby on Rails
    • Ruby
    • Symfony
    • Drupal
    • Messaging Systems
    • CTF
    • SaaS / S+S
    • SharePoint
    • jQuery
    • Puppet
    • Firefox
    • Elm
    • MODX
    • Billing systems
    • Graphical shells
    • Kodobred
    • MongoDB
    • SCADA
    • Hadoop
    • Gradle
    • Clojure
    • F#
    • CoffeeScript
    • Matlab
    • Phalcon
    • Development under Sailfish OS
    • Magento
    • Elixir/Phoenix
    • Microsoft Edge
    • Layout of letters
    • Development for OS X
    • Forth
    • Smalltalk
    • Julia
    • Laravel
    • WebGL
    • Meteor.JS
    • Firebird/Interbase
    • SQLite
    • D
    • Mesh-networks
    • I2P
    • Derby.js
    • Emacs
    • Development under Bada
    • Mercurial
    • UML Design
    • Objective C
    • Fortran
    • Cocoa
    • Cobol
    • Apache Flex
    • Action Script
    • Joomla
    • IIS
    • Twitter API
    • Vkontakte API
    • Facebook API
    • Microsoft Access
    • PDF
    • Prolog
    • GTK+
    • LabVIEW
    • Brainfuck
    • Cubrid
    • Canvas
    • Doctrine ORM
    • Google App Engine
    • Twisted
    • XSLT
    • TDD
    • Small Basic
    • Kohana
    • Development for Java ME
    • LiveStreet
    • MooTools
    • Adobe Flash
    • GreaseMonkey
    • INFOLUST
    • Groovy & Grails
    • Lisp
    • Delphi
    • Zend Framework
    • ExtJS / Sencha Library
    • Internet Explorer
    • CodeIgniter
    • Silverlight
    • Google Web Toolkit
    • CakePHP
    • Safari
    • Opera
    • Microformats
    • Ajax
    • VIM
  • Administration
    • System administration
    • IT Infrastructure
    • *nix
    • Network technologies
    • DevOps
    • Server Administration
    • Cloud computing
    • Configuring Linux
    • Wireless technologies
    • Virtualization
    • Hosting
    • Data storage
    • Decentralized networks
    • Database Administration
    • Data Warehousing
    • Communication standards
    • PowerShell
    • Backup
    • Cisco
    • Nginx
    • Antivirus protection
    • DNS
    • Server Optimization
    • Data recovery
    • Apache
    • Spam and antispam
    • Data Compression
    • SAN
    • IPv6
    • Fidonet
    • IPTV
    • Shells
    • Administering domain names
  • Design
    • Interfaces
    • Web design
    • Working with sound
    • Usability
    • Graphic design
    • Design Games
    • Mobile App Design
    • Working with 3D-graphics
    • Typography
    • Working with video
    • Work with vector graphics
    • Accessibility
    • Prototyping
    • CGI (graphics)
    • Computer Animation
    • Working with icons
  • Control
    • Careers in the IT industry
    • Project management
    • Development Management
    • Personnel Management
    • Product Management
    • Start-up development
    • Managing the community
    • Service Desk
    • GTD
    • IT Terminology
    • Agile
    • Business Models
    • Legislation and IT-business
    • Sales management
    • CRM-systems
    • Product localization
    • ECM / EDS
    • Freelance
    • Venture investments
    • ERP-systems
    • Help Desk Software
    • Media management
    • Patenting
    • E-commerce management
    • Creative Commons
  • Marketing
    • Conferences
    • Promotion of games
    • Internet Marketing
    • Search Engine Optimization
    • Web Analytics
    • Monetize Web services
    • Content marketing
    • Monetization of IT systems
    • Monetize mobile apps
    • Mobile App Analytics
    • Growth Hacking
    • Branding
    • Monetize Games
    • Display ads
    • Contextual advertising
    • Increase Conversion Rate
  • Sundry
    • Reading room
    • Educational process in IT
    • Research and forecasts in IT
    • Finance in IT
    • Hakatonas
    • IT emigration
    • Education abroad
    • Lumber room
    • I'm on my way

Webpack 4 and the separation of the configuration file into modules

Hi Habr! Today I will tell you about Webpack 4 with the division of code into separate modules, as well as interesting solutions that will help you to quickly assemble the assembly on the webpack 4. In the end, I will provide my basic assembly on the webpack with the most necessary tools that you can later to expand. This assembly will help you understand this material, and also possibly help you write your implementation faster and solve possible problems faster.
 
 
The main ideology of this assembly is the correct separation of code inside the configuration file for ease of use, reading and cleanliness of webpack.config.js. The required modules and plugins for the dev and prod versions (as well as for sharing functionality in the main file) will be located in a separate webpack folder and imported from it to connect to the main config.
 
 
3r314. Why do you need such an approach?
 
With the gradual increase in the number of modules, plug-ins, etc., that your build on the web pack grows over, the configuration file grows like yeast. Over time, this file becomes difficult to read, and to change it for a specific project, if some modules in it are not used, it becomes more difficult, but you want something universal. Therefore, a clear code organization is required.
 
 

What do we need?


 
We will use the plugin webpack-merge .
 
Create a webpack folder and put all the individual modules into separate files. For example, webpack /pug.js, webpack /scss.js and export these functions from them.
 
 
File pug.js
 
3r3191. 3r3192. module.exports = function () {
return {
module: {
rules:[
{
test: /.pug$/,
loader: 'pug-loader',
options: {
pretty: true,
},
},
],
},
};
};
3r3198. 3r-33199.
 
The webpack.config.js file is . In this file we connect them, and with the help of this plugin we connect them quickly and easily.
 
3r3191. 3r3192. const merge = require ('webpack-merge');
const pug = require ('./webpack /pug');
const common = merge ([
{
entry: {
'index': PATHS.source + '/pages/index/index.js',
'blog': PATHS.source + '/pages/blog/blog.js',
},
output: {
path: PATHS.build,
filename: './js/[name].js',
},
plugins:[…],
optimization: {},
3r-3218.},
pug (),
))
3r3198. 3r-33199.
 
Now, if we have a new task, which requires a new module, a plug-in, a loader, then we take it to the hotel module (file) and put it in the webpack folder, and then connect it to the main configuration file, keeping the config as clean as possible.
 
 

Settings for production and development


 
Now, with the help of the banal if, we’ll finish our division, which we aspire to, and set up our webpack for these two types of development, thanks to which it will become completely convenient to use this tool, as well as in the future we will be able to flexibly and simply customize it for any other project, or expand in the current. To export to the node (for the webpack itself) in webpack 4 we use the following construction:
 
3r3191. 3r3192. module.exports = function (env, argv) {
if (argv.mode === 'production') {
return merge ([
common,
extractCSS(),
favicon(),
]);
}
if (argv.mode === 'development') {
return merge ([
common,
devserver(),
sass(),
css(),
sourceMap(),
]);
}
3r3198. 3r-33199.
 
In the common object, we connect what is used both in the prode and in the development, and in the conditions we connect only those modules that are necessary in these cases.
 
 

Now I would like to talk about the main features of webpack 4 regarding webpack 3


 
 
3r3188. For a quick start, webpack 4 does not need webpack.config.js, it now only needs an entry point (index.js) 3r-3200.  
3r3188. In the new version of the webpack command line interface is placed in a separate package and you need to install webpack-cli.
 
3r3188. To start webpack ? it is necessary (otherwise it will be warning) in the scripts to specify mode (mode of operation) --mode production or --mode development, depending on the key, the operation of the webpack changes. Development mode aims to speed up the build. In the production version, everything is directed to the final minification of the code.
 
3r3188. In order to create common.js and common.css files, the CommonsChunkPlugin is no longer used, splitChunks are now responsible for this and the following construction is used:
 
3r3191. 3r3192. optimization: {
splitChunks: {
cacheGroups: {
'common': {
minChunks: ?
chunks: 'all',
name: 'common',
priority: 1?
enforce: true,
},
},
},
},
3r3198. 3r-33199.
 
In webpack 3 - this would be true in plugins:
 
3r3191. 3r3192. new webpack.optimize.CommonsChunkPlugin ({name: 'common',}) 3r-33199.
 
Accordingly, in the chunks in HtmlWebpackPlugin we connect (here without changes).
 
3r3191. 3r3192.
plugins:[
new HtmlWebpackPlugin({
filename: 'index.html',
chunks:['index', 'common'],
template: PATHS.source + '/pages/index/index.pug',
}),
]
3r3198. 3r-33199.
 
 
3r3188. The next important point, in order to create a sourceMap, now we use the following approach - we create the sourceMap.js file in the webpack folder and connect it in the version version (for example, as above): 3r3203.  
3r3191. 3r3192. module.exports = function () {
return {
devtool: 'eval-sourcemap',
};
};
3r3198. 3r-33199.
 
3r3202.
 
Now approach with plugins:[new webpack.optimize.UglifyJsPlugin({}) ] does not work.
 
 
With this, I would like to complete my story and provide my basic build - 3r-3211. Reference
on webpack ? which may help you in work and development. Thanks for attention!

It may be interesting

  • Comments
  • About article
  • Similar news
This publication has no comments.

weber

Author

21-10-2018, 20:26

Publication Date

Development / Programming

Category
  • Comments: 0
  • Views: 352
Comparing NPM vs Yarn speed
Another way to use Webpack 4 and code
Open webinar "Creating an application
Unit testing. Chip-tuning
How to write a single page application
Webpack 4 and code splitting
Write a comment
Name:*
E-Mail:


Comments
PERFECT size dumpster rentals for your residential needs, they are the ideal fit for your driveway. EASY simple pricing so you have everything upfront. FAST dumpster delivery. Check out: Austin Dumpster Rental
Today, 17:03

saifwordpress

This article was written by a real thinking writer. I agree many of the with the solid points made by the writer. I'll be back. official 123movies websites
Today, 17:00

Legend SEO

LIMITED EDITION Experience Virtual Reality Now! Version 2.0 Discount40% OFF See More15% OFFFASHION & ACCESSORIESApparel Fashion Price starting from $ 5.99 See More20% OFFLIVEBYCARE Combo 5x Pillows Color Discount20% OFF Shop Now Bluetooth Latest Speakers Price starting from $ 22.99 XBOX CONTROLLER WHITE COLOR Discount 10% SMART APPLE PRODUCTS 15% OFF12% LISTEN TO REAL MUSIC WITH BEATS [url = https: //topofferscart.online/] Health & Fitness [/ url]

Today, 15:57

nushra45

I’m going to read this. I’ll be sure to come back. thanks for sharing. and also This article gives the light in which we can observe the reality. this is very nice one and gives indepth information. thanks for this nice article...Adsense Safe Traffic
Today, 14:50

jacksonseo

Very useful post. This is my first time i visit here. I found so many interesting stuff in your blog especially its discussion. Really its great article. Keep it up. 123 movies
Today, 12:11

Legend SEO

Adv
Website for web developers. New scripts, best ideas, programming tips. How to write a script for you here, we have a lot of information about various programming languages. You are a webmaster or a beginner programmer, it does not matter, useful articles will help to make your favorite business faster.

Login

Registration Forgot password