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', () => { // ... }) }