This is the 10th day of my participation in the Gwen Challenge.More article challenges

Come on, come on, get day9

1.Function:

  • Packaging: Multiple Javascript files can be packaged into a single file, reducing server stress and download bandwidth.

  • Conversion: Convert the extended language into plain JavaScript to make the browser run smoothly.

  • Optimization: As the front-end becomes more and more complex, performance issues will arise, and WebPack will begin to take responsibility for optimizing and improving performance.

2.Configuration file webpack.config.js

Webpack.config. js is the webpack configuration file, which needs to be created manually in the project root directory. After establishing it, we configure it, configure the template.

webpack.config.js
module.exports={
    // Enter the configuration item of the file
    entry: {},// Export the configuration item of the file
    output: {},// Modules: such as interpreting CSS, how images are converted, compression
    module: {},// plugins are used to produce templates and functions
    plugins: [].// Configure the WebPack development service functionality
    devServer:{}
}
Copy the code

  • Entry: Configures the address of the entry file. It can be a single entry or multiple entries.

  • Output: indicates the address of the configuration egress file. Webpack 2.X supports multi-egress configuration.

  • Module: configuration module, mainly for CSS parsing and image conversion compression functions.

  • Plugins: make plugins that have different functions to fit your needs.

  • DevServer: Configure the development service functionality.

3. install

First add the package we’ll be using:

npm install webpack webpack-dev-server --save-dev

Webpack is the module packer we need, webpack-dev-server to create a local server, listen for your code changes, and automatically refresh the results of the changes.

These are the configuration for devServer

  • ContentBase, // Provides a local server for files

  • Port, // Listening port, default 8080

  • Inline, // set to true to automatically refresh the page when the source file changes

  • HistoryApiFallback // Relies on the HTML5 history API, if set to true, all page jumps to index.html

  • DevServer :{contentBase: ‘./ SRC ‘// historyApiFallback: true, // No jump inline: true // refresh in real time}

We then create a ‘webpack.config.js’ in the root directory and add two commands in ‘package.json’ for local development and production distribution

"scripts": {
            "start": "webpack-dev-server"."build": "webpack"
        }

Copy the code

When using the webpack command, it will accept the webpack configuration file unless we use something else

4. entry

Entry: Used to write the entry file, which will be the root of the entire dependency

var baseConfig = { entry: './src/index.js' }

When we need multiple entry files, we can write entry as an object

var baseConfig = {
        entry: {
            main: './src/index.js'}}Copy the code

The latter method is recommended because it becomes cumbersome as your project grows