webpack来构建jQuery+bootstrap的多页面项目

最新推荐文章于 2024-04-18 15:19:36 发布

一键写代码

最新推荐文章于 2024-04-18 15:19:36 发布

阅读量1.6k

点赞数 3

分类专栏： JavaScript 前端技术积累

本文链接：https://blog.csdn.net/qq_42991509/article/details/106385626

版权

前端技术积累同时被 2 个专栏收录

160 篇文章 9 订阅

订阅专栏

JavaScript

43 篇文章 0 订阅

订阅专栏

1、项目初始化
npm init
一路回车或设置，最后生成项目的package.json

2、安装bootstrap和jquery
npm install bootstrap jquery

3、引入webpack4和webpack-cli
npm i webpack --save-dev
npm i webpack-cli --save-dev

4、打开package.json文件，添加以下内容

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

5、安装配置文件使用babel-loader

babel-loader 是一个 webpack 的 loader(加载器)，用于将 ES6 及以上版本转译至 ES5

npm i @babel/core babel-loader @babel/preset-env --save-dev

在项目根目录新建.babelrc的文件配置Babel：

{
  "presets": ["@babel/preset-env"]
}

新建webpack.config.js文件进行babel-loader配置：

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

6、构建处理HTML 的webpack插件
webpack需要安装html-webpack-plugin 和 html-loader来处理打包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/page/index.html",
      filename: "./index.html"
    })
  ]
};

这个时候，可以在/src/page/index.html添加一个html文件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>webpack</title>
  </head>
  <body>
    <div>
      aaaa
    </div>
  </body>
</html>