本文共 3800 字，大约阅读时间需要 12 分钟。
webpack介绍
webpack : 自动化构建工具(配置,构建,打包)
webpack是使用node.js实现的模块化代码打包器. 可以把需要的模块打包成一个或者多个包.
功能:
- 代码打包器;
- 可以打包所有的样式,图片,js,css预处理器;
- 友好的模块化支持;
- 处理js兼容问题;
- 性能优化;
安装
先安装node.js,再安装webpack (包管理器: year / npm)
-
安装之前要先npm init初始化. (npm init -y)
-
再输入下面命令安装(注意: 不推荐全局安装)
npm install -D webpack webpack-cli
解释:
webpack: webpack代码. 存放的指令调用的功能
webpack-cli: 提供webpack命令,工具, 存放的指令 -
在
package.json中的scripts里面写"start": “./node_modules/.bin/webpack” -
再创建
src文件夹,里面创建index.js随便写点内容. -
再全局的文件夹下建一个
index.htm引入index.js运行看浏览器出效果 -
然后再
npm start出现压缩文件夹dist下的main.js -
接着把index.html引入的路径改为
./dist/main.js
使用
// 查看版本号./node_modules/.bin/webpack -v
打包模块
入口文件:
入口文件就是项目中加载的第一个文件,比如上面的main.js文件,其他文件都是通过import等方式引入的,webpack会从我们指定的入口文件开始分析所有需要依赖的文件,然后打包成一个完整的文件.
打包命令:
webpack ./js/index.js
上面命令会使用webpack默认的一些配置对模块文件进行打包,并把打包后的文件输出到默认创建的./dist目录下,打包后的文件名称默认为main.js.
模块文件打包后,就可以在不支持es6模块语法的浏览器环境下引入使用了.
打包文件分析:
- 把分散的模块文件打包到一个文件中, 不需要外部引入了
- 内置了一个小型模块加载器(类似
requireJS),实现了打包后的代码隔离与引用
打包配置
创建一个webpack.config.js的配置文件来实现打包.
webpack 命令在运行时, 默认会读取运行命令所在的目录下的
webpack.config.js 文件 通常会在项目的根目录下运行命令和创建配置文件.
也可以通过—config选项来指定配置文件路径:
webpack --config ./configs/my_webpack.config.js
配置文件:
module.exports = { // 配置项} 选项目录如下:
/-- /dist - 项目打包后存放目录-- /node_modules - 第三方模块-- /src------ css/------ images/------ js/------ index.js-- webpack.config.js-- package.json
打包:
- ./node_modules/.bin/webpack 要打包文件的路径: 执行webpack命令来对当前项目进行打包
./node_modules/.bin/webpack
注意:在黑窗口里面,写./node_modules/.bin/webpack会报错./不是内部或者外部的指令,要写成反斜杠.\node_modules\.bin\webpack
- 也可以编辑
package.json的scripts来简化输入
// package.json{ ..., "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "hello": "./node_modules/.bin/webpack ./src/a.js", }} 在终端输入npm run hello会打包出来dist文件
注意: scripts中使用test,start,restart,stop命名时,可以再调用时省略run,即直接npm start
核心配置
mode
配置打包出来的文件样式
模式: “production” | “development” | “none”
module.exports = { // production : 默认 压缩版 // development : 未压缩 // none : 空 mode:'production',} entry(入口)
指定打包入口文件,有三种不同的形式: string | object | array
// 一对一: 一个入口,一个打包文件module.exports = { entry:'./src/index.js'} // 多对一: 多个入口,一个打包文件module.exports = { entry:[ './src/index1.js', './src/index2.js', ]} // 多对多: 多个入口,多个打包文件module.exports = { entry:{ 'index1' : './src/index1.js', 'index2' : './src/index2.js', }} output(出口)
打包后的文件位置
const path = require("path")module.exports = { ..., // 打包后的文件位置 output: { // path路径 必须是绝对路径. path: path.resolve(__dirname, "dist"), filename: "bundle.js", filename: "[name].js" }} - 可以指定一个固定的文件名称, 如果是多入口多出口(
entry为对象), 则不能使用单文件出口, 需要使用下面的方式 - 通过
webpack内置的变量占位符 :[name]
深入
在webpack中, 有一个特性: 模块不仅仅只是js文件,webpack可以把任意文件数据作为模块进行处理,包括非js文本 css 图片等等.
import txt from './a.txt';console.log(txt);
但是,webpack默认情况下只能处理js模板, 如果需要处理其他类型的模板,则需要使用它提供的一些其他功能.
执行简要流程
loaders：webpack中核心的内容之一，非 js 类型的模块处理就靠它，不同类型的模块的解析就是依赖不同的loader来实现的plugins：webpack中另外一个核心的内容，它主要是扩展webpack本身的一些功能，它们会运行在各种模块解析完成以后的打包编译阶段，比如对解析后的模块文件进行压缩.
注意:
-
安装webpack之前先安装node.js;
-
安装完node,要先npm init初始化再安装webpack;
-
安装webpack时要注意是全局安装还是局部安装;
-
查看版本号的指令后面要注意有 -v,如果只写前面的指令会报错;
-
在黑窗口里面,写
./node_modules/.bin/webpack会报错./不是内部或者外部的指令,要写成反斜杠.\node_modules\.bin\webpack; -
package.json的scripts来简化输入时使用test,start,restart,stop命名时,可以再调用时省略run,即直接npm start; -
output中打包后的文件位置的path路径必须是绝对路径;
-
webpack默认情况下只能处理js模板;需要提供的其他功能来把任意文件数据作为模块进行处理
总结:
-
webpack 是
自动化构建工具,通俗理解就是代码打包器 -
功能
- 可以打包所有的样式,例如图片,js,等等
- 友好的模块化支持
- 处理js兼容问题
- 性能优化
-
安装指令
npm install -D webpack webpack-cli -
查看版本号
./node_modules/.bin/webpack -v -
打包
./node_modules/.bin/webpack要打包文件的路径package.json的scripts来简化输入,然后在终端npm输出打包- 打包完后会默认创建
./dist目录,文件名默认main.js - 打包配置文件
module.exports = { // 配置项 }
-
mode
-
配置导报出来的文件样式
-
模式: “production” | “development” | “none”
-
-
entry(入口)
-
指定打包入口文件
-
形式:
string | object | array -
配置时有一对一,多对一,多对多
-
-
output(出口)
打包后的文件位置
转载地址：https://blog.csdn.net/ZZZ___jh/article/details/117714511 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！
发表评论
最新留言
关于作者
