Webpack3/4 (www.kancloud.cn/hfpp2012/we)…

Study the order

  • Introduction on
  • Do the installation
  • Write a hello world

shell

1)mkdir helloWorld 2) CD helloWorld 3) NPM init -y 4) NPM I webpack -d 5)mkdir SRC 6)mkdir dist 7)touch SRC /app.js command line parameter 9) Webpack SRC /app.js dist/app.bundle.js --watch 10)webpack SRC /app.js Dist /app.bundle.js -p (production environment) configuration file 11)touch webpack.config.js 12) Webpack can be used without any parameters because the default is to find the configuration file in the current directory 13) Instead of using webpack alone, write it in package.json and run it with NPM runCopy the code

Practical application (plug-in mode)

NPM install --save-dev html-webpack-plugin 2) CSS sass loader and JS and CSS separate plug-in installation problems, to learn to search to solve their own! Install a plugin to parse the React syntax for CSS dev Server. Install a plugin to parse the React syntax for CSS dev Server 1. CDN will cache files. With hash values, old files will not be cached and new files will not take effect in time. . Webpack4 is not recommended to be installed globally. There is only one webpack4 installation globally and each project is differentCopy the code

Set up the React development environment

mkdir react-in-action cd npm init -y npm i webpack webpack-cli -D npm i @babel/core babel/loader @babel/preset-env @babel/preset-react -D npm i react react-dom touch .babelrc vim { "presets": ["@babel/preset-env","@babel/preset-react"] } touch webpack.config.js vim module.exports = { module: { rules: [ { test: /\.js/, exclude: /node_modules/ use: { loader: "babel/loader" } } ] } } mkdir src #cd src #touch index.js cd .. Mkdir components CD Components touch xx.js vim react code ok! It can be a class component or a function component. After writing, you need to export default to import CD.. / PWD SRC touch index.js vim index.js write react code, or dVA initialization route etc. . Webpack packs the default file, imports something else, and goes on to find something else! Render root nodes or something! Dev webpack --mode development NPM run dev By default, this will generate a main.js file in the dist directory, but we also need HTML. NPM I html-webpack-plugin -d generates this file in memory for us. Js const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = {module: { rules: [ { test: /\.js/, exclude: /node_modules/ use: { loader: "babel/loader" } } ], plugins: [ new HtmlWebpackPlugin({ template: "src/index.html", filename: })]}} touch SRC /index.html vim HTML NPM I webpack-dev-server -d vim package.json "start" : "NPX webpack-dev-server --open --mode development" // NPM run start can also be configured in the webpack.config.js configuration fileCopy the code