No webpack.config.js configuration package

1. Quickly build package.json files.

npm init -y
Copy the code

2. Install WebPack4 and its cli interface

NPM I webpack webpack-cli --save-dev (webpack4 must install webpack-cli)Copy the code

3,
package.json
Add the build parameter to the file 

"scripts": {
  "build": "webpack"
}Copy the code

Create./ SRC /index.js

Increase the content of

console.log('This is the entry file');Copy the code

5. Run the NPM run build command

./dist/main.js



webpack
./src/index.js

Production and development modes

1. Modify the scripts field of package.json file

"scripts": {
  "dev": "webpack --mode development"."prod": "webpack --mode production"
}Copy the code


2. Run NPM run dev or NPM run prod respectively

  1. You will see./dist/main.jsDifferent variations.



    productionIn this mode, minification of packaged files, Tree Shaking, scope lifting, and so on are implemented by default.

    Anyway, make the packaging file smaller.



    developmentIn this mode, the package file is not compressed and the package speed is faster.

If no schema is specified, the default is Production mode.

ES6 and React

1. Install the dependency packages



npm i babel-core babel-loader babel-preset-env babel-preset-react --save-dev


npm install --save react react-domCopy the code


2. Create the. Babelrc file and perform related configurations

{
  "presets": ["env"."react"]}Copy the code


3. Create the webpack.config.js file and perform related configurations

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"}}]}};Copy the code


Add./ SRC /app.js and modify./ SRC /index.js

./ SRC /app.js:

import React from "react";
import ReactDOM from "react-dom";
const App = () => {
  return (
    <div>
      <p>Hello webpack4</p>
    </div>
  );
};
export default App;
ReactDOM.render(<App />, document.getElementById("app"));Copy the code

./ SRC /index.js:

import App from "./App";Copy the code


5. Run the NPM run prod command

HTML is packaged using the HTML-webpack-plugin plugin

Create a./ SRC /index.html file with the following contents:

<! DOCTYPE html> <html lang="en">
<head>
    <meta charset="utf-8">
    <title>QWK</title>
</head>
<body>
    <div id="app">
    </div>
</body>
</html>Copy the code

Installing dependency packages

npm i html-webpack-plugin html-loader --save-devCopy the code

Modify the webpack.config.js configuration

const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"}}, {test: /\.html$/,
        use: [
          {
            loader: "html-loader",
            options: { minimize: true }
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./src/index.html",
      filename: "./index.html"}})];Copy the code

The terminal runs the NPM run prod command. You’ll see that the project has an additional./dist/index.html file


Use the webpack-dev-server plug-in

Install dependency package NPM I webpack-dev-server –save-dev

Modify the package.json file

"scripts": {
  "start": "webpack-dev-server --mode development --open"."prod": "webpack --mode production"
}Copy the code

Modified the webpack.config.js file and added the devServer configuration

devServer: {
    contentBase: require('path').join(__dirname, "dist"),
    compress: true,
    port: 8033,
    host: "127.0.0.1",}Copy the code

The terminal can start Webpack Dev Server by executing NPM run start

Use Hot Module Replacement

Hot Module Replacement works for React, Vue, Redux, Angular, styles, and more. Here we use the React Hot Loader as an example

Installing dependency packages

npm i react-hot-loader --save-dev
Copy the code

Modify. Babelrc file to add plugins option

{
  "plugins": ["react-hot-loader/babel"]}Copy the code

Modify the webpack.config.js file

const path = require('path');
const HtmlWebPackPlugin = require("html-webpack-plugin");  
const webpack = require('webpack'); Module. exports = {module: {rules: [{module: exports]test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"}}, {test: /\.html$/,
                use: [
                    {
                        loader: "html-loader",
                        options: { minimize: true }
                    }
                ]
            }
        ]
    },
    devtool: 'inline-source-map',
    plugins: [
        new HtmlWebPackPlugin({
            template: "./src/index.html",
            filename: "./index.html"}), new webpack. NamedModulesPlugin (), / / new new webpack HotModuleReplacementPlugin () / / new], devServer: {contentBase: path.join(__dirname,"dist"),
        compress: true,
        port: 8033,
        host: "127.0.0.1",
        hot: true}};Copy the code

Modify the./ SRC /app.js file as follows:

import React from "react";
import ReactDOM from "react-dom";
import { hot } from 'react-hot-loader'// Add const App = () => {return<div> <p> This is a test file! </p> <div> </div>) };exportdefault hot(module)(App); // reactdom.render (<App />, document.getelementByid ("app"));
Copy the code

The terminal can start Webpack Dev Server by executing NPM run start. / SRC /app.js to see what happens