Hero is introduced

Born in the land of warriors in the far west, Wilbur Parker was a mechanical genius who used tools to achieve the seemingly impossible. He met a young Mozi by chance and became friends with him while traveling to the king’s land. After assisting the grand Master Mozi to build the first city in the mainland, which was called the greatest miracle after the end of ancient civilization – Chang ‘an! With the ark as the driving center, Chang ‘an guards the magnificent Daming Palace with various organs. Parker is low-key and does not like to appear in the public eye. He is an idealist who needs human enlightenment and believes that only glorious evolution can realize the full potential of human beings.

Name: Webpack

Heat rank: T0

98% odds:

Attendance rate: 80% (90% for medium and large projects)

Ban rate: 10%

★★★★★

Skills:

Passive :(self-growth motifs)

CD: 0 seconds

Peck will start with his own loader, which will give him attributes that can be upgraded to advanced items in the store to enhance his skills.

Siphon energy (Entry)

Peck specifies the initial equipment to begin the preparation of evolution, and gains a 20% toughness bonus during that period. After upgrading, you can specify multiple equipment to evolve.

(Entry is used to specify entry files. One or more can be configured.)

Basic use:

module.exports = {
  entry: './path/to/my/entry/file.js'// A path string can be configured by default};Copy the code

Advanced use:

  • String: the default common path string./src.
const config = {
  entry: './src/a.js'
};
Copy the code
  • Arrays: Passing an array of paths creates multiple main entries, which is applicable when importing multiple dependent files into a chunk.
const config = {
  entry: ['./src/a.js'.'./src/b.js'.'./src/c.js']};Copy the code
  • Object: Pass in an object specifying the key (entry name) and value (path) of different entries. String notation is shorthand for object notation. Suitable for multi-page applications
const config = {
  entry: {
    app: './src/app.js',
    vendors: './src/vendors.js'}};Copy the code

Specter :(output export)

CD: 10 seconds

Pike teleported to the location after n seconds of chanting, depending on the complexity of the current work the pike was doing.

Output is used to configure the output and naming of the packaged file. The minimum standard for configuring output is to set an object containing the following two points

  1. Filename Specifies the name of the output file
  2. Path Absolute path of the output directory

Basic use:

const path = require('path');

module.exports = {
  entry: './src/js/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'test.bundle.js'}};Copy the code

Advanced use:

When a multi-entry file is configured and you want to export different chunks, you should use a placeholder for filename to ensure that the filename is unique.

Placeholder:

  • Name – Use the entry name

  • Id — Use the internal chunk ID

  • Hash – Use a unique hash during each build

  • Chunkhash – Uses hash based on the content of each chunk

  • Query — Use file names? The following string

{
  entry: {
    app: './src/app.js',
    search: './src/search.js'
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/dist'}}Copy the code

Star suction method (Loader)

CD: 8 seconds

Pike can assimilate the abilities of other heroes and convert them into usable energy. Successful draw base stats +200%.

Webpack itself can only handle JS files. Loader can convert other file types to modules that WebPack can handle, package them, or do other operations. It works with the modules module and is implemented by configuring module.rules. Loader is equivalent to task in other tools.

The core of the loader has two attributes:

  • Test: matches the file to be converted by loader
  • Use: specifies which loader is used for conversion

Basic configuration:

const path = require('path');

const config = {
  output: {
    filename: 'test.bundle.js'
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader'}}}; module.exports = config;Copy the code

Advanced configuration:

Rules allows you to configure multiple Loaders while processing a file by passing use an array containing different Loader objects

module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader',
            options: {
              modules: true}}]}Copy the code

Operations: can be used in import statements! Separating the loaders in the resource allows you to use an inline mode for loader processing without configuring Webpack, but this is not recommended because it is difficult to maintain.

import Styles from 'style-loader! css-loader? modules! ./styles.css';
Copy the code

Glorious Evolution (Plugins)

CD: 35 seconds

Parker evolution loader, using plugin to increase and strengthen your hero within 5000 yards, and enter the hegemony state for 10 seconds.

Unlike loader, which resolves non-JS file types, plugin can be used to handle more complex tasks, including packaging, optimization, compression, and even redefining environment variables. It is very powerful and can be written yourself in addition to the mature plug-ins provided by the plug-in market. Plugins bring more features to Loaders, and they exist to solve other things that Loaders can’t.

To use a plugin, simply require () it and add it to the plugin module. Most plugins are customizable, so if you want to use a plugin with a different configuration function in a configuration file, you must create a new instance via new.

Basic configuration:

const HtmlWebpackPlugin = require('html-webpack-plugin'); // Install const webpack = require('webpack'); // To access built-in plugins const config = {module: {rules: [{test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'}})]; module.exports = config;Copy the code

Jekyll and Hyde (Mode)

CD: 1.5 seconds

Parker switched, Workaholic mode: movement speed increased by 50%, Artist Mode: Slowed by 30% and resilience increased by 50%, immune control.

(Mode configures development and Production environments to enable built-in optimizations for WebPack in the corresponding mode.)

Development: Enable NamedChunksPlugin and NamedModulesPlugin plugins

Production: Enable FlagDependencyUsagePlugin FlagIncludedChunksPlugin, ModuleConcatenationPlugin NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin and UglifyJsPlugin plugin.

Configuration:

module.exports = {
  mode: 'production'/ / or development};Copy the code

Brilliant Intellect (Reslove module analysis)

CD: 60 seconds

Parker places a position to enter fast pathfinding mode and automatically analyzes the nearest route, ignoring terrain obstacles.

(Resolve is configured to resolve the file path, and reslove can be configured to use proprietary plug-ins.)

Currently, you can resolve three file paths: absolute path, relative path, and module path

Configuring the alias alias (most commonly used)

Creating an alias for import or require makes importing modules easy. Ex. :

alias: {
  Utilities: path.resolve(__dirname, 'src/utilities/'),
  Templates: path.resolve(__dirname, 'src/templates/')}Copy the code

Alias is not configured:

import Utility from '.. /.. /utilities/utility';
Copy the code

Alias configured:

import Utility from 'Utilities/utility';
Copy the code

The Treasure Box (Module)

Parker has space objects that can store anything, and can store equipment in categories. When activated, the equipment bar is increased by 3 and its movement speed is reduced by 20%

(Handle the different types of modules in a project by configuring modules.) Rules Array of matching rules (most commonly used) The array of rules that matches a request when a module is created. Rules allow you to modify how modules are created. These rules can apply a Loader to a module or modify a parser.

const config = {
  module: {
    rules: [
      { test: /\.css$/, use: 'css-loader'}}};Copy the code

Recommend a pack

File processing

  • raw-loaderLoad the original contents of the file (UTF-8)
  • val-loaderExecute code as a module and export to JS code
  • url-loaderWorks like a File loader, but returns a Data URL if the file is smaller than the limit
  • file-loaderSend the file to the output folder and return the (relative) URL

JSON

  • json-loaderLoading JSON file (included by default)
  • json5-loaderLoad and translate JSON 5 files
  • cson-loaderLoad and translate CSON files

Transpiling

  • script-loaderExecute a JavaScript file once in a global context (such as in a script tag) without parsing
  • babel-loaderLoad the ES2015+ code and use Babel to translate to ES5
  • buble-loaderLoad ES2015+ code using Buble and translate the code to ES5
  • traceur-loaderLoad the ES2015+ code, then use Traceur to translate to ES5
  • ts-loaderOr awes-typescript-loader loads typescript 2.0+ like JavaScript
  • coffee-loaderLoad CoffeeScript like JavaScript

Template (Templating)

  • html-loaderExport HTML as a string that references a static resource
  • pug-loaderLoad the Pug template and return a function
  • jade-loaderLoad the Jade template and return a function
  • markdown-loaderTranslate Markdown to HTML
  • react-markdown-loaderCompile markDown into the React component using markdown-parse parser
  • posthtml-loaderLoad and convert HTML files using PostHTML
  • handlebars-loaderMove Handlebars to HTML
  • markup-inline-loaderConvert the inline SVG/MathML file to HTML. Useful when applying icon fonts, or CSS animations to SVG.

style

  • style-loaderAdd the module’s export to the DOM as a style
  • css-loaderAfter parsing the CSS file, load it using import and return the CSS code
  • less-loaderLoad and translate LESS files
  • sass-loaderLoad and translate SASS/SCSS files
  • postcss-loaderLoad and translate CSS/SSS files using PostCSS
  • stylus-loaderLoad and translate the Stylus file

Linting && Testing

  • mocha-loaderUsing Mocha Tests (browser /NodeJS)
  • eslint-loaderPreLoader, uses ESLint to clean up code
  • jshint-loaderPreLoader, using JSHint to clean up code
  • jscs-loaderPreLoader, which uses JSCS to check code styles
  • coverjs-loaderPreLoader, using CoverJS to determine test coverage

Framework (Frameworks)

  • vue-loaderLoad and translate Vue components
  • polymer-loaderWeb components that are processed using selected preprocessors and require() are similar to first-class modules
  • angular2-template-loaderLoad and translate Angular components

Common plug-in

  • ProgressPlugin(Webpack) : Used to collect statistics about the packaging progress
  • IgnorePlugin(Webpack comes with it) : Ignore some local modules
  • DllPlugin(WebPack) : Prepack files
  • DllReferencePlugin(Built-in with WebPack) : Project packaging refers to pre-packaged generated files
  • AssetsWebpackPlugin: Generates path reference guidelines for package generated JS, etc
  • HappyPack: Use multi-core accelerated packaging
  • ExtractTextPlugin: Separate the CSS from the package
  • EnvironmentPlugin(WebPack) : Defines global variables that can be used in a project at the WebPack level
  • DefinePlugin(WebPack comes with it) : The global variables that can be used in a project defined at the WebPack level are in a different form than EnvironmentPlugin
  • CleanWebpackPlugin: Clears files in a specified directory
  • CopyWebpackPlugin: Assigns the files in the specified directory to the specified directory
  • HtmlWebpackPlugin: Webpack automatically generates HTML pages after packaging
  • ParallelUglifyPlugiN: Accelerate compression

This period hero introduction finished, I wish you all an early national service king, we see you next time.