webpack学习（入门基础）

2021-10-24 23:27:57

webpack的学习
webpack是什么？
1：加载模块（将JS、sass/less、图片等作为模块来处理使用） 2：进行打包
webpack的优势？
1：webpack以commonJS（JS的规范）的形式写脚本
2：模块化（JS、css、图片等）
3：开发便捷（进行打包、压缩、图片转base64等）
4：扩展性强，插件机制完善

webpack安装：
1：npm方式安装：npm install webpack (若是想将项目依赖写入package.json中，依次执行npm init 和npm install webpack --save--dev,就会在init创建的package.json中看到依赖的模块）
2：npm info webpack //查看webpack的信息
若是需要使用webpack工具，需要下载server：npm install webpack-dev-server --save-dev

webpack小例子：
1、创建index.html如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>webpack学习</title>
</head>
<body>
<script type="text/javascript" src="bundle.js"></script>
</body>
</html>
2、创建入口的JS：entry.js
document.write('It works.')
3、输入打包命令：webpack entry.js bundle.js
4、浏览器打开index.html（会显示：It works.），此时bundle.js也被打包创建成功
5、测试多个JS，创建module.js 和module1.js:
module.js: module.exports = 'It works from module.js.'
module1.js: module.exports = 'My name is webpack!'
修改入口entry.js：
document.write('It works.')
document.write(require('./module1.js'))
document.write(require('./module.js'))
再次执行打包命令：webpack entry.js bundle.js
浏览器打开index.html就会显示：It works.My name is webpack!It works from module.js.
若是修改入口entry.js：
document.write(require('./module1.js'))
document.write(require('./module.js'))
document.write('It works.')
执行打包命令后就会显示：My name is webpack!It works from module.js.It works.
小结：webpack会分析入口文件entry.js，解析包含依赖关系的各个文件，这些文件都会打包到html引入的JS（bundle.js）中。
webpack会给每个模块分配一个唯一的ID，通过这个ID索引访问模块。页面启动的时候，会先执行入口文件entry.js代码的顺序依次加载。

webpack-----loader（各种模块css、图片的处理）
webpack本身只能处理JS模块，若是需要处理其他类型的文件（css、图片之类的），需要用到关键字loader
loader需要通过npm命令安装：npm install css-loader style-loader//css的loader安装

loader可以作为模块和资源之间的转换器,是管道式处理方式，不管最初和中间的形式，
最后返回的必须是javascript，因为是在node环境中执行的。loader是一个函数，接收源文件作为参数，返回转换的结果。
就可以用require来加载任何类型的模块、文件。
需要注意的是在entry.js中引入需要这么写:require("!style!css!./style.css") 执行命令：webpack entry.js bundle.js
require CSS 文件的时候都要写 loader 前缀（!style!css!），也可以这样写：require("./style.css") 执行命令：webpack entry.js bundle.js --module-bind "css=style!css"

webpack 操作除了在命令行操作，还可以通过配置文件来操作。
在工作区间新建一个webpack.config.js，webpack说简单点就是一个配置文件，主要分为三个模块。
entry:入口文件 webpack用哪个文件作为入口（本例子中用的是entry.js）
output:出口文件 webpack处理完成的文件放在哪里（本例子中是bundle.js）
module:模块要用各种不同的模板来处理各种类型的文件（本例子中用的是css）
loaders中test里面包含一个正则，包含需要匹配的文件
loaders是一个数组，包含要处理这些程序的loaders，这里我们用了css和style，注意loaders的处理顺序是从右到左的
先运行css-loader然后是style-loade
如下：
var webpack = require('webpack')
module.exports = {
entry: './entry.js',
output: {
path: __dirname,
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.css$/,
loader: ['style','css']
}
]
},
//还可以在配置文件中添加很多插件的配置，可以是webpack内置的插件也可以通过npm下载的插件。webpack内置插件的配置
plugins: [
new webpack.BannerPlugin('This file is created by qinbb')//在输出文件bundle.js中首行代码就是这句话
]
}

loader 功能
loader 管道：在同一种类型的源文件上，可以同时执行多个 loader ， loader 的执行方式可以类似管道的方式，管道执行的方式是从右到左的方式loader 可以支持同步和异步
loader 可以接收配置参数

loader 可以通过正则表达式或者文件后缀指定特定类型的源文件

插件可以提供给 loader 更多功能

loader 除了做文件转换以外，还可以创建额外的文件

webpack 一些命令：
webpack --progress --colors //环境运行包括进度颜色
webpack --progress --colors --watch//开启监听模式，没有变化的模块会在编译后缓存到内存中，而不会每次都被重新编译
webpack-dev-server --progress --colors //需要在全局和工作项目中都下载该包

webpack --display-error-details//方便出错时能查阅更详尽的信息

$ webpack --config XXX.js   //使用另一份配置文件（比如webpack.config2.js）来打包

$ webpack --watch   //监听变动并自动打包

$ webpack -p    //压缩混淆脚本，这个非常非常重要！

$ webpack -d    //生成map映射文件，告知哪些模块被最终打包到哪里了

//开启webpack-dev-server服务，http://localhost:8080/webpack-dev-server/ 可以浏览项目中的页面和编译后的资源输出，并且通过一个 socket.io 服务实时监听它们的变化并自动刷新页面。
实时监听是有条件的：
1、所有的文件在同一个目录下
2、简单css可以，但是css预编译器sass就做不到实时监控
webpack --display-error-details//打印错误日志

码农公寓

相关文章