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

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>

运行 npm run build进行测试，运行成功会在dist下面生成index.html文件表示成功

7、配置入口文件集合和输出文件集合

参考
1、http://0e2.net/post/79.html
2、http://www.tensweets.com/article/5cbdf91a362e5434baf63379
3、https://www.jianshu.com/p/4574baf78447

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

猜你喜欢