html如何转变为webpack项目

将html、js、css文件放到一个文件夹内，然后运行以下命令

初始化npm

npm init -y

安装webpack及其插件

npm install webpack webpack-cli html-webpack-plugin css-loader style-loader html-loader -D

创建Webpack配置文件

在项目根目录下新建文件 webpack.config.js，将以下代码粘贴进去：

const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  mode: "production",
  entry: {
    app: "./src/index.js",
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "src/index.html",
      minify: {
        collapseWhitespace: true,
        removeAttributeQuotes: true,
        removeComments: true,
      },
      hash: true,
    }),
  ],
};

其中指定了入口文件(src/index.js)、输出文件(dist/main.js)、以及像html-loader、style-loader和css-loader这样用于处理HTML、CSS和JavaScript等资源的加载器。

如下文件目录：

|——src
|   |——index.html
|   |——index.css
|   |——index.js
|——webpack.config.js

安装 webpack-dev-server,

你可以使用webpack-dev-server基于提供的所有配置来运行开发服务器，如需要自动编译，刷新浏览器可以添加 webpack-dev-server 主机到 package.json，使用者请确保 Webpack Dev Server 是作用于开发环境的配置下。

6、在 package.json 文件中添加 "build" scripts:

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

要压缩HTML和CSS，可以使用html-webpack-plugin插件。

首先通过npm安装该插件：

npm install html-webpack-plugin --save-dev

现在，通过运行命令打包：

npm run build

该打包选项将HTML压缩至最优大小。

7.通过npm run build命令来进行编译。

将这些步骤打印到终端中的最终输出可能如下所示：

$ npm run build

> your-project@1.0.0 build /path/to/your-project
> webpack

Hash: 4a027e52186cedf51725
Version: webpack 3.10.0
Time: 654ms
Asset       Size  Chunks             Chunk Names
bundle.js  2.96 kB       0  [emitted]  main

如果还是出现这个错误，可以考虑将 webpack 和 webpack-cli 依赖安装在全局，可以使用如下命令：

npm install -g webpack webpack-cli

然后再运行 npm run build，如果还出现错误，您可能需要重新初始化项目并重新安装依赖。

发表新评论

html如何转变为webpack项目

html如何转变为webpack项目

Login with

Regist with