目录

一、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 

Logo

前往低代码交流专区

更多推荐