Get started with Webpack

This is the 23rd day of my participation in the August More Text Challenge.More challenges in August

1. Install webpack

npm install -g webpack
npm install -g webpack-cli
- Webpack4 only available tools
- Use libraries on the command line that depend on this command line tool
- -g global installation, which is not recommended because the global installation version is fixed.
Webpack can build a front-end project, also can compile files, packaging, such as CommJS, AMD, ES6, CSS, Image, JSON. The js file is compiled and packaged for use by the browser.
The default entry entry for Webpack is SRC, and after finding SRC, the default entry is index.js.
When you type webpack on the command line, you’ll find SRC /index.js in the current directory and pack it into the dist/main.js file in the current directory.
Webpack provides the Mode attribute for varying degrees of processing and optimization of files.
- mode: ‘none’ | ‘development’ | ‘production’
- You can set the packaged mode using webpack –mode=development from the command line.
- It can also be configured in webpack.config.js.
- This can be configured in package.json using scripts.
To solve the problem of version locking caused by global Webpack
- We can find it. / node_modules/webpack/bin/webpack js execute the file
- You can find the latest temporary version of Webpack to execute. The execution is written in this version.
- NPX webpack ===./node_modules/webpack/bin(executable)/webpack.js

Configure multiple entry files

const path = require('path')
module.exports = {
  // Set the mode
  mode: 'development'.// Common configuration entry
  // entry: './src/index.js',
  // Configure multi-entry files
  entry: {
    app: './src/index.js'.hello: './src/hello.js'
  },
  // Configure the exit
  output: {
    filename: '[name].bundle.js'.path: path.resolve(__dirname, 'dist')}}// The packaged file is also multi-export.
Copy the code

babel

Babel is a library for converting ES5 syntax (syntax conversion)
But for Babel to be integrated with Webpack, one of webPack’s loader babel-loader is required

Babel – loader’s official website

npm install -D babel-loader @babel/core @babel/preset-env
Copy the code

Install the plug-in corresponding to bael

https://www.babeljs.cn/docs/plugins
Configuration in webpack.config.js

  module: {
    rules: [{test: /\.m? js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader'.options: {
              // Install the corresponding plug-in and configure it in Option.
            plugins: [
              '@babel/plugin-transform-arrow-functions'.// Arrow function
              '@babel/plugin-transform-classes'./ / class syntax
              ['@babel/plugin-proposal-decorators', { legacy: true }] // Decorator syntax - only supported by Babel 7.0}}}]}// if it is in. Babelrc, put the corresponding values of options in. Babelrc.
Copy the code

It doesn’t make sense to install a different plug-in every time you have to solve a new problem.
- Babel provides us with a default solution.
?? Debug the webpack-babel configuration file
```
options: {
    presets: [['@babel/preset-env', {"debug": true}}]]// @babel/preset-env The preset Babel plugin does not contain a decorator plugin.
Copy the code
```
Devtool property values can be used to enhance the debugging process. Different values affect the speed of builds and rebuilds.
- https://www.webpackjs.com/configuration/devtool/
- Set to false for a better debugging experience.
RegeneratorRuntime is not defined
- This error is usually caused by browsers not being compatible with higher versions of the syntax.
- Babel can convert some ES6 syntax, but some apis can’t. Promise, regenertator
  - Why is that? Babel transforms ES6 into ES5, but some ES5 methods are not supported by the browser itself.
- Polyfill works by mounting some unusable API onto the window. Then implement the API again. Assign a value to a window mounted property.
- @babel/ Ployfill is needed in a production environment. Because ployFill needs to be used in the runtime environment.
- Solution: NPM i@babel/Polyfil
  - ```
  entry: {
      app: ['@babel/polyfill'.'whatwg-fetch'.'./src/index.js'].hello: './src/hello.js'
    }
  Copy the code
```
- Problem: The packaged code is 420KB
- Solution 2: NPM i@babel/Polyfil
```
// Add @babel/polyfill on top of the required js file or on top of the topmost js
import '@babel/polyfill'
Copy the code
```
  - Problem: Packaged size 405KB
- Solution 3: NPM i@babel/Polyfil
  - ```
  options: {
     presets: [['@babel/preset-env', { debug: true.useBuiltIns: 'usage'}}]],debugInfo: Added following core-js polyfills:
               es6.object.to-string {}
               es6.promise {}
  Copy the code
```
@babel/profile provides this functionality, but can cause problems with global variable contamination and prototype contamination (such as adding methods to array prototypes).

To solve the above methods:
- Using @babel/ Runtime to solve the above problem, @babe/ Runtime uses a sandbox mechanism.
- Asycn await Generator is classified as requiring ReGenerator Runtime conversion.
- The others fall into a category that requires core-JS to convert.
  
  Note that this is the syntax that Babel cannot convert
Use the following method instead of @babel/profile to reduce volume and prevent variable contamination. Prevent double references.
@babel/ Runtime does not need @babe/polyfill. The same is true for @babel/ Runtime.
- The @babel/plugin-transform-Runtime plugin will introduce @babel/Runtime into every module, preventing variable duplication. Another goal is to create a sandbox environment for your code
- www.babeljs.cn/docs/babel-…
- Use posture:
  1. npm install –save-dev @babel/plugin-transform-runtime
  2. npm install –save @babel/runtime
  3. { “plugins”: [“@babel/plugin-transform-runtime”] }
  4. ```
  {
    "plugins": [["@babel/plugin-transform-runtime",
        {
          "absoluteRuntime": false."corejs": 2.// If you need to parse Array, Object, etc
          "helpers": true."regenerator": true."useESModules": false."version": "7.0.0 - beta. 0"}}]]Copy the code
```
5. NPM i@babel/runtimecorejs2 // required by production environment

Loader converts code and files

Plugin extension function

filename: ‘[name]-[hash].bundle.js’,

filename: ‘[name].bundle.js’,

The browser caches js files. After the hash is added, each JS changes, the name changes, and the browser rerequests the latest JS file.
React Scaffolding
- Babel writes a few preset @babel/preset-react for the React environment
- 1. Install NPM install — save-dev@babel /preset-react
  2. { “presets”: [“@babel/preset-react”] }

HTML – webpack – the plugin:

Feature: Add an index. HTML file to the dist folder by default and automatically reference all the entry JS files packaged

Github.com/jantimon/ht…

 // Plugins at the same level as entry and output are webpack plugins.
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Hey hey hey'.filename: 'index.html'.template: 'src/public/index.html'.hash: true})]Copy the code

style-loader

module: {
	rules: [{// Loader processing mode
        },
        {
            // Loader processing mode}}]plugins: [{// How the plugin handles it
    },
    {
        // How the plugin handles it}]Copy the code

Css-loader parses the. CSS file

Style-loader puts the data of the. CSS file into the style tag. And into the incoming file.

Style-loader is a style-loader that inserts CSS data into the head element as js tags wrapped in style.

Automatically injects styles into the DOM using multiple <style></style> . It is default behaviour.

Cross-env sets the current node environment.

"prod": "cross-env NODE_ENV=development webpack"
Copy the code

The devTools value determines how fast to build and how fast to package and how fast to rebuild.

Create-react-app enables xxx-source-map in the production environment by default

If speed of packaging is required, eval is used for development environments and None is used for production environments.

Use source-map if you need to debug the source code during development

Package optimization:

// The same level as plugis
optimization: {
    minimize: true.minimizer: [new TerserPlugin({
      cache: true.parallel: true}})],Copy the code

1. Install webpack

Related Posts

Canvas Case — Clock and scratch card

Introduce the FS file system module provided by Node.js

CSS Layout (3)