webpack configuration item

introduce

A front-end resource loading / packaging tool, which will conduct static analysis according to the dependency of modules and produce corresponding static resources according to certain rules.

Basic instructions

• webpack can only understand javascript and JSON files
• Other types of files are handled by the corresponding loader

Environmental support

Node.js environment

Global command

webpack index.js -o bundle.js

LOADER object

Function: webpack itself can only handle javascript modules, so it needs the help of loader for conversion most of the time.

There are two properties: test and use

// webpack.config.js
module.exports = {
  // ...
	module: {
    rules: [
      { test: /\.css$/, use: 'css-loader'},
      { test: /\.ts$/, use: 'ts-loader'},
    ]
  }
  // ...
}

PLUGINS array

Functions: package optimization, resource management, and injection of environmental variables. (under this study)

// webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin")
module.exports = {
// ...
  plugins:[
    new HtmlWebpackPlugin({template: "./src/index.html"})
  ]
// ...
}
// The plug-in will generate an HTML file for the application and automatically inject all the generated bundle s
// Note that files will not be generated under the local service, but a file in memory will be generated only when packaging.

Configuration file (web pack.config.js)

To sum up, webpack needs to package js modules and other types of files. Configuration files came into being

module.exports = {
	entry: '', // Entry file,
  entry: {
    key: 'path', // Multi file packaging
  },
  output: {
  	path: '', // Packaging path
  	filename: '', // Specify the package name default bundle js
  	filename: '[name].js', // Automatically correspond to multiple key s in the entry 
	},
  module: {
    loaders: [
      {
        test: /\.jsx?$/, // Regular expression to match the extended name of the file processed by loaders
        use: {
          loader: 'babel-loader',
          options: {
            plugins: [require('react-refresh/babel')],
          },
        },
        exclude: /node_modules/,
      }
    ]
  },
}

*Executing webpack directly under the project directory will load the current configuration file by default

expand

• Babel

  • Let you use the latest js code, regardless of browser support;
  • It allows you to use the extended language based on js, such as JSX;

Babel is actually a number of modular packages, and the core functions are located in the package of Babel core.

npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react

Build local server

Browser monitoring code modification is actually real-time packaging.

• Building with webpack

npm i -D webpack-dev-server

// webpack.config.js
// New configuration devServer
devServer: {
  contentBase: '', // Page directory loaded by local server
  port: '', // Port,
  inline: true, // Refresh in real time
  historyApiFallback: true, // Single page application, all jumps point to index html
}

After the updated version of webpack, the previous commands are put into the npm module of webpack cli

npm i -D webpack-cli@3 // The latest version of cli lacks some module dependencies, so install @3

// package.json
"scripts": {
  "start": "webpack-dev-server --open", // Start and automatically open the page
}

npm start // Start server

• Using node express + middleware to build the server

  Webpack dev server is encapsulated, except webpack In addition to config and command line parameters, it is difficult to do customized development. Webpack dev middleware is a middleware, which can write its own back-end services and then use it to make development more flexible.

preparation

npm i -D express
npm i -D webpack-dev-middleware	// Hot compile Middleware
npm i -D webpack-hot-middleware // Hot replacement Middleware
npm i -D connect-history-api-fallback // page refresh 

• webpack-dev-middleware
  • It writes the packaged files directly into memory;
  • Each request will get the latest packaging results;
  • Starting in watch mode, if the code changes, the old bundle will be stopped and the request will be delayed until the compilation is completed.
• webpack-hot-middleware
  • Realize hot update and replacement;

// Create a new server under the project directory js
const express = require('express')
const webpack = require('webpack')
const webpackDevMiddleware = reqiure('webpack-dev-middleware')
const webpackHotMiddleware = reqiure('webpack-hot-middleware')

const webpackConfig = require('./webpack.config.js')

const app = express()
const compiler = webpack(webpackConfig)

app.use(
	webpackDevMiddleware(compiler, {
    // options
    publicPath: webpackConfig.output.publicPath,
  })
)
app.use(
	webpackMiddleware(compiler, {
		heartbeat: 5000, // Generally, it is half of the client timeout in the entry configuration in config
  })
)

app.listen(port, () => {
  console.log('Service startup')
})

// webpack.config.js
module.exports = {
	entry: [
		"webpack-hot-middleware/client?timeout=10000&reload=true&quiet=true",
		path.resolve(__dirname, "./src/index.js")
	],
	plugins: [
  	...
		new webpack.HotMoudleReplacementPlugin(),
	]
}

// package.json
"scripts": {
  "start": "node ./server.js",
}

npm start

Solution to the failure of native hot replacement

if(module.hot) {
  module.hot.accept('./test.js', () => {
    // ...
  })
}