发表更新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. 前置条件

  1. 安装 nodejs, 并配置国内镜像源
    安装并配置 nodejs 请参考我的文章安装并配置 nodejs
  2. 安装 cnpm
    安装 cnpm 请参考我的文章安装并配置 nodejs
  3. 安装 webpack
1
npm install -g webpack

3. 初始化 nodejs 项目

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
$ 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

说明:

  1. 可以一路回车,使用默认参数;
  2. license 具体选用哪种 license, 可以参考SPDX 许可列表
  3. 其他参数不清楚怎样设置, 可以参考这篇文章-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. 引入项目依赖

  1. 引入 angularjs
1
cnpm install --save angular@1.8.2

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

  1. 引入 bootstrap4.x 及其依赖包

bootstrap 依赖 jquery 和 popper

1
cnpm install --save bootstrap@4.6.0 jquery@3.6.0 popper.js@1.16.1

5. 写 webpack 配置

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
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 文件.
项目的目录结构

1
2
3
4
5
6
7
8
9
webpack3
│ webpack.config.js
│ package.json
src
│  index.html
│  index.js
│
└─css
     index.css

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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

1
2
3
4
5
6
7
8
9
10
11
.row > div {
  height: 150px;
}

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

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

7. 打包, 运行结果

打包程序

1
webpack

程序将会打包到 build 目录下

1
2
3
4
5
6
7
8
build
│  index.html
│
├─css
│      webpack3.css
│
└─js
        webpack3.bundle.js

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

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 支持

1
2
3
4
5
6
7
8
9
10
11
//开发服务器配置, 用来实现开发过程自动(自动编译, 自动打开浏览器, 自动更新浏览器)
    //特点,只会在内存中编译打包, 不会有任何输出.
    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

许可协议

#
评论
关注我

follow.it

友情链接

分类

标签

AI2
Almalinux2
Android4
Angular68
Ansible6
Astro3
CMS1
Comments2
English2
Fedora3
GORM1
Gemini AI1
Giscus2
Golang9
Helm3
Hexo8
IDEA3
Java4
Linux3
Macos2
MariaDB1
Material1
Matrix2
NAS1
NPM1
Nodejs13
OS1
Redhat2
Rust4
SEO2
SSL1
Seo1
TLS1
Ubuntu3
Vultr4
Windows8
angularjs2
backend1
blog1
bootstrap2
browser2
chartjs1
chrome3
css5
database14
design16
docker2
dovecot1
element-web1
email1
fedora2
firefox1
git2
gitlab11
golang5
gradle2
html4
java9
javascript63
k8s6
less1
life2
linux57
macOS2
marketing2
material design17
maven3
network12
nginx7
pagination1
pgadmin1
pnpm1
postfix1
product6
sass1
sentry2
shell2
source_control2
spring2
spring boot2
springboot1
strapi5
swagger1
tailwindcss3
tauri9
tmux1
typescript1
v2ray5
v2rayA3
v2rayN1
v2rayNG1
virualbox1
vmware9
vscode7
web61
webpack2
websocket2
windows2
wordpress2

最新文章

归档

×