1500字范文 > Vue——10 - webpack打包保姆级教程01——打包js json css less html 背景图片

Vue——10 - webpack打包保姆级教程01——打包js json css less html 背景图片

时间：2019-05-05 05:38:47

一、webpack打包JS文件

1.新建入口文件index.js和mathUtils.js，index.js是依赖于mathUtils.js

2、然后使用webpack命令打包js文件

二、打包JSON文件

第一种打包方法

第二种打包方法：webpack打包

第三种打包方法：创建webpack.config.js

第四种打包方法：使用自定义脚本（script）启动****（重要）

三、打包css文件使用webpack的loader

什么是loader

loader使用

四、对less文件进行打包

1、新建less文件

2、引入less

3、安装less-loader

4、在webpack.config.js中使用less-loader

5、执行npm run build

五、打包背景图片

附：图片转换成base64格式的优缺点

六、打包Font字体样式以及HTML

七、devsever

八、webpack生产环境配置

*九、css兼容性写法

十、html里的img标签里的图片如何打包

一、webpack打包JS文件

注意：一定要先下载Node.js，webpack 必须在 NodeJS 下运行

如未下载则可从Vue——安装@vue/cli(Vue脚手架)的三种方式进行查看并下载

首先呢先随便选个盘创建一个文件夹为webpack（名字可以自己定义），在文件夹中添加两个新文件夹scr以及dist

按住win+r输入cmd调出控制台，输入正确路径

然后进行初始化：npminit

然后一直回车，直到重新出现目录

会发现多了个json文件

之后输入：

全局安装：

npmiwebpackwebpack-cli-g

本地安装：

npmiwebpackwebpack-cli-D

安装完成后会发现目录中多个文件夹

在src文件夹中创建两个新的js文件

1.新建入口文件index.js和mathUtils.js，index.js是`依赖于mathUtils.js`

mathUtils.js代码部分如下：

//1.新建mathUtils.js，用CommonJs规范导出function add(num1,num2) {return num1+num2}function mul(num1,num2) {return num1*num2}module.exports = {add,mul}

index.js代码部分如下：

//2.新建入口js文件index.js 导入mathUtil.js文件，并调用const {add,mul} = require("./mathUtils.js")console.log(add(10,20))console.log(mul(10,10))

完成后看下图：

2、然后使用webpack命令打包js文件

注意：webpack3使用下面的命令！！！

webpack ./src/index.js ./dist/bundle.js

webpack4及以上，使用cmd输入以下命令！！！

webpack ./src/index.js -o ./dist/bundle.js

这里报红，可以换一种写法

找到所在目录，并删除bundle.js文件夹

然后输入以下命令：

如果是开发版就用开发环境：

webpack ./src/index.js -o ./dist --mode=development

如果是用生产环境就使用这串代码：

webpack ./src/index.js -o ./dist --mode=production

!! 我们这里使用生产环境

报绿即可。这样就会发现刚刚删除的地方只有一个main.js文件

这时就可以新建一个页面进行测试了：

在dist文件夹中创建一个index.html页面，把main.js引入即可

运行页面：

即可看到已经成功

二、打包JSON文件

第一种打包方法

例如：在src文件夹中新建一个data.json文件，并对其输入一些json的语法

然后在src文件夹中的index.js里写入

import data from "./data.json"

并打印data ：

console.log(data);

重新打包一下即可：

webpack ./src/index.js -o ./dist --mode=production

此处就已经完成webpack的打包。

第二种打包方法：webpack打包

直接简写成这样也可以打包

webpack可以帮我们打包js文件，只要指定入口文件（index.js）和输出的文件（bundle.js），不管是es6的模块化还是CommonJs的模块化，webpack都可以帮我们打包，还可以帮我们处理模块之间的依赖。

如果觉得--mode=development麻烦可以配置webpack.config.js的时候如下写

第三种打包方法：创建webpack.config.js

在最外层新建一个webpack.config.js文件

写入：

代码如下：

