当前位置：首页 > news >正文

webpack4入门

news 来源：原创 2024/5/9 5:38:48

前提

已安装node(版本号>4.0，已自带NPM)
mac机器
有一个空目录

无webpack.config.js配置打包

快速构建package.json文件。
npm init -y
安装webpack4及其命令行接口
npm i webpack webpack-cli --save-dev
package.json文件增加build参数

"scripts": {
  "build": "webpack"
}

创建./src/index.js文件
增加内容

console.log(`这是入口文件`);

终端执行npm run build
目录下多了一个./dist/main.js。
这个文件是webpack对./src/index.js的打包结果。

`production`和`development`模式

修改package.json文件的scripts字段

"scripts": {
  "dev": "webpack --mode development",
  "build": "webpack --mode production"
}

分别执行npm run dev或npm run build
你会看到./dist/main.js不同的变化。
production模式下，默认对打包的进行minification(文件压缩)，Tree Shaking(只导入有用代码)，scope hoisting（作用域提升）等等操作。
总之是让打包文件更小。
development模式下，对打包文件不压缩，同时打包速度更快。

如果没指定任何模式，默认是production模式。

ES6和React

安装对应依赖包
npm i babel-core babel-loader babel-preset-env react react-dom babel-preset-react --save-dev
新建.babelrc文件，进行相关配置

{
  "presets": ["env", "react"]
}

新建webpack.config.js文件，进行相关配置

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

新增./src/app.js以及修改./src/index.js
./src/app.js内容如下：

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

./src/index.js内容如下：

import App from "./App";

终端执行npm run build

使用`html-webpack-plugin`插件对html进行打包

新建./src/index.html文件，内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>webpack4入门</title>
</head>
<body>
    <div id="app">
    </div>
</body>
</html>

安装依赖包。

npm i html-webpack-plugin html-loader --save-dev

修改webpack.config.js配置。

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"
    })
  ]
};

终端执行npm run build命令。
你会看到项目多了个./dist/index.html文件。

使用`webpack-dev-server`插件

安装依赖包。
npm i webpack-dev-server --save-dev

修改package.json文件。

"scripts": {
  "start": "webpack-dev-server --mode development --open",
  "build": "webpack --mode production"
}

修改webpack.config.js文件，新增devServer配置。

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

终端执行npm run start便可以启动webpack dev server。

使用`Hot Module Replacement`

Hot Module Replacement有针对React，Vue，Redux，Angular，样式等等。
这里我们以React Hot Loader为例。

安装依赖包。

npm i react-hot-loader --save-dev

修改.babelrc文件，新增plugins选项。

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

修改webpack.config.js文件。

const path = require('path');
const HtmlWebPackPlugin = require("html-webpack-plugin");  
const webpack = require('webpack'); // 新增
module.exports = {
    module: {
        rules: [
            {
                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 webpack.HotModuleReplacementPlugin() //新增
    ],
    devServer: {
        contentBase: path.join(__dirname, "dist"),
        compress: true,
        port: 8033,
        host: "127.0.0.1",
        hot: true // 新增
    }
};

修改./src/app.js文件内容如下：

import React from "react";
import ReactDOM from "react-dom";
import { hot } from 'react-hot-loader' // 新增

const App = () => {
  return (
    <div>
      <p>这是一个测试文件！真得是动态更新啊</p>
      <div>好棒棒啊</div>
    </div>
  );
};
export default hot(module)(App); // 修改
ReactDOM.render(<App />, document.getElementById("app"));

终端执行npm run start便可以启动webpack dev server。
然后修改./src/app.js看下效果。