Introduction to webpack

webpack is a static module packaging tool for modern javaScript applications.

Front end modularization

1. Some front-end modular schemes: AMD, CMD, CommonJS and ES6.
2. One of the core of webpack is to enable us to carry out modular development and help us deal with the dependencies between modules.
3. Modules are not just javaScript files. Our CSS, pictures, json files, etc. can be used as modules in webpack.

pack

Packaging is to package and combine various resource modules in webpack into one or more packages.

Comparison between webpack and grunt/gulp

1. The core of grunt/gulp is Task, so grunt/gulp is called front-end automatic Task management tool
2. If your project module dependency is very simple, or even does not use the concept of modularity, you can simply merge and compress and use grunt\gulp. However, if the whole project uses modular management and has strong interdependence, we can use a more powerful webpack.
3. grunt\gulp puts more emphasis on the automation of front-end processes, and modularity is not its core.
4. webpack puts more emphasis on modular development and management, and functions such as file compression, merging and preprocessing are attached to it.

webpack installation

1. To install webpack, first install node js,node. JS comes with a software package management tool npm
2. Global install webpack:npm i webpack -g
3. Local installation webapck: NPM I webpack -- save dev
4. Install NPM I webpack cli

preparation

Create the following files and folders:

1. dist folder: used to store packaged files.
2. src folder: used to store our source files.
3. main.js: the entry file of the project.
4. index.html: the browser opens the displayed homepage html.
5. package.json: the file generated by npm init and managed by npm package.

webpack.config.js inlet and outlet

const path = require('path')
module.exports = {
    entry: "./src/main.js",
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "main.js",
        publicPath: "dist/"
    },
  }

package. Define packaging in JSON

Package by executing the command npm run build

Use of loader

1. Installing style loader is responsible for adding styles to DOM: NPM install -- save dev style loader
Installing css loader is responsible for loading css files: NPM install -- save dev css loader

• style.css

body {
  background: green;
}

• webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

2. Install sass loader to convert sass to css: NPM install sass loader sass webpack -- save dev

• webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          // Generate JS string as style node
          "style-loader",
          // Convert CSS into CommonJS module
          "css-loader",
          // Compile Sass into CSS
          "sass-loader",
        ],
      },
    ],
  },
};

3. Install URL loader: NPM install URL loader -- save dev

• webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
            },
          },
        ],
      },
    ],
  },
};

4. Install file loader: NPM install file loader -- save dev

• webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
          },
        ],
      },
    ],
  },
};

5.webpack.config.js to configure pulicpath: 'dist /' to prefix the url with dist/

  output: {
        path: path.resolve(__dirname, "dist"),
        filename: "main.js",
        publicPath: "dist/"
    },

6. Image file processing - modify the file name webpack config. js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
              name:'img/[name].[hash:8].[ext]'
            },
          },
        ],
      },
    ],
  },
};

ES6 syntax processing

By installing Babel, switch ES6 to Es5: NPM I -- save dev Babel- loader@7 babel-core babel-preset-es2015

• webpack.config.js

 {
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['es2015']
                    }
                }
            },

Use of vue

1. Install Vue: NPM I Vue -- save

• webpack.config.js

module.exports = {
  resolve: {
        alias: {
            "vue$": "vue/dist/vue.esm.js",
        }
    }
}

• main.js

import Vue from "vue"
const app = new Vue({
    el: "#app",
    template: `
     <div>
       <h2>{{msg}}</h2>
       <h2>{{name}}</h2>
     </div>
    `,
    data: {
        msg: 'hello webpack',
        name: "webpack",
    }
})