简单的webpack打包(一)

一、webpack是什么?
webpack是一个现代js引用程序的静态模块打包器;
它的功能是:分析项目结构,找到js模块以及其他一些浏览器不能直接运行的拓展语言(sass,typescript…),并将它们打包为合适的格式以供浏览器使用。
构建:就是将源代码转换成发布线上可执行的js,css,html代码
构建的过程包含:
1)代码转换:TypeScript编译成javascript,less,sass编译陈css等
2)文件优化:能够压缩js,css,HTML代码,压缩合并图片
3)代码分割:能够提取多个页面中的公共代码,提取受聘不需要执行部分的代码,让其异步执行。
4)模块合并:在采用模块化的项目中会有很多个模块和文件,需要构建功能把模块化分类合并成一个文件
5)自动刷新:监听本地源代码的改变,自动重新构建刷新浏览器
6)代码校检:在代码被提交到仓库前需要校检代码是否符合规范以及单元测试是否通过
7)主动发布:更新完代码后自动构建出上线发布代码,并传出给发布系统
构建其实是工程化,自动化思想在前端开发中的体现,把一系列流程交给代码去实现,让代码自动化的执行这一系列复杂的流程。

下面先进行安装webpack:
1、安装webpack4要求node8.5以上
2、安装步骤:
使用cmd(window+R)安装
1)在桌面上创建一个工程 cd 进入文件夹
2)初始化工程
npm init -y
3)局部安装 webpack
npm install --save-dev webpack
或者安装指定版本
npm install --save-dev webpack@版本号
webpack在安装4.0以上版本,还需要安装一个插件 (-cli);
npm install --save-dev webpack-cli;
4)创建webpack的配置文件
webpack.config.js
entry:打包入口文件
output:打包输出文件
例如:
webpack.config.js的内容

index.html中引入我们webpack过来的js,也就是我们的test.js
我们要自己创建一个js文件夹来存放我们会被打包的js,也就是我们的index.js
5)打包
npx webpack --config webpack.config.js --mode development

完成以上操作一个简单的js打包就完成啦

下面是CSS的打包:
首先我们在刚才我们所建的文件夹中加入css文件夹,在里面创建main.css
目的:将css文件打包到test.js中 (需要webpack安装依赖)
css-loader:用于遍历样式,如果发现有import导入的css文件,就会将该css引入进来
style-loader:将样式通过style-loader直接插入到页面的头部
分别要下载两个依赖:
npm install css-loader style-loader --save-dev

然后进行
cmd进行:npx webpack --config webpack.config.js --mode development