This is the 20th day of my participation in the August Text Challenge.More challenges in August

Basic use of Webpack

  • Vscode creates a new folder

  • Enter NPM init on the command line

  • Clinpm I webpack webpack-cli -d

    • -d means that development dependencies are installed and will not be packaged when it goes live

  • In this folder, create a new entry file ‘SRC /index.js’

  • Packaging: command line input; NPX webapck, which generates dist main.js by default, in production (0 configuration package)

If you want to do manual configuration, create a new webapck.config.js file in the root directory and write the configuration code in the file.

Package using the specified configuration file

Can the webpack.config.js file be renamed? Or is it packaged using the specified configuration file?

The answer is yes, just change the packaging command.

Node_moudle runs webpack by default. Webpack calls webapck-cli. Webpack-cli has a parse object that gives two choices of default configuration file names: ‘webpack. Config. Js’ and’ webpackfile. Js’.

Yes, if you enter the command NPX webapck –config webapck.config.my.js, that is, NPX webapck –config to specify the configuration file name, the specified configuration file will be used for packaging.

Configure packaging commands in package.json:

"Scripts ": {"build": "webapck --config specifies the name of the configuration file"}Copy the code

It will automatically go to node_moudles to find webpack and type NPM run build on console when packing again.

The local service

Installing dependency packages

npm i webpack-dev-server -D

Modifying a Configuration File

DevServer: {// project build path contentBase: resolve(__dirname, 'build'), port: 3000, // './build' // start service address open: true // automatically open browser compress: true // start gzip compression}Copy the code

Run command: NPX webpack-dev-server

packaging HTML resources

  1. Create a file

  2. Download and install plugin package

    npm install –save-dev html-webpack-plugin

  3. Modifying a Configuration File

let HtmlWebpackPlugin = require('html-webpack-plugin') plugins: HtmlWebpackPlugin({// generate the index.html file when using the template package, and pack the template file in memory when running dev: './index.html', // template file filename: 'index.html', // generate file hash: true, // Add hash value to solve cache problem minify: CollapseWhitespace: true // Collapse an empty line into a line}})]Copy the code
const { resolve } = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/index.js', output: { filename: 'built.js', path: Resolve (__dirname, 'build')}, module: {rules: [// loader configuration]}, plugins: [// plugins // html-webpack-plugin // functions: create an empty HTML by default, automatically import all the resources (JS/CSS) packaged output // requirements: New HtmlWebpackPlugin({// copy the './ SRC /index.html' file and automatically import all the resources (JS/CSS) that package the output: './src/index.html' }) ], mode: 'development' };Copy the code

4. Run the command: NPX webpack