webpack 4 入门教程一

什么是 Webpack?
webpack 是一个静态模块打包器(module bundler)
作用:
① 它能将多个js文件打包成一个文件(传统开发会需要引入很多js,导致网页加载需要发起多次http请求而是加载速度变慢)
② 解决传统的依赖引用混乱问题,有时候传统js引用必须要按规定顺序加载,
③ 可以支持css和less的加载,图片处理(可以将较小的图片转成base64，减少http请求)
④ 可以通过模板引擎插件html-webpack-plugin生成HTML页面,html-webpack-plugin默认支持ejs格式的模板文件，如果你想使用其它格式的模板文件，那么需要在webpack配置里设置好相应
的loader

从 webpack v4.0.0 开始，可以不用引入一个配置文件。
然而，webpack 仍然还是高度可配置的。在开始前你需要先理解四个核心概念：

入口(entry)
输出(output)
loader
插件(plugins)

1.先安装node.js

https://nodejs.org/en/download

查看版本

$ node -v
v10.14.2$ npm -v
6.5.0

2.使用淘宝镜像

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

3.安装webpack

$ cnpm install webpack -g

查看版本

$ webpack -v
4.41.5

安装babel

cnpm install -D babel-loader@7
//cnpm install -D babel-loader会默认安装到babel-loader@8.x版本，需要babel7.x支持
cnpm install -D babel-core
cnpm install -D babel-preset-env
cnpm i babel-plugin-transform-runtime

4.创建项目
$ mkdir webtest
创建src文件夹
$ cd webtest
$ mkdir src5.新建文件
*1 webtest下新建index.html

<!doctype html>
<html><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>Webpack入门</title></head><body><div id="webContent"></div><script type="text/javascript" src="./src/index.js" charset="utf-8"></script></body>
</html>

*2 src下新建getById.js内容如下

function getById(id) {return document.getElementById(id);
}export default getById;

*3 src下新建index.js内容如下

import getById from './getById.js';getById('webContent').innerHTML = 'Hello Webpack!!!';

6.初始化
$ npm init
一直按回车即可,最后会生成package.json

{"name": "webtest","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"author": "","license": "ISC"
}

7.打包,在webtest执行webpack
结果是会生成一个dist文件夹,里面有一个main.js文件

这时会有一个警告

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior.
Learn more: https://webpack.js.org/configuration/mode/

就是没有指定打包模式,默认会以production模式打包,可以在命令行指定或在配置文件指定
模式可选 string = 'production': 'none' | 'development' | 'production'

module.exports = {mode: 'development'
};

或
webpack --mode=development

C:\Users\01\Desktop\webtest>webpack --mode=development
Hash: f514556032677b335a67
Version: webpack 4.41.5
Time: 238ms
Built at: 2020-01-04 11:08:12Asset      Size  Chunks             Chunk Names
main.js  4.58 KiB    main  [emitted]  main
Entrypoint main = main.js
[./src/getById.js] 90 bytes {main} [built]
[./src/index.js] 92 bytes {main} [built]

development模式打包会生成很详细的main.js文件默认的打包配置webpack.config.js如下

const path = require('path');module.exports = {mode: 'production',entry: './src/index.js',output: {path: path.resolve(__dirname, 'dist'),filename: 'main.js'}
};

这个文件没有,如果只执行webpack也是一样的

9.修改index.html的js引用

<script type="text/javascript" src="./dist/main.js" charset="utf-8"></script>

然后就可以在浏览器打开index.html,就会页面看到

Hello Webpack!!!

至此,我们将多个js打包合并就完成了,如果有兴趣可以查看main.js里面的内容

10.查看main.js内容,格式化后如下

!
function(e) {var t = {};function n(r) {if (t[r]) return t[r].exports;var o = t[r] = {i: r,l: !1,exports: {}};return e[r].call(o.exports, o, o.exports, n),o.l = !0,o.exports}n.m = e,n.c = t,n.d = function(e, t, r) {n.o(e, t) || Object.defineProperty(e, t, {enumerable: !0,get: r})},n.r = function(e) {"undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag, {value: "Module"}),Object.defineProperty(e, "__esModule", {value: !0})},n.t = function(e, t) {if (1 & t && (e = n(e)), 8 & t) return e;if (4 & t && "object" == typeof e && e && e.__esModule) return e;var r = Object.create(null);if (n.r(r), Object.defineProperty(r, "default", {enumerable: !0,value: e}), 2 & t && "string" != typeof e) for (var o in e) n.d(r, o,function(t) {return e[t]}.bind(null, o));return r},n.n = function(e) {var t = e && e.__esModule ?function() {return e.default}:function() {return e};return n.d(t, "a", t),t},n.o = function(e, t) {return Object.prototype.hasOwnProperty.call(e, t)},n.p = "",n(n.s = 0)
} ([function(e, t, n) {"use strict";n.r(t),(function(e) {return document.getElementById(e)} ("webContent")).innerHTML = "Hello Webpack!!!"
}]);

function前面有个感叹号是什么意思呢?
我们来看一下,一般我们定义函数有2种方法
第1种

function funcName () {}

第2种

var funcName = function() {}

console.log(funcName()); // 会在控制台输出undefined,因此function默认返回值是undefined
那么我们怎么在定义的时候就执行这个函数呢,一般就是FunctionName(),我们改变一下
function funcName () {}(),这样会报错,应该这样

(function funcName () {})();

这样控制台就会打印出undefined了,也就是定义时就直接执行了

我们加个感叹号试试
console.log(!funcName()); // 控制台当然就会打印出true,就是一个取反运算

我们再修改一下我们的定义

!function funcName(){}();

把这段代码放到Chrome的console里,发现会打印处true
因此,感叹号的作用就是将函数定义给编译了,就是将

function funcName(){}

编译为funcName这个函数了,然后等于执行!funcName(),
因此感叹号的作用就是执行一个取反操作,函数该怎么定义还是怎么定义

10.假如要export多个函数,并import,可以修改一下

getById.js

function getById(id) {return document.getElementById(id);
}
function getValueById(id) {return document.getElementById(id).value;
}export {getById,getValueById};

index.js

import {getById, getValueById} from './getById.js';getById('webContent').innerHTML = 'Hello Webpack!!!';getById('webContent2').innerHTML = getValueById("login");

index.html

<!doctype html>
<html><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>Webpack入门</title></head><body><div id="webContent"></div><div id="webContent2"></div><input id="login" value="登录"><script type="text/javascript" src="./dist/main.js" charset="utf-8"></script></body>
</html>

最终显示

11.使用webpack-dev-server来进行本地自动热更新开发

安装webpack-dev-server

$ cnpm install -g webpack-dev-server

修改package.json增加serve

"scripts": {"serve": "webpack-dev-server --open --mode development"
}

修改webpack.config.js增加devServer

devServer: {contentBase: path.join(__dirname, "dist"), // 默认本地服务器所在的根目录port: 8084,      // 端口号，默认8080hot: true
}

安装html-webpack-plugin和clean-webpack-plugin插件

$ cnpm install -g html-webpack-plugin clean-webpack-plugin

添加插件配置

const HtmlWebpackPlugin = require('html-webpack-plugin');    //生成html文件
const {CleanWebpackPlugin} = require('clean-webpack-plugin');  //清除
// 注意引用CleanWebpackPlugin必须是对象,否则会报错TypeError: CleanWebpackPlugin is not a constructorplugins: [new HtmlWebpackPlugin({title: '首页',template: './index.html'  // 以当前目录的index.html为编译模板}),new CleanWebpackPlugin()
],

运行npm run serve,报错Error: Cannot find module 'webpack/lib/node/NodeTemplatePlugin'

网上查了,webpack必须本地安装

$ cnpm install webpack

最终运行npm run serve效果

默认显示模式是iframe, 就是页面有修改,直接用iframe加载修改后的页面,顶部会显示提示信息,状态栏不会改变

如果不需要这样方式,可以在devServer添加配置选项:

inline: true

这样就不会有顶部提示了,文件修改就刷新整个页面

12.添加2个有用的插件

banner-plugin(webpack 内置插件,不用独立安装)
作用：在输出的打包压缩的JS代码内嵌入版权识别注释
引入:
const webpack=require('webpack')
plugins[]配置属性加入
new webpack.BannerPlugin('Made by Andy 2020')

作用: 打包时复制文件到指定目录
var CopyWebpackPlugin = require('copy-webpack-plugin');
plugins[]配置属性加入
new CopyWebpackPlugin([
{from:'./src', to:'./dest'}
])

13.实现多页面打包编译生成

比如login.html和index.html分别都有它们的js(login.js, index.js)

我们可以配置如下

src- pages- login.html- index.html- jslogin.jsindex.js

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');     //生成html文件
const {CleanWebpackPlugin} = require('clean-webpack-plugin'); //清除module.exports = {mode: 'production',entry: {index: './src/js/index.js',login: './src/js/login.js',},output: {path: path.resolve(__dirname, 'dist'),filename: 'js/[name].js'},plugins: [new CleanWebpackPlugin(),new HtmlWebpackPlugin({filename: 'index.html',title: '首页',template: './src/pages/index.html',  // 以index.html为编译模板chunks: ['index']}),new HtmlWebpackPlugin({filename: 'login.html',title: '登录页',template: './src/pages/login.html',  // 以login.html为编译模板chunks: ['login']}), ],devServer: {contentBase: path.join(__dirname, "dist"),      // 默认本地服务器所在的根目录historyApiFallback: true,   // 是否跳转到index.htmlinline: true,    // port: 8083,      // 端口号，默认8080hot: true},
};

src/js/getById.js

function getById(id) {return document.getElementById(id);
}
function getValueById(id) {return document.getElementById(id).value;
}export {getById,getValueById};

src/js/index.js

import {getById} from './getById.js';getById('webContent').innerHTML = 'index - Hello Webpack!!!';

src/js/login.js

import {getById} from './getById.js';getById('webContent').innerHTML = 'login - Hello Webpack!!!';

src/pages/index.html

<!doctype html>
<html><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>首页</title></head><body><div id="webContent"></div></body>
</html>

src/pages/login.html

<!doctype html>
<html><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>登录</title></head><body><div id="webContent"></div></body>
</html>

最终效果

这是自动打开首页,因为配置了historyApiFallback: true,如果要打开login.html,http://localhost:8083/login.html

webpack 4 入门教程一相关推荐

R语言七天入门教程一：配置运行环境
R语言七天入门教程一:配置运行环境一.R语言介绍 1.R语言是什么? 参考:R语言教程-R语言介绍 R 语言是为数学研究工作者设计的一种数学编程语言,主要用于统计分析.绘图.数据挖掘.R语言有丰富的 ...
micropython入门教程-【chocho教程】micropython入门教程一
第一章:初识microPython microPython是什么? 在回答这个问题之前,让我先来了解一下,什么是Python? Python,是一种面向对象的解释型计算机程序设计语言,它是纯粹的自由软 ...
原创 | 全网最实在的docker入门教程一
作者:潘吉祥为什么学习docker 近年来微服务架构真的是非常流行了,作为开发者,即时你没有做过微服务,但肯定谈论过它或者听别人谈论过它.那么我们的docker和微服务之间究竟有着什么联系呢? 众所 ...
微信小程序云开发初学者入门教程一
微信小程序云开发初学者入门教程一(云开发环境搭建) 本教程适合刚刚入门的小白,云开发为开发者提供完整的云端支持,弱化后端和运维概念,无需搭建服务器,使用平台提供的 API 进行核心业务开发,即可实现 ...
无废话SharePoint入门教程一[SharePoint概述]
一.前言听说SharePoint也有一段时间了,可一直处在门外.最近被调到SharePoint实施项目小组,就随着工作一起学习了一下实施与开发.但苦于网上SharePoint入门的东西实在太少,导致 ...
【翻译】Play框架入门教程一：建立项目
简介在这个教程中你会学到用Play框架从头到尾的开发一个真实的Web程序.在这个程序中,我们将使用在一个真实项目中需要的所有技术,来介绍Play框架开发Web程序的实战技巧. 这个教程分为几个独立的 ...
Grunt 入门教程一：开始使用Grunt（翻译自官方教程）
关于Grunt翻译: 用了Grunt一段时间,确实极大提高了前端开发效率,所以决定翻一下官方文档,方便英文基础不太好的童鞋们(本人英文也不怎么样).虽然在github上找到了一个中文的翻译,但是翻译质 ...
白鹭引擎入门教程一（Egret）
1.下载并安装Egret引擎: http://www.egret.com/products/engine.html 2.命令行(Win+R键输入cmd): 有些喜欢用命令行的童鞋,可以通过命令行对白鹭 ...
Electron入门教程一（electron的基础安装等）
一.前言官方文档:https://electronjs.org/docs Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库. Ele ...

webpack 4 入门教程一

webpack 4 入门教程一相关推荐

最新文章

热门文章