const path = require('path');module.exports = {entry: './src/index.js', //入口文件output: {path: path.resolve(__dirname, 'dist'), //动态获取打包后的文件路径,path.resolve拼接路径filename: 'main.js', //打包后的文件名},mode:'development'}

cmd输入：

webpack

打印效果如下：

第四种打包方法：使用自定义脚本（script）启动****（重要）

这里有两个生产环境

1、npm run dev//开发环境
2、npm run build//生产环境

这里使用生产环境也就是npm run build

在package.json中的scripts中加上

"build": "webpack"

使用npm run build进行打包

npm run build

再次输入：

下面说一下如何打包css文件

三、打包css文件使用webpack的loader

什么是loader

loader是webpack中一个非常核心的概念。

webpack可以将js、图片、css处理打包，但是对于webpack本身是不能处理css、图片、ES6转ES5等。

此时就需要webpack的扩展，使用对应的loader就可以。

loader使用

步骤一：通过npm安装需要使用的loader

步骤二：通过webpack.config.js中的modules关键字下进行配置

大部分loader可以在webpack的官网找到对应的配置。

创建一个css文件：

引入链接：

在cmd中输入命令：

npm run build

安装使用style-loader 以及 css-loader

npm install --save-dev style-loader css-loader

并在配置中添加loader

代码如下：

module: {rules: [{test: /\.css$/,//正则表达式匹配css文件//css-loader只负责css文件加载，不负责解析，要解析需要使用style-loaderuse: [{loader: 'style-loader'}, {loader: 'css-loader'}]//使用loader}]}

这时重新加载命令即可：

webpack使用多个loader是从右往左解析的，所以需要将css-loader放在style-loader右边，先加载后解析。

此时样式成加载解析到DOM元素上。

完整效果：

四、对less文件进行打包

vscode不能直接对less进行解析，如需解析css则去下载插件easy less

1、新建less文件

2、引入less

3、安装less-loader

npm install --save-dev less-loader less

4、在webpack.config.js中使用less-loader

module: {rules: [{test: /\.less$/,//正则表达式匹配css文件//css-loader只负责css文件加载，不负责解析，要解析需要使用style-loaderuse: [{loader: 'style-loader'}, {loader: 'css-loader'}, {loader: 'less-loader'//less文件loader}]//使用loader}]}

如果css和less都需要打包则写下述代码即可：

module: {rules: [{test: [/\.css$/i, /\.less$/], //正则表达式匹配css文件//css-loader只负责css文件加载，不负责解析，要解析需要使用style-loaderuse: [{loader: 'style-loader'}, {loader: 'css-loader'}, {loader: 'less-loader' //less文件loader}] //使用loader//使用loader}]}

也可以写成：

module: {rules: [{test:[ /\.css$/i,/\.less$/],use: ['style-loader', 'css-loader','less-loader'],},],},

如下图：

5、执行npm run build

显示效果

五、打包背景图片

准备工作，准备两张图片，图片大小为一张8KB以下（名称为small.jpg），一张大于8KB（名称为big.jpg），新建一个img文件夹将两张图片放入。

1、这里在src中新建文件夹img，并把图片放在img文件夹中。并创建了一个css文件夹，将之前的css文件放入其中

2、将背景图片引入normal.css文件里：

3、其对应修改为

4、在webpack.config.js中添加以下代码：

{test: /\.(png|svg|jpg|jpeg|gif)$/i,type: 'asset/resource',generator: {filename: 'images/[hash][ext][query]'}//把打包的图片放到images文件夹},

或者

module.exports = {mode: 'development',entry: './src/index.js', //入口文件output: {path: path.resolve(__dirname, 'dist'), //动态获取打包后的文件路径,path.resolve拼接路径filename: 'bundle.js', //打包后的文件名assetModuleFilename: 'images/[hash:8][ext][query]' //把打包的图片放到images文件夹// hash:8是把图片编译为八位数的哈希值},}

这里使用了第一种方法：

再次输入命令

npm run build

这时就已经完成了打包，回到编辑器中查看，会发现多了个打包好的img里面是图片

再次打开index.html，

显示效果如下：

打包完成！

还有一种比较老的方法

安装使用url-loader处理图片

url-loader像 file loader 一样工作，但如果文件小于限制，可以返回data URL。（通常用于处理小图片）

npm install --save-dev url-loader

安装使用file-loader处理大图片

npm install --save-dev file-loader

然后对webpack.confid.js进行配置

{test: /\.(png|jpg|gif)$/i,//匹配png/jpg/gif格式图片use: [{loader: 'url-loader',options: {limit: 8192, //图片小于8KB时候将图片转成base64字符串，大于8KB需要使用file-loaderesModule: false, //解决es6语法不识别 name: 'img/[name].[hash].[ext]',}}],type: 'javascript/auto'}

index.html一定要和下面的 webpack.config.js导出路径一致！！！！

此时还需在src中新建一个index.html页面

然后运行：

npm run build

即可成功

如果图片设置的为8KB以上的图片在dist中添加JS文件夹以及img文件夹

显示效果：

如果为8KB及以下的图片则只会出现一个JS文件，因为把img图片压缩在了JS文件夹下的main.js中

可以看到dist中并没有img文件夹在浏览器中打开会发现图片的格式已经被更改

图片转换成base64格式的优缺点

1. 优点

（1）base64格式的图片是文本格式，占用内存小，转换后的大小比例大概为1/3，降低了资源服务器的消耗；

（2）网页中使用base64格式的图片时，不用再请求服务器调用图片资源，减少了服务器访问次数。

（3）base64编码的字符串，更适合不同平台、不同语言的传输；

（4）算法是编码,不是压缩,编码后只会增加字节数，但是算法简单,几乎不会影响效率，算法可逆,解码很方便,不用于私密信息通信;

（5）解码方便,但毕竟编码了,肉眼还是不能直接看出原始内容;

2. 缺点

（1）base64格式的文本内容较多，存储在数据库中增大了数据库服务器的压力；

（2）网页加载图片虽然不用访问服务器了，但因为base64格式的内容太多，所以加载网页的速度会降低，可能会影响用户的体验。

（3）base64无法缓存，要缓存只能缓存包含base64的文件，比如js或者css，这比直接缓存图片要差很多，而且一般HTML改动比较频繁，所以等同于得不到缓存效益。

下面再说一下打包字体和HTML

六、打包Font字体样式以及HTML

先从阿里巴巴字体图库中下载到本地

阿里巴巴矢量图标库

选择已下载好的图标进行下载到本地

下载完成后有个文件夹

打开过后把框起来的文件放入src中的css文件夹以及新建的fonts文件夹

更改iconfont.css中的路径：

引入文件路径：

在src中添加一个index.html文件（之前忘了说，这里给补上）并写入字体样式以及类名

使用cmd输入以下命令来安装插件

npm install --save-dev html-webpack-plugin

再webpack.config.js中添加以下代码

const HtmlWebpackPlugin = require('html-webpack-plugin');

plugins: [new HtmlWebpackPlugin({template: './src/index.html'})],

打包资源：

{test: /\.(woff|woff2|eot|ttf|otf)$/i,type: 'asset/resource',generator: {filename: 'fonts/[hash][ext][query]'}},

打包完成后如下如所示：

删除dist文件夹中的所有文件或者直接删除dist即可

再次运行

npm run build

完成后会自动生成之前删掉的所有文件

效果如下：

七、devsever

npm install webpack-dev-server --save-dev

devServer: {// 项目构建后路径// contentBase: resolve(__dirname, 'build'),// 启动gzip压缩compress: true,// 端口号port: 3000,// 自动打开浏览器open: true,},mode: 'development'}

运行

npx webpack-dev-server

第一次进行yes以及y

运行结束后会自动为你打开浏览器并进行实时渲染

接下来就可以测试一下更改css样式时浏览器会不会发生变化

这里发现打包完这么多后并没有单独打包css文件夹（如下图），所以接下来将进行生产环境配置

八、webpack生产环境配置

安装

npm install --save-dev mini-css-extract-plugin

const MiniCssExtractPlugin= require('mini-css-extract-plugin')//提取css成单独文件

在plugins中添加

new MiniCssExtractPlugin()

并使用MiniCssExtractPlugin.loader替换use里的'style-loader'，

MiniCssExtractPlugin.loader

运行npm run build

下图中会发现这里有个了css文件，但是并没有css文件夹

这时需在new MiniCssExtractPlugin()中添加以下代码

{filename:'css/build.css' // 创建的文件夹以及css文件的名称})

并且把刚刚的main.css给删除

再次进行打包：

可以看到已经成功创建

打开index.html也会正常显示

*九、css兼容性写法

这里主要是针对浏览器兼容样式的打包，例如（display:-webkit-flex样式），现在一般都支持ie9以上版本，基本用不到这一写法，但还是演示一下

首先先设置一下兼容样式

安装

npm install --save-dev postcss-loader postcss

记住：一定不要不能出现注释，出现注释就会报错

代码如下：

"browserslist":{"development": ["last 1 chrome version","last 1 firefox version","last 1 safari version"],"production": [">0.02%","not dead","not op_mini all"]}

之后在webpack.config.js中添加以下代码

代码如下：

安装：npm install postcss-preset-env

{loader: 'postcss-loader',options: {postcssOptions: {plugins: [['postcss-preset-env', //这个需要安装npm install postcss-preset-env否则不能生效{// 其他选项},],],},},},

进行打包