【webpack】模块打包机--webpack--基础使用【godDie】

一、什么是webpack? 作用有哪些？

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。

Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。

作用：
1、模块化，让我们可以把复杂的程序细化为小的文件;

2、类似于TypeScript这种在JavaScript基础上拓展的开发语言：使我们能够实现目前版本的JavaScript不能直接使用的特性，并且之后还能转换为JavaScript文件使浏览器可以识别；

3、Scss，less等CSS预处理器

二、webpack与gulp、Grunt的区别

webpack和另外两个并没有太多的可比性，Gulp/Grunt是一种能够优化前端的开发流程的工具，而WebPack是一种模块化的解决方案，
不过Webpack的优点使得Webpack在很多场景下可以替代Gulp/Grunt类的工具。

三、webpack打包流程

webpack是建立在module之上进行打包的
 
css js img 都叫做module模块

原本index.js可能依赖各种js文件，经过打包之后，就变成一个单独的文件（app.js）,凡是匹配test的文件，就使用相对应的loader进行打包

四、webpack基本使用

1、全局安装webpack   npm install webpack -g

2、查看版本号 : webpack -v

3、查看全局安装过哪些模块：npm list -g --depth 0

4、局部安装webpack : npm install webpack --save-dev

5、基础的打包方式 webpack 文件名 生成文件名

温馨提示：webpack4.0以上版本坑比较多，新手建议安装4.0以下版本

　　1、卸载默认： npm uninstall webpack

2、全局安装： npm install [email protected] -g

3、局部安装： npm install [email protected] --save-dev

五、如何打包文件？

1、在当前文件夹下命令行输入npm init -y 生成一个node包

2、局部安装webpack  前提全局已经安装完毕

3、建立webpack.config.js

4、配置webpack.config文件
5、具体操作步骤

引入path模块

写导出模块

搭建项目的工作流程

配置路径

路径配置好之后就可以书写module.exports模块的入口文件和出口文件了

在index .js文件中写一句console.log（11）然后进行打包

4.0之前的打包方式直接在命令行输入webpack

4.0之后不再支持这种打包方式

打包完成后自动增加dist文件夹

六、html-webpack-plugin  插件的使用，有利于快速搭建项目

1、安装：cnpm install html-webpack-plugin

2、引入模块： const htmlWebpackPlugin = require("html-webpack-plugin");

3、在module.exports中的plugins中配置文件

　　plugins:[

　　　　new htmlWebpackPlugin({}) 其中参数是一个对象

　　]

有两个必填参数　　//模板文件

　　　　　　　　template:'index.html',

　　　　　　　　//生成的文件名称

　　　　　　　　filename:"[hash].html"

七、模块与模块之间的关系，配置如何进行打包

css文件打包的顺序是从右至左，从下至上

【webpack】模块打包机--webpack--基础使用 【godDie】

猜你喜欢

【webpack】模块打包机--webpack--基础使用【godDie】