1. 说明 1.1. 适用范围 本教程适用于 angularjs1.x 和 bootstrap4.x 1.2. 为什么要使用 webpack 传统 web 开发-编写 html 文件并手动引入 js 包, 已经不能适应现代 web 开发了, 具体体现在:不能适应模块化编程的思想 不能很好的利用 nodejs 包 如果需要使用 less, sass, typescript, es5, es6 需要手动编译成源文件为 css, js 代码, 并打包. 为什么选择 webpack, 相对于 grunt 或 gulp 加 bower 组合, webpack 能更好的处理现代 web 开发中的痛点. 另外 bower 的官网已经推荐使用 yarn+webpack 组合了. 当然好处还有很多, 这里只是简单列举这些. 2. 前置条件 安装 nodejs, 并配置国内镜像源 安装并配置 nodejs 请参考我的文章安装并配置 nodejs 安装 cnpm 安装 cnpm 请参考我的文章安装并配置 nodejs 安装 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
说明:
可以一路回车,使用默认参数; 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 注意: 这里的保存选项是 –save, 包依赖将被更新到 package.json 的 dependencies 区域.
引入 bootstrap4.x 及其依赖包 bootstrap 依赖 jquery 和 popper
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 = { entry : "./src/index.js" , output : { filename : "js/webpack3.bundle.js" , path : resolve (__dirname, "build" ), }, module : { rules : [ { test : /\.css$/ , use : [ MiniCssExtractPlugin .loader , "css-loader" , ], }, ], }, plugins : [ new HtmlWebpackPlugin ({ template : "./src/index.html" , }), new MiniCssExtractPlugin ({ 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 ) { $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 (2 n) { background-color : blue; } .row > div :nth-child (2 n + 1 ) { background-color : yellow; }
7. 打包, 运行结果 打包程序
程序将会打包到 build 目录下
1 2 3 4 5 6 7 8 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 支持
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 配置文件同级目录下运行