精通 Webpack 4 开发指南：全栈入门 React 与 Vue 项目

前端

2023-11-20 18:52:38

Webpack 4 进阶实战指南：全栈入门 React 与 Vue 项目

前言

最近，我在参与小组内“造轮子”的过程中，了解并学习到 Webpack v4 的一些内容。趁记忆还深，我将这些知识汇总成文，分享给大家。

Webpack 4 基础概念

Webpack 4 是一个功能强大、高度可定制的 JavaScript 模块打包工具，用于现代前端开发，它可以将你的代码合并和打包成一个或多个适合生产环境的文件。Webpack 4 的功能包括：

模块加载： Webpack 4 可以加载各种各样的模块，包括 JavaScript、JSON、CSS、图片等。
代码解析： Webpack 4 可以解析各种各样的代码，包括 ES6、TypeScript、React、Vue 等。
代码转换： Webpack 4 可以通过插件对代码进行转换，以便在各种环境中运行，例如，将 ES6 代码转换为 ES5 代码。
代码压缩： Webpack 4 可以通过插件对代码进行压缩，以减小代码大小。
代码分块： Webpack 4 可以将代码分块，以实现按需加载，从而提高页面的加载速度。

Webpack 4 项目搭建

React 项目搭建

安装 Webpack 4

npm install webpack-cli -g

mkdir my-react-app
cd my-react-app

初始化项目

npm init -y

安装 React 和 Webpack 相关依赖项

npm install react react-dom webpack webpack-cli --save-dev

创建 webpack.config.js 文件

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
          },
        },
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
};

创建 src/index.js 文件

import React from 'react';
import ReactDOM from 'react-dom';

function App() {
  return <h1>Hello, React!</h1>;
}

ReactDOM.render(<App />, document.getElementById('root'));

运行项目

npm run dev

Vue 项目搭建

安装 Webpack 4

npm install webpack-cli -g

mkdir my-vue-app
cd my-vue-app

初始化项目

npm init -y

安装 Vue 和 Webpack 相关依赖项

npm install vue vue-loader webpack webpack-cli --save-dev

创建 webpack.config.js 文件

const path = require('path');

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  resolve: {
    extensions: ['.js', '.vue'],
  },
};

创建 src/main.js 文件

import Vue from 'vue';

new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!',
  },
});

创建 index.html 文件

<!DOCTYPE html>
<html>
  <head>
    
  </head>
  <body>
    <div id="app"></div>
    <script src="./dist/bundle.js"></script>
  </body>
</html>

运行项目

npm run dev

Webpack 4 生产环境构建

Webpack 4 提供了一系列插件，可以帮助你将项目构建为生产环境，常用的插件包括：

UglifyJsPlugin： 用于压缩 JavaScript 代码。
OptimizeCSSAssetsPlugin： 用于压缩 CSS 代码。
MiniCssExtractPlugin： 用于将 CSS 代码提取到独立的文件中。
HtmlWebpackPlugin： 用于生成 HTML 文件。

React 项目生产环境构建

安装生产环境依赖项

npm install uglifyjs-webpack-plugin optimize-css-assets-webpack-plugin mini-css-extract-plugin html-webpack-plugin --save-dev

修改 webpack.config.js 文件

const path = require('path');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
          },
        },
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  plugins: [
    new UglifyJsPlugin(),
    new OptimizeCSSAssetsPlugin(),
    new MiniCssExtractPlugin({
      filename: 'style.css',
    }),
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
};

运行项目

npm run build

Vue 项目生产环境构建

安装生产环境依赖项

npm install uglifyjs-webpack-plugin optimize-css-assets-webpack-plugin mini-css-extract-plugin html-webpack-plugin --save-dev

修改 webpack.config.js 文件

const path = require('path');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
      {