2021-10-06发表2024-08-13更新web / build tools9 分钟读完 (大约1370个字)

webpack+angularjs1.x+bootstrap4.x开发环境配置

1. 说明

1.1. 适用范围

本教程适用于 angularjs1.x 和 bootstrap4.x

1.2. 为什么要使用 webpack

传统 web 开发-编写 html 文件并手动引入 js 包, 已经不能适应现代 web 开发了, 具体体现在:
1. 不能适应模块化编程的思想
2. 不能很好的利用 nodejs 包
3. 如果需要使用 less, sass, typescript, es5, es6 需要手动编译成源文件为 css, js 代码, 并打包.
4. 为什么选择 webpack, 相对于 grunt 或 gulp 加 bower 组合, webpack 能更好的处理现代 web 开发中的痛点. 另外 bower 的官网已经推荐使用 yarn+webpack 组合了.
当然好处还有很多, 这里只是简单列举这些.

2. 前置条件

安装 nodejs, 并配置国内镜像源
安装并配置 nodejs 请参考我的文章安装并配置 nodejs
安装 cnpm
安装 cnpm 请参考我的文章安装并配置 nodejs
安装 webpack

1	npm install -g webpack

3. 初始化 nodejs 项目

创建一个新文件夹, 进入文件夹.
初始化使用 npm init 命令, 具体如下

$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (webpack3)
version: (1.0.0)
description: an example webpack project
entry point: (index.js)
test command:
git repository:
keywords: webpack example
author: eagle
license: (ISC)
About to write to C:\dev\code\SandBox\webpack3\package.json:

{
  "name": "webpack3",
  "version": "1.0.0",
  "description": "an example webpack project",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "webpack",
    "example"
  ],
  "author": "eagle",
  "license": "ISC"
}
Is this OK? (yes) yes

说明:

可以一路回车,使用默认参数;
license 具体选用哪种 license, 可以参考SPDX 许可列表
其他参数不清楚怎样设置, 可以参考这篇文章-npm 配置项介绍

4. 引入工具包和项目依赖

4.1. 引入开发需要用到的工具包

4.1.1. 引入 webpack 工具包

1	cnpm install --save-dev webpack webpack-cli webpack-dev-server

4.1.2. 引入 webpack 插件

4.1.2.1. 2.1 css 处理插件

1	cnpm install --save-dev css-loader mini-css-extract-plugin

4.1.2.2. 2.2 html 处理插件

1	cnpm install --save-dev html-webpack-plugin

4.2. 引入项目依赖

引入 angularjs

1	cnpm install --save [email protected]

注意: 这里的保存选项是 –save, 包依赖将被更新到 package.json 的 dependencies 区域.

引入 bootstrap4.x 及其依赖包

bootstrap 依赖 jquery 和 popper

1	cnpm install --save [email protected] [email protected] [email protected]

5. 写 webpack 配置

创建 webpack.config.js, 并配置如下内容

const { resolve } = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  //webpack的js入口, 里面定义打包资源
  entry: "./src/index.js",
  output: {
    //webpack3 为项目名, 可替换成你自己的项目名
    filename: "js/webpack3.bundle.js",
    path: resolve(__dirname, "build"),
  },
  module: {
    rules: [
      //loader的配置
      {
        test: /\.css$/,
        use: [
          //创建style标签, 将js中的中的样式资源插入进去, 添加到head中生效, 本项目未用到, 本项目采用的是MiniCssExtractPlugin, 将css输出到独立的文件
          //'style-loader',
          //将经过css-loader处理后的文件输出到独立的css文件, 该独立css在新建MiniCssExtractPlugin的时候已经指定, 请参考plugin区域
          MiniCssExtractPlugin.loader,
          //将css文件变成commonjs模块加载js中, 里面内容是样式字符串
          "css-loader",
        ],
      },
    ],
  },
  plugins: [
    //默认会创建一个空的html, 自动引入打包输出的所有资源(JS/CSS)
    new HtmlWebpackPlugin({
      template: "./src/index.html",
    }),
    new MiniCssExtractPlugin({
      //webpack3  为项目名
      filename: "css/webpack3.css",
    }),
  ],
  //开发服务器配置, 用来实现开发过程自动(自动编译, 自动打开浏览器, 自动更新浏览器)
  //特点,只会在内存中编译打包, 不会有任何输出.
  devServer: {
    static: {
      directory: resolve(__dirname, "build"),
    },
    compress: true,
    port: 3000,
    //自动打开浏览器
    open: true,
  },

  mode: "development",
};

6. 写一个简单的 angularjs

