如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)

下面是如何用Webpack4.0撸单页/多页脚手架的完整攻略：

准备工作

在开始之前，我们需要安装 Node.js 和 npm，以及全局安装 webpack 和 webpack-cli。

npm install webpack webpack-cli -g

初始化项目

我们创建一个名为webpack-project的项目文件夹，并在其中初始化项目：

mkdir webpack-project
cd webpack-project
npm init -y

安装依赖

现在我们需要安装一些必须的依赖包：

npm i webpack webpack-cli webpack-dev-server clean-webpack-plugin html-webpack-plugin mini-css-extract-plugin css-loader style-loader sass-loader node-sass file-loader url-loader babel-loader @babel/core @babel/preset-env --save-dev

创建Webpack配置文件

我们需要创建 webpack 的配置文件来指导它如何构建我们的项目。我们会创建两个不同的配置文件 webpack.config.js 和 webpack.prod.config.js。

单页应用配置

对于单页应用程序，我们只需要创建一个入口文件和一个 HTML 文件。我们的配置文件应该包括以下部分：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'webpack-project',
      template: path.join(__dirname, '/public/index.html'), // 定义 HTML 模板路径
    }),
  ],
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ["babel-loader"],
      },
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader',
        ],
      },
      {
        test: /\.(png|jpe?g|gif)$/i,
        loader: 'file-loader',
        options: {
          outputPath: 'images',
        },
      },
    ]
  },
  devServer: {
    contentBase: './dist',
    port: 3000,
    hot: true,
    open: true,
  },
};

多页应用配置

对于多页应用程序，我们需要将每个页面的入口文件都添加到配置文件中。我们的配置文件应该包括以下部分：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  entry: {
    index: './src/index.js',
    about: './src/about.js',
    contact: './src/contact.js'
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: '[name].[hash].js',
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: '首页', // 定义 HTML 标题
      filename: 'index.html', // 定义 HTML 文件名称
      template: path.join(__dirname, '/public/index.html'), // 定义 HTML 模板路径
      chunks: ['index']
    }),
    new HtmlWebpackPlugin({
      title: '关于我们',
      filename: 'about.html',
      template: path.join(__dirname, '/public/about.html'),
      chunks: ['about']
    }),
    new HtmlWebpackPlugin({
      title: '联系我们',
      filename: 'contact.html',
      template: path.join(__dirname, '/public/contact.html'),
      chunks: ['contact']
    }),
    new CleanWebpackPlugin(),
  ],
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ["babel-loader"],
      },
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader',
        ],
      },
      {
        test: /\.(png|jpe?g|gif)$/i,
        loader: 'file-loader',
        options: {
          outputPath: 'images',
        },
      },
    ]
  },
  devServer: {
    contentBase: './dist',
    port: 3000,
    hot: true,
    open: true,
  },
  optimization: {
    splitChunks: {
      chunks: "all",
    }
  }
};

编写命令

现在，我们需要在 package.json 文件中添加一些命令，这些命令将使我们更容易地运行和构建应用程序。

{
  "name": "webpack-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --config webpack.config.js",
    "build": "webpack --config webpack.prod.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.16.12",
    "@babel/preset-env": "^7.16.11",
    "babel-loader": "^8.2.3",
    "clean-webpack-plugin": "^4.0.0",
    "css-loader": "^6.5.1",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.5.0",
    "mini-css-extract-plugin": "^2.4.5",
    "node-sass": "^6.0.1",
    "sass-loader": "^12.1.0",
    "style-loader": "^3.3.0",
    "url-loader": "^4.1.2",
    "webpack": "^5.64.4",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.6.0"
  },
  "dependencies": {}
}

现在，可以使用以下命令运行开发服务器：

npm run start

使用以下命令生成生产构建：

npm run build

示例

下面是两个示例：

示例1：基于React的单页应用

创建基于 React 的单页应用项目：

npx create-react-app react-app

进入项目的根目录，然后安装依赖：

cd react-app
npm install --save-dev webpack webpack-cli webpack-dev-server react-hot-loader @babel/core @babel/preset-env @babel/preset-react babel-loader style-loader css-loader sass-loader node-sass html-webpack-plugin file-loader url-loader

然后，我们需要修改 package.json 文件，以便使用我们自己的 Webpack 配置文件。在 scripts 部分添加以下内容：

"scripts": {
    "start": "webpack-dev-server --config webpack.dev.js --open",
    "build": "webpack --config webpack.prod.js"
  }

使用以下命令来创建我们的 Webpack 配置文件：

touch webpack.common.js webpack.dev.js webpack.prod.js

具体配置请参考上面的单页应用配置示例。

示例 2：基于Vue的多页应用

在 Vue CLI 中默认使用单页应用程序，但是我们可以进行一些修改以更改基于 Vue 的应用程序为多页应用程序。我们需要在 Vue CLI 中使用自定义 Webpack 配置。我们将使用 vue-cli-plugin-multi-page 插件来配置多页应用程序。

首先安装 vue-cli-plugin-multi-page 插件：

npm install vue-cli-plugin-multi-page

使用以下命令创建一个基于 Vue.js 的多页应用：

vue create my-multi-page-app

然后进行一些配置：

选择 Manually select features
选择 Babel, Router, Vuex, CSS Pre-processors, Linter / Formatter
Use history mode for router? 选择 Yes
Pick a CSS pre-processor 选择 Sass/SCSS (with dart-sass)

接下来添加 vue.config.js 文件：

const pages = {
  index: {
    entry: 'src/main.js',
    template: 'public/index.html',
    filename: 'index.html',
    title: '首页',
  },
  about: {
    entry: 'src/about.js',
    template: 'public/about.html',
    filename: 'about.html',
    title: '关于我们',
  },
  contact: {
    entry: 'src/contact.js',
    template: 'public/contact.html',
    filename: 'contact.html',
    title: '联系我们',
  }
}

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/production-sub-path/' : '/',
  pages,
  chainWebpack: (config) => {
    config.plugin('html')
      .tap((args) => {
        Object.keys(pages).forEach((key) => {
          args[0].title = pages[key].title; // 页面的标题
          args[0].chunks = ['chunk-vendors', 'chunk-common', key]; // 当前页面所需的 JS和CSS文件名
        });
        return args;
      });
  },
};

这里我们定义了三个页面：首页、关于我们和联系我们。

然后我们删除 src/router.js 文件，把多页应用中每个页面的路由都独立出来。新建文件 src/pages/index/router.js，src/pages/about/router.js 和 src/pages/contact/router.js。

具体配置请参考上面的多页应用配置示例。

以上就是基于webpack4.0撸单页/多页脚手架的完整攻略，还有很多其它相关的配置和插件可以调整，感谢你的阅读。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript) - Python技术站