目录

一、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调出控制台，输入正确路径

 

 然后进行初始化：npm init

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

会发现多了个json文件

 

 之后输入：

全局安装：

npm i webpack webpack-cli -g

本地安装：

npm i webpack webpack-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-loader
        use: [{
          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-loader
        use: [{
          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-loader
      use: [{
        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-loader
            esModule: 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否则不能生效
                    {
                      // 其他选项
                    },
                  ],
                ],
              },
            },
          },

 进行打包

npm run build 

打包后会发现两个错误原因是less文件中没有把注释给去掉

 所以这里要把less中的注释去掉即可

再次打包：

npm run build 

效果如下： 

这里补充一点，上面忘了说。

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

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

      {
				test: /\.html$/i,
				loader: "html-loader",
			},

记得安装插件

npm install --save-dev html-loader

最后进行打包即可：

 npm run build 

# webpack # vue.js # 前端
Logo
Vue

前往低代码交流专区

更多推荐

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue