preface

There is a period of time did not do accumulation and learning, the recent learning content will be gradually updated.

Webpack should write a series, from the initial => in-depth => actual combat.

Follow “Hello FE” for more easy-to-understand content.

Upgrading Demo (using DevServer)

The previous content is only using Webpack to provide the ability to package build, to achieve the requirements of the package build, but in the development process may not only need to package build ability, but also need to develop debugging ability, this time you need to use DevServer.

Run the following command:

yarn add webpack-dev-server --dev
Copy the code

Install webpack-dev-server, then modify webpack.config.js:

// webpack.config.js
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  // Developer tools do not require debugging
  devtool: false.// Development mode does not compress code
  mode: 'development'.// Import file
  entry: './index.js'.output: {
    // Output the file name
    filename: 'bundle.js'.// Output file path
    path: path.join(__dirname, '/'),},module: {
    rules: [{// Matches files with the suffix.css
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],},],},plugins: [new MiniCssExtractPlugin()],
  devServer: {
    // DevServer root
    contentBase: '/'./ / DevServer port
    port: 8080.// Open the browser
    open: true,}};Copy the code

Modify package.json and add a new NPM scripts:

// package.json
{
  "name": "basic"."version": "1.0.0"."main": "index.js"."repository": "https://github.com/wjq990112/Learning-Webpack"."author": "wjq990112"."license": "MIT"."scripts": {
    "start": "webpack serve"."build": "webpack"
  },
  "devDependencies": {
    "css-loader": "^ 5.0.1." "."mini-css-extract-plugin": "^ 1.3.5." "."style-loader": "^ 2.0.0." "."webpack": "^ 5.19.0"."webpack-cli": "^ 4.4.0"."webpack-dev-server": "^ 3.11.2"}}Copy the code

Start DevServer with YARN Start. This will automatically open the browser, Hello, Webpack! It appears at the top of the page, right in the middle.

Now change the code in index.js to pass in Jack instead of Webpack when calling show, save it.

When you go back to your browser, you’ll see that the text is Hello, Jack! .