创建 index.js, index.css 文件.
项目的目录结构

webpack3
│ webpack.config.js
│ package.json
src
│  index.html
│  index.js
│
└─css
     index.css

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>

  <body>
    <div class="container">
      <div class="row">
        <div id="box1" class="col-xs-12 col-sm-6 col-md-3"></div>
        <div id="box2" class="col-xs-12 col-sm-6 col-md-3"></div>
        <div id="box3" class="col-xs-12 col-sm-6 col-md-3"></div>
        <div id="box4" class="col-xs-12 col-sm-6 col-md-3"></div>
      </div>
    </div>
  </body>
</html>

index.js

const Angular = require("angular");
const $ = require("jquery");
import "bootstrap";
import "bootstrap/js/dist/util";
import "bootstrap/js/dist/dropdown";
import "bootstrap/dist/css/bootstrap.css";
import "./css/index.css";
const ngModule = Angular.module("myApp", []);
ngModule.controller("mainCtrl", [
  "$scope",
  "$http",
  function ($scope, $http) {
    // console.log($scope);
    $scope.name = "eagle";
  },
]);

css/index.css

.row > div {
  height: 150px;
}

.row > div:nth-child(2n) {
  background-color: blue;
}

.row > div:nth-child(2n + 1) {
  background-color: yellow;
}

7. 打包, 运行结果

打包程序

webpack

程序将会打包到 build 目录下

build
│  index.html
│
├─css
│      webpack3.css
│
└─js
        webpack3.bundle.js

在浏览器中查看 index.html, 效果如下

8. 配置 webpack dev server

为什么要安装 dev server?
如果没有 dev server, 我们每次修改后都要运行 webpack 去打一次包, 才能看到改动后的效果. 如果开启 dev server, 修改可以及时反映到界面上, 不用我们手动打包, 再点击运行. 方便开发.

8.1. 安装 webpack dev server 插件

1	cnpm install --save-dev webpack-dev-server

在引入工具包一节一节安装过, 这里可以忽略

8.2. 修改 webpack.config.js

加入对 webpack dev server 支持

//开发服务器配置, 用来实现开发过程自动(自动编译, 自动打开浏览器, 自动更新浏览器)
    //特点,只会在内存中编译打包, 不会有任何输出.
    devServer: {
        static: {
          directory: resolve(__dirname, 'build'),
        },
        compress: true,
        port: 3000,
        //自动打开浏览器
        open: true
    },

运行 webpack dev server
在 webpack 配置文件同级目录下运行

1	webpack server

webpack+angularjs1.x+bootstrap4.x开发环境配置

https://pengtech.net/webpack/webpack_angularjs_bootstrap.html

作者

鹏叔

发布于

2021-10-06

更新于

2024-08-13

许可协议

webpack+angularjs1.x+bootstrap4.x开发环境配置

1. 说明

1.1. 适用范围

1.2. 为什么要使用 webpack

2. 前置条件

3. 初始化 nodejs 项目

4. 引入工具包和项目依赖

4.1. 引入开发需要用到的工具包

4.1.1. 引入 webpack 工具包

4.1.2. 引入 webpack 插件

4.1.2.1. 2.1 css 处理插件

4.1.2.2. 2.2 html 处理插件

4.2. 引入项目依赖

5. 写 webpack 配置

6. 写一个简单的 angularjs

7. 打包, 运行结果

8. 配置 webpack dev server

8.1. 安装 webpack dev server 插件

8.2. 修改 webpack.config.js

相关文章

作者

发布于

更新于

许可协议

follow.it

友情链接

分类

标签

目录

最新文章

归档

webpack+angularjs1.x+bootstrap4.x开发环境配置

1. 说明

1.1. 适用范围

1.2. 为什么要使用 webpack

2. 前置条件

3. 初始化 nodejs 项目

4. 引入工具包和项目依赖

4.1. 引入开发需要用到的工具包

4.1.1. 引入 webpack 工具包

4.1.2. 引入 webpack 插件

4.1.2.1. 2.1 css 处理插件

4.1.2.2. 2.2 html 处理插件

4.2. 引入项目依赖

5. 写 webpack 配置

6. 写一个简单的 angularjs

7. 打包, 运行结果

8. 配置 webpack dev server

8.1. 安装 webpack dev server 插件

8.2. 修改 webpack.config.js

相关文章

如何从Angularjs 升级到 Angular

一步一步升级到Angular 16

一步一步升级到Angular 17

Angular实现登录保护

创建Angular项目

作者

发布于

更新于

许可协议

follow.it

友情链接

分类

标签

目录

最新文章

归档