少走十年弯路!!!webpack详解

webpack是什么??

        本质上,webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时,它会在内部从一个或多个入口点构建一个 依赖图(dependency graph),然后将你项目中所需的每一个模块组合成一个或多个 bundles,它们均为静态资源,用于展示你的内容。

从 v4.0.0 开始,webpack 可以不用再引入一个配置文件来打包项目,然而,它仍然有着 高度可配置性,可以很好满足你的需求。

1、初始化一个pack.json

npm init -y

 2、下载所需要的模块

        全局安装

npm install -g webpack
npm install - g webpack -cli        

        在项目中下载(局部安装)

 npm install webpack webpack-cli -D

3、新建页面(只新建下图写新建的文件)

少走十年弯路!!!webpack详解_第1张图片4、在下图文件中配置

**webpack.config.js需要下载模块

npm install style-loader -D

npm install css-loader -D

少走十年弯路!!!webpack详解_第2张图片

 **下载完之后打包就可以在命令页面中使用npx webpack打包文件

少走十年弯路!!!webpack详解_第3张图片

**运行完之后 就会出现dist文件

少走十年弯路!!!webpack详解_第4张图片

 5、在pubilc目录下面的index.html运行

少走十年弯路!!!webpack详解_第5张图片

**运行页面  里面数据就会显示

少走十年弯路!!!webpack详解_第6张图片 6、如果再用less模块就要再次配置

npm install less-loader -D//下载less模块

(1)新建less页面

少走十年弯路!!!webpack详解_第7张图片

 (2)再main.js文件引入

少走十年弯路!!!webpack详解_第8张图片

(3)在webpack.config.js文件里面配置less

少走十年弯路!!!webpack详解_第9张图片

 (4)在index.html里面使用并再次打包
少走十年弯路!!!webpack详解_第10张图片少走十年弯路!!!webpack详解_第11张图片(5)、页面就会显示结果

少走十年弯路!!!webpack详解_第12张图片

7、配置sass也是一样

**下载模块 npm install sass-loader sass -D
**然后引入
**在webpack.config.js文件里面配置sass

少走十年弯路!!!webpack详解_第13张图片

**之后打包即可

 8、打包图片方法

(1)在scr目录下面新建image文件用于存放图片

少走十年弯路!!!webpack详解_第14张图片

 (2)css样式中使用

少走十年弯路!!!webpack详解_第15张图片

 (3)在index.html使用

少走十年弯路!!!webpack详解_第16张图片

 (4)在webpack.config.js配置规则

少走十年弯路!!!webpack详解_第17张图片

(5) 再次打包npx webpack

**运行结果就会显示两张照片

少走十年弯路!!!webpack详解_第18张图片

(6)可看到大于10k的图片和小于10k的图片打包后的位置
少走十年弯路!!!webpack详解_第19张图片 (7)修改图片路径

**使用generator

少走十年弯路!!!webpack详解_第20张图片

再次运行之后文件路径就会变成下图

少走十年弯路!!!webpack详解_第21张图片

9、配置插件HtmlWebpackPlugin

(1)先下载插件npm install html-webpack-plugin -D
 (2)配置plugins

少走十年弯路!!!webpack详解_第22张图片

(3) 在src目录下新建index.html文件

少走十年弯路!!!webpack详解_第23张图片

(4)再次打包就会在dist文件多一个index.html

少走十年弯路!!!webpack详解_第24张图片

 10、配置服务器devServer

(1)先下载模块npm install webpack-dev-server -D
  (2)配置服务

少走十年弯路!!!webpack详解_第25张图片

 (3)在命令提示符中输入npx webpack serve就会打开服务器

少走十年弯路!!!webpack详解_第26张图片

 11、提取css文件

(1)首先就是要下载模块 npm install --save-dev mini-css-extract-plugin

少走十年弯路!!!webpack详解_第27张图片

(2)配置规则

少走十年弯路!!!webpack详解_第28张图片

(3)再次打包文件中可看到css已经提取出来了

少走十年弯路!!!webpack详解_第29张图片

你可能感兴趣的:(webpack,前端)