小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。
本文同时参与 「掘力星计划」 ,赢取创作大礼包,挑战创作激励金
前言
经过上一章的,我们可以准备进入之后的学习咯!
使用打包生成的 test.js 文件
现在让我们来扩展我们的项目,使之能完成更强大的功能。
1. 修改我们的index.js文件
index.js
var msg = 'Hello world!'
//生成一个1秒吼触发的弹窗
setTimeout(function () {
alert(msg)
},1000)
使用webpack 打包生成 test.js 文件;
2.新建 index.html 文件,并引用打包生成的 test.js 文件:
index.html
<html>
<head>
<meta charset="utf-8"/>
<title>webpack demo</title>
</head>
<body>
<script type="text/javascript" src="./dist/test.js"></script>
</body>
</html>
这里要记得重新打包一下哟 现在让我们在浏览器里打开 index.html 文件,等待一秒就会弹出信息为 Hello word! 的弹窗。由此可见打包生成的 test.js 具有 index.js 一样的功能。
开发环境、测试环境和生产环境
webpack 有一些特性是专门用于开发环境的,可以帮助我们搭建一个更好的开发环境。
-
错误跟踪:webpack 打包后的代码是经过重新整理和组织的,这就会造成代码出错的位置很难定位。Javascript 提供了 source map 功能,通过 webpack 的 devtool 可以进行配置。source map 用于将编译后的代码映射回原始代码,可以更容易地追踪错误和警告。source map 有很多不同的选项,每个选项的作用可以在 devtool 中查看,这里不做说明。一般在开发环境会使用 eval-source-map、cheap-eval-source-map 或者 cheap-module-eval-source-map,因为这几个选项提供了 source map 而且有最快的代码重构建速度,适合需要频繁修改代码的开发环境。
-
自动编译:开发过程会经常性地修改代码,如果每次修改都需要执行 webpack 打包生成文件,开发效率肯定是很低的。webpack 提供了三种方式用来实现源文件的自动编译功能:
(1)webpack --watch;
(2)webpack-dev-server;
(3)webpack-dev-middleware;(暂时忽略吧)
webpack --watch
先让我们试用一下自动编译的第一种方式,在 webpackDemo
的目录下执行
webpack --watch:
可以看到在执行了 webpack --watch
命令以后,该命令并不会马上结束,webpack
启动了一个监听服务。
在浏览器中打开我们的 index.html
页面,过了一秒弹出 Hello world!
弹窗:
现在让我们修改当前目录的 index.js
文件,将弹窗内的 'Hello world!' 信息修改为 'Hello webpack!' 并保存:
index.js
控制台信息输出如下:
可以看到 webpack
检测到了入口文件的变更并自动执行了打包工作。
让我们刷新我们的页面,可以看到过了一秒弹出 Hello webpack!
弹窗。
webpack-dev-server
webpack --watch
解决了入口文件变更后自动编译的问题,但是每次修改以后都需要手动刷新页面才能看到最新的效果。我们可以使用 webpack-dev-server
解决手动刷新的问题。
webpack-dev-server
提供了一个简单的 web
服务器,并提供了实时加载(live reloading)的功能。在正式使用前我们先做一些准备工作。
npm i --save-dev webpack-dev-server
在 webpack.config.js
中通过 devServer
配置服务启动的环境。修改 webpack.config.js
文件如下:
webpack.config.js
module.exports = {
/* webpack 入口起点*/
entry: "./index.js",
/* webpack 输出*/
output: {
//输出文件名
filename: "./test.js",
},
module: {
rules: [
{
test: /\.js$/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"],
},
},
},
],
},
devServer: {
contentBase: './dist'
},
mode: "development",
};
我们修改了 (1)新增 devServer,并配置资源路径为输出文件的位置 './dist'; 然后添加这个
package.json
(2) 然后启动open脚本
仔细一看这不是界面有问题嘛,还是要配置一下是不是
webpack-dev-server
会默认打开资源目录(./dist
)下的 index.html
文件,但是我们的 webpack.config.js
只配置了 output
输出文件为 './dist/test.js'
,在 dist
目录下并不存在 index.html
文件。
那么怎么在 dist
目录下生成 index.html
文件呢?我们可以使用 HtmlWebpackPlugin
完成 Html
文件的创建过程:
- 安装 HtmlWebpackPlugin:
cnpm i --save-dev html-webpack-plugin;
- 在 webpack.config.js 中启用 HtmlWebpackPlugin:
var HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
/* webpack 入口起点*/
entry: "./index.js",
/* webpack 输出*/
output: {
//输出文件名
filename: "./test.js",
},
module: {
rules: [
{
test: /\.js$/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"],
},
},
},
],
},
/* 配置webpack-dev-serve */
devServer: {
contentBase: './dist'
},
/* 插件配置 */
plugins: [
/* HTML 生成插件 */
new HtmlWebpackPlugin()
],
mode: "development",
};
效果如下
本章结束