A concept,

In essence, webpack is a static Module bundler for modern JavaScript applications. When WebPack works with an application, it recursively builds a Dependency graph containing every module the application needs, and then packages all of those modules into one or more bundles. Loaded by the browser

The focus is on understanding the four core concepts: input, output, loader, and plug-in

Second, the installation

Global installation:

NPM install webpack webpack-cli webpack-dev-server -g

Dependent installation:

npm install webpack webpack-cli webpack-dev-server –save-dev

Three, create,

Js module creation, modular development – module receive exposure

Exports = exports; exports= exports; exports= exports; exports= exports; exports= exports; || export default obj; B.J s receiving module, set the HTML needs to function the require (“. / xx. Js) | | import obj from ‘. / xx. Js’

Package output file

Webpack input file. js-o output file. js –mode development (build)

Webpack main.js -o output.js –mode production

4. Basic configuration

webpack.config.js

var path = require('path');
module.exports = {
mode: 'development', // Development mode entry:'./main.js'Path: path.resolve(__dirname,'dist'// path filename:'output.js'/ / name}};Copy the code

After the configuration, the terminal enters Webpack to run

NPM install webpack-dev-server — g

var path = require('path');
module.exports = {
//...
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 9000
}};
Copy the code

Run the webpack-dev-server –hot –line command to refresh automatically

If the default port is used, change the port to webpack-dev-server –port 3000 (change the default port to 3000) run the command change: add scripts to package.json:

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"."build": "webpack"."start": "npm run dev"."dev":"webpack-dev-server"
  },
Copy the code

Then NPM start runs

The rest of the CSS, IMG, JS, ES6, TS loader to find the webpack official website www.webpackjs.com