Run command
./node_modules/.bin/webpack
In node_modules / .bin directory, the storage of a large number of cmd file, run the command file webpack
package.json (npm npm init profile generation)
scripts:{
"webpack1" : "./node_modules/.bin/webpack ",
"Webpack2": "webpack" // Second way is equivalent to the above
}
npm run webpack2 ---> npm run command, the processing path "./node_modules/.bin" + path
(Scripts used in test start restart stop naming , when calls can be omitted "run", namely direct npm Start )
npm start building a file on ./dist default directory (can be changed through the configuration file)
A more direct way npx
npx webpack help us locate command us to the next "./node_modules/.bin" directory
(Npm using the document docs.npmjs.com ---> CLI documentation) command line interface using the document
webpack及webpack.config.js
webpack command run in which directory, it will automatically load webpack.config.js files in a directory;
webpack --config specifies the path to load the configuration file,
webpack --help
loaders; .js file handles only type of default, such as pictures and other non-js css html files require different types of loader to achieve
plugins: mainly some extensions webpack itself, they will be run after the completion of the analysis of the various modules packaged compilation phase, such as a compressed file, etc.
Features: Extended Run function in the packaged compilation stage
webpack.config.js
const path = require("path");
module.exports = {// throw a configuration file
mode: "development", ---> default production
entry: { aa: "./src/aa.js", bb: "./src/bb.js" },
output: {
path: path.resolve (__dirname, "dist"), -> compatible with all operating systems
filename: [name]-filename.[hash].js ---> [ hash ] [ chunkhash ] [ name ] [ id ] [ query ]
},
devtool: "source-map", // source-map open
}
Module identifier [hash] [id] [chunkhash] chunk content hash
When performing ./node_modules/.bin/webpack command, automatically loads webpack profile.
webpack --config = configFileName
webpack --mode = development (development running mode WebPACK)
webpackDevServer:
Recompile the code package, (in memory in the compiled code, and a virtual address) to refresh the browser ---> there is no direct hard drive, faster update
webpack-dev-server provides a simple web server
npm install --save-dev webpack-dev-server
carried out:
npx webpack-dev-server -----> Start web server
Package.json added or scripts (and modify webpack.config.js -> Add devserver)
module.exports = {
devServer: {
contentBase: "./dist", // generate virtual destination path
open: true, // automatically open your browser
port: 8081, // port
proxy: {-> built a proxy server, the cross-domain requests the forwarding destination server
"/api":{
target: "http://localhost:8087"
}
}
}
}
After starting the service, webpack will no longer generate a package file to the hard real directory, but rather there is a direct memory
(While a virtual store directory path), post-update compiler package and access greatly enhanced.
proxy: the development environment, the front end of the development process code running in a server environment (webpack-dev-server),
Then the problem will appear in the cross-domain requests when dealing with some back-end often.
A built-in proxy server forwards the request to cross-domain on the target server (request webpack-dev-server built Send belonging to the back-end node, from the same origin policy restrictions)
HMR webpack built-ins, hot update -> Hot Module Replacement
Different from the live reload to refresh the entire page, the page can not be maintained operational status .. (Webpack-dev-server provides live relaod)
HMR core: partial update or module update, do not refresh the page, change the update only partially
(Webpack built-ins)
module.exports = {
devServer: {
contentBase: "/dist",
open: true,
port: 8081,
hot: true, ---> open hot update
hotOnly: true // HMR not even take effect, nor to refresh the entire page (select On)
},
plugins: [new webpack.hotModuleReplacementPlugin ()] ----> Example plugin
}
Other hot update:
css hot update, style-loader has been integrated to achieve, and we just need to use use it
Scaffolding integrated React hot update
Scaffolding integrated Vue hot update
Summary execution process:
entry ---> loaders ---> plugins ---> output
entry ---> loaders
loaders ---> plugins
plugins ---> output
Node.js API
webpack provides Node.js API, can be used directly in the Node.js runtime;
WebPACK only partially responsible for compilation; const webpack = require ( "webpack"); const compiler = webpack ({// Configure}); ----> instance to get a compiler
compiler.run(function( err , stats){
if( err || stats.hasError()){
// ...
}
})