Webpack构建前端项目

1810

1.创建项目

安装nodejs，使用npm创建项目

mkdir projectname //projectname为项目名称，在此我们先使用mkdir命令创建项目目录
cd projectname //进入目录
npm init -y //创建项目
复制代码

当然，你也可以直接在磁盘中通过鼠标可视化的创建好目录，然后再进入目录中切换到dos命令窗口创建项目,创建好项目之后会在目录中生成package.json文件

2.安装webpack和webpack-cli

强列建议使用yarn来安装项目依赖包，首先安装yarn工具,通过以下命令:

npm install -g yarn
复制代码

安装webpack工具和webpack-cli命令行指令包：

yarn add webpack webpack-cli --dev
复制代码

通过–dev参数，指定将依赖包安装到devDependencies

dependencies和devDependencies的区别：

  • devDependencies用于本地环境开发时候。

  • dependencies用户发布环境

devDependencies是只会在开发环境下依赖的模块，生产环境不会被打入包内。通过NODE_ENV=developement或NODE_ENV=production指定开发还是生产环境。而dependencies依赖的包不仅开发环境能使用，生产环境也能使用。

3. 配置入口文件

在目录中新建src目录，并创建入口文件index.js

//index.js
alert('hellow');
复制代码

修改package.json文件，将入口文件指定为src/index.js,如下：

{
  "name": "frontend",
  "version": "1.0.0",
  "description": "",
  "main": "src/index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
  },
  "devDependencies": {
    "webpack": "^5.40.0",
    "webpack-cli": "^4.7.2"
  }
}

复制代码

4.配置webpack

在项目目录创建webpack.config.js配置文件，如下：

module.exports = {
    mode:"development"
}
复制代码

5.运行webpack编译构建项目

webpack
复制代码

执行完成上述命令后会在根目录生成dist目录并生成一个打包后的main.js文件，我们在src目录中新建index.html文件并引入dist目录下的main.js，运行此文件即可看到弹出hellow。

6. 配置scripts

通过配置scripts来实现自定义打包指令，我们将webpack配置到package.json的scripts中：

{
  "name": "frontend",
  "version": "1.0.0",
  "description": "",
  "main": "src/index.js",
  "scripts": {
    "dev":"webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.6.0"
  },
  "devDependencies": {
    "webpack": "^5.40.0",
    "webpack-cli": "^4.7.2"
  }
}

复制代码

之后我们即可以通过yarn dev或者npm dev来运行webpack构建项目。

7.配置webpack入口文件与输出文件

在webpack 4.x中默认会将src/index.js 作为默认的打包入口js文件,将dist/main.js 作为默认的打包输出js文件,我们可以通过配置webpack.config.js来修改

const path = require("path");  //导入node.js中专门操作路径的模块
module.exports = {
    mode:"development",
    entry: path.join(__dirname,"./src/index.js"),//设置入口文件路径
    output:{
       //设置输出文件路径
       path:path.join(__dirname,"./dist"),
       //设置输出文件名称
       filename:"bundle.js"
    }
}
复制代码

8.安装第三方包

  • 安装jquery

    yarn add jquery@last //在这里我们选择1.12.4版本
复制代码

  • 安装bootstrap

    yarn add bootstrap@last //在这里我们选择3.4.1版本
复制代码

在src目录创建js目录来放置我们的脚本文件,并在js目录中创建app.js文件来使用jquery与bootstrap

$(function(){
    $("li:odd").css("background","cyan");
    $("li:odd").css("background","pink");
});
复制代码

安装好jquery和bootstrap之后就可以使用了，打开src/index.js引入：

window.$ = window.jQuery = require('jquery');
require('bootstrap');
require('./js/app.js'); //引入app.js
复制代码

运行yarn dev构建项目

9.配置本地热启动服务器

  • 安装webpack-dev-server插件,实现自动打包与启动本地服务器
yarn add webpack-dev-server --dev
复制代码

修改package.json的scripts中的dev指令，如下：

{
  "name": "frontend",
  "version": "1.0.0",
  "description": "",
  "main": "src/index.js",
  "scripts": {
    "dev": "webpack-dev-server",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "bootstrap": "^3.4.1",
    "jquery": "^1.12.4"
  },
  "devDependencies": {
    "webpack": "^5.40.0",
    "webpack-cli": "^4.7.2"
  }
}
复制代码

将src/index.html中的脚本引用路径修改为”/buldle.js”

  • 配置默认预览页面,安装html-webpack-plugin插件
yarn add html-webpack-plugin@last --dev //安装4.x的版本，3.x的版本与webpack-cli4.x不兼容
复制代码

使用html-webpack-plugin 可以生成一个预览页面,修改webpack.config.js文件，如下：

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    mode:"development",
    entry: path.join(__dirname,"./src/index.js"),//设置入口文件路径
    output:{
       //设置输出文件路径
       path:path.join(__dirname,"./dist"),
       //设置输出文件名称
       filename:"bundle.js"
    },
    devServer: {
        // 本地服务器代理
        compress: true,
        port: 8080, // 配置端口
        hot: true, // 配置热更新
    },
    plugins:[
        new HtmlWebpackPlugin({
            //设置生成预览页面的模板文件
            template:"./src/index.html",
            //设置生成的预览页面名称,该文件存在于内存中,在目录中不显示
            filename:"index.html"
        })
    ]
}
复制代码

运行yarn dev,浏览器中访问http://localhost:8080地址,查看自动打包效果

10.配置webpack加载器

默认情况下webpack只能打包js文件，其它文件需要安装相应的加载器才能进行打包，比如css\less\sass等，前端的项目源码一般不直接使用css,基本上都是使用sass或less进行编码然后通过加载器来打包成css

  • 打包处理css文件

处理css需要安装css-loader和style-loader加载器

yarn add css-loader --dev
复制代码

配置webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    mode:"development",
    entry: path.join(__dirname,"./src/index.js"),//设置入口文件路径
    output:{
       //设置输出文件路径
       path:path.join(__dirname,"./dist"),
       //设置输出文件名称
       filename:"bundle.js"
    },
    plugins:[
        new HtmlWebpackPlugin({
            //设置生成预览页面的模板文件
            template:"./src/index.html",
            //设置生成的预览页面名称,该文件存在于内存中,在目录中不显示
            filename:"index.html"
        })
    ],
    module: {
		rules: [
			{ 
                //test设置需要匹配的文件类型，支持正则
                test: /\.css$/,
                //use表示该文件类型需要调用的loader加载器
                use: ['css-loader'] 
            }
		]
	}
}
复制代码
  • 打包处理less

处理less需要安装less和less-loader加载器

yarn add less-loader less --dev
复制代码

修改webpack.config.js,如下

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    mode:"development",
    entry: path.join(__dirname,"./src/index.js"),//设置入口文件路径
    output:{
       //设置输出文件路径
       path:path.join(__dirname,"./dist"),
       //设置输出文件名称
       filename:"bundle.js"
    },
    plugins:[
        new HtmlWebpackPlugin({
            //设置生成预览页面的模板文件
            template:"./src/index.html",
            //设置生成的预览页面名称,该文件存在于内存中,在目录中不显示
            filename:"index.html"
        })
    ],
    module: {
		rules: [
			{ test: /\.css$/,use: ['css-loader'] }, //配置css加载器
			{ test: /\.less$/,use: ['css-loader','less-loader'] } //配置less加载器
		]
	}
}
复制代码
  • 打包处理图片与字体

webpack5允许应用使用资源文件（图片，字体等)而不需要配置额外的loader,不需要再安装url-loader和file-loader

yarn add url-loader file-loader --dev
复制代码

修改webpack.config.js,如下

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    mode:"development",
    entry: path.join(__dirname,"./src/index.js"),//设置入口文件路径
    output:{
       //设置输出文件路径
       path:path.join(__dirname,"./dist"),
       //设置输出文件名称
       filename:"bundle.js"
    },
    plugins:[
        new HtmlWebpackPlugin({
            //设置生成预览页面的模板文件
            template:"./src/index.html",
            //设置生成的预览页面名称,该文件存在于内存中,在目录中不显示
            filename:"index.html"
        })
    ],
    module: {
		rules: [
			{ test: /\.css$/,use: ['css-loader'] }, //配置css加载器
			{ test: /\.less$/,use: ['css-loader','less-loader'] }, //配置less加载器
			{
          test: /\.ttf|eot|svg|woff|woff2$/,
          type: "asset/resource",
          generator: {
              // 输出文件位置以及文件名
              filename: "fonts/[name][ext]"
          }
      }, 
      {
          test: /\.jpg|png|gif|bmp$/,
          type: "asset/resource",
          generator: {
              // 输出文件位置以及文件名
              filename: "images/[name][ext]"
          },
          parser: {
              dataUrlCondition: {
                  maxSize: 10 * 1024 //超过10kb不转base64
              }
          }
      },
		]
	}
}
复制代码
  • 打包处理高级js文件

如果项目中使用了Es6等高级js语法则需要使用babel系列的扩展包来进行编译处理

1.安装babel转换器

yarn add babel-loader @babel/core @babel/runtime --dev
复制代码

2.安装babel语法插件包

yarn add @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties --dev
复制代码

在项目根目录创建并配置babel.config.js文件

module.exports = {
	presets:["@babel/preset-env"],
	plugins:[ "@babel/plugin-transform-runtime", "@babel/plugin-proposal-class-properties" ]
}
复制代码

配置webpack.config.js支持babel转换

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    mode:"development",
    entry: path.join(__dirname,"./src/index.js"),//设置入口文件路径
    output:{
       //设置输出文件路径
       path:path.join(__dirname,"./dist"),
       //设置输出文件名称
       filename:"bundle.js"
    },
    plugins:[
        new HtmlWebpackPlugin({
            //设置生成预览页面的模板文件
            template:"./src/index.html",
            //设置生成的预览页面名称,该文件存在于内存中,在目录中不显示
            filename:"index.html"
        })
    ],
    module: {
		rules: [
			{ test: /\.css$/,use: ['css-loader'] }, //配置css加载器
			{ test: /\.less$/,use: ['css-loader','less-loader'] }, //配置less加载器
			{
          test: /\.ttf|eot|svg|woff|woff2$/,
          type: "asset/resource",
          generator: {
              // 输出文件位置以及文件名
              filename: "fonts/[name][ext]"
          }
      }, 
      {
          test: /\.jpg|png|gif|bmp$/,
          type: "asset/resource",
          generator: {
              // 输出文件位置以及文件名
              filename: "images/[name][ext]"
          },
          parser: {
              dataUrlCondition: {
                  maxSize: 10 * 1024 //超过10kb不转base64
              }
          }
      },
			{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
		]
	}
}
复制代码

11.提取CSS文件及设置字体图片输出目录

经过以上的配置，有没有发现我们的css文件并没有被抽取为单独的文件，所以我们需要使用MiniCssExtractPlugin插件来抽取CSS并保存为独立的文件

yarn add mini-css-extract-plugin --dev
复制代码

配置webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    mode:"development",
    entry: path.join(__dirname,"./src/index.js"),//设置入口文件路径
    output:{
       //设置输出文件路径
       path:path.join(__dirname,"./dist"),
       //设置输出文件名称
       filename:"bundle.js"
    },
    plugins:[
        //抽取css为独立文件并生成到dist/css目录
        new MiniCssExtractPlugin({filename: "./css/[name].css"}),
        new HtmlWebpackPlugin({
            //设置生成预览页面的模板文件
            template:"./src/index.html",
            //设置生成的预览页面名称,该文件存在于内存中,在目录中不显示
            filename:"index.html"
        })
    ],
    module: {
		rules: [
			{ test: /\.css$/,use: [MiniCssExtractPlugin.loader,'css-loader'] },
			{ test: /\.less$/,use: [MiniCssExtractPlugin.loader,'css-loader','less-loader'] },
      {
          test: /\.ttf|eot|svg|woff|woff2$/,
          type: "asset/resource",
          generator: {
              // 输出文件位置以及文件名
              filename: "fonts/[name][ext]"
          }
      }, 
      {
          test: /\.jpg|png|gif|bmp$/,
          type: "asset/resource",
          generator: {
              // 输出文件位置以及文件名
              filename: "images/[name][ext]"
          },
          parser: {
              dataUrlCondition: {
                  maxSize: 10 * 1024 //超过10kb不转base64
              }
          }
      },
    ]
    }
}
复制代码

12.清理dist目录

每次打包生成后会在dist目录产生很多文件，为了避免冗余文件，我们需要在生成前先清理dist目录，所以我们需要使用CleanWebpackPlugin插件来在打包时进行自动清理：

yarn add clean-webpack-plugin --dev
复制代码

配置webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
    mode:"development",
    entry: path.join(__dirname,"./src/index.js"),//设置入口文件路径
    output:{
       //设置输出文件路径
       path:path.join(__dirname,"./dist"),
       //设置输出文件名称
       filename:"js/[name].js"
    },
    plugins:[
        //抽取css为独立文件并生成到dist/css目录
        new MiniCssExtractPlugin({filename: "./css/[name].css"}),
        new HtmlWebpackPlugin({
            //设置生成预览页面的模板文件
            template:"./src/index.html",
            //设置生成的预览页面名称,该文件存在于内存中,在目录中不显示
            filename:"index.html"
        }),
        new CleanWebpackPlugin(),//清理构建
    ],
    module: {
    rules: [
      { test: /\.css$/,use: [MiniCssExtractPlugin.loader,'css-loader'] },
      { test: /\.less$/,use: [MiniCssExtractPlugin.loader,'css-loader','less-loader'] },
      {
          test: /\.ttf|eot|svg|woff|woff2$/,
          type: "asset/resource",
          generator: {
              // 输出文件位置以及文件名
              filename: "fonts/[name][ext]"
          }
      }, 
      {
          test: /\.jpg|png|gif|bmp$/,
          type: "asset/resource",
          generator: {
              // 输出文件位置以及文件名
              filename: "images/[name][ext]"
          },
          parser: {
              dataUrlCondition: {
                  maxSize: 10 * 1024 //超过10kb不转base64
              }
          }
      },
    ]
    }
}
复制代码

12.多页面项目配置

在我们日常的项目开发中，一个项目是由多个页面组成的，那么我们如何对webpack配置以实现输出不同的页面生成单独的js和css文件呢？下面我们来进行多页面的配置。

  • 新建页面src/about.html
  • 新建脚本src/js/about.js
  • 新建样式src/less/about.less

配置webpack.config.js实现多入口

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
    mode:"development",
    entry: {
        'index': path.join(__dirname,"./src/index.js"),
        'about': path.join(__dirname,"./src/js/about.js")
    },//设置入口文件路径
    output:{
       //设置输出文件路径
       path:path.join(__dirname,"./dist"),
       //设置输出文件名称
       filename:"js/[name].js"
    },
    devServer: {
        // 本地服务器代理
        compress: true,
        port: 8080, // 配置端口
        hot: true, // 配置热更新
    },
    plugins:[
        new MiniCssExtractPlugin({filename: "./css/[name].css"}),
        new HtmlWebpackPlugin({
            template:"./src/index.html",
            filename:"index.html"
        }),
        new HtmlWebpackPlugin({
            template:"./src/about.html",
            filename:"about.html"
        }),
        new CleanWebpackPlugin(),
    ],
    module: {
    rules: [
      { test: /\.css$/,use: [MiniCssExtractPlugin.loader,'css-loader'] },
      { test: /\.less$/,use: [MiniCssExtractPlugin.loader,'css-loader','less-loader'] },
      {
          test: /\.ttf|eot|svg|woff|woff2$/,
          type: "asset/resource",
          generator: {
              // 输出文件位置以及文件名
              filename: "fonts/[name][ext]"
          }
      }, 
      {
          test: /\.jpg|png|gif|bmp$/,
          type: "asset/resource",
          generator: {
              // 输出文件位置以及文件名
              filename: "images/[name][ext]"
          },
          parser: {
              dataUrlCondition: {
                  maxSize: 10 * 1024 //超过10kb不转base64
              }
          }
      },
      { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
    ]
    }
}
复制代码

12.发布项目

配置package.json在scripts中添加发布命令

"scripts":{
	"dev":"webpack-dev-server",
	"build":"npx webpack"
}
复制代码

执行yarn build即可打包发布项目

© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
前端
喜欢就支持一下吧
点赞0 分享
AI-robot的头像-一一网
asgbookphp ‘index.php’ 跨站脚本攻击漏洞-一一网
asgbookphp ‘index.php’ 跨站脚本攻击漏洞
asgbookphp ‘index.php’ 跨站脚本攻击漏洞
14年前 2.6W+
机器学习之随机森林回归篇（RandomForestRegressor）-一一网
机器学习之随机森林回归篇（RandomForestRegressor）
机器学习之随机森林回归篇（RandomForestRegressor）
4年前 4202
详解数仓中的数据分层：ODS、DWD、DWM、DWS、ADS-一一网
详解数仓中的数据分层：ODS、DWD、DWM、DWS、ADS
详解数仓中的数据分层：ODS、DWD、DWM、DWS、ADS
4年前 3895
DZCP Clanportal ＇Index.PHP＇任意文件上载漏洞-一一网
DZCP Clanportal ＇Index.PHP＇任意文件上载漏洞
DZCP Clanportal ＇Index.PHP＇任意文件上载漏洞
19年前 3842
Wireshark之抓包文件保存-一一网
Wireshark之抓包文件保存
Wireshark之抓包文件保存
4年前 3406
支付宝生活号H5接入支付宝支付流程-一一网
支付宝生活号H5接入支付宝支付流程
支付宝生活号H5接入支付宝支付流程
3年前 3135
相关推荐
支付宝生活号H5接入支付宝支付流程-一一网
支付宝生活号H5接入支付宝支付流程
支付宝生活号H5接入支付宝支付流程
3年前 3135
手摸手教你实现vue的动态路由（addRoute版）-一一网
手摸手教你实现vue的动态路由（addRoute版）
手摸手教你实现vue的动态路由（addRoute版）
4年前 3118
Unity实用功能之使用TextMeshPro组件-一一网
Unity实用功能之使用TextMeshPro组件
Unity实用功能之使用TextMeshPro组件
4年前 3062
vue 项目运行报错：npm ERR! This is probably not a problem with npm. There is likely …-一一网
vue 项目运行报错：npm ERR! This is probably not a problem with npm. There is likely …
vue 项目运行报错：npm ERR! This is probably not a problem with npm. There is likely …...
4年前 2847
Windi CSS 在 Vue3 + Vite 项目中的使用-一一网
Windi CSS 在 Vue3 + Vite 项目中的使用
Windi CSS 在 Vue3 + Vite 项目中的使用
3年前 2728
vue3 使用 qrcode.vue 生成二维码-一一网
vue3 使用 qrcode.vue 生成二维码
vue3 使用 qrcode.vue 生成二维码
4年前 2621
搜索
开启精彩搜索
世界，您好！-一一网
3.7W+人已阅读
世界，您好！
TOP1
番茄社区无限观看+付费视频破解教程-一一网
番茄社区无限观看+付费视频破解教程
5年前3.2W+人已阅读
TOP2
香蕉视频v3.8.3_VIP会员破解教程-一一网
香蕉视频v3.8.3_VIP会员破解教程
5年前3.1W+人已阅读
TOP3
[桜井宁宁]COS和泉纱雾超可爱写真福利集-一一网
密码保护：[桜井宁宁]COS和泉纱雾超可爱写真福利集
5年前2.8W+人已阅读
TOP4
[桜井宁宁] 爆乳奶牛少女cos写真-一一网
密码保护：[桜井宁宁] 爆乳奶牛少女cos写真
5年前2.8W+人已阅读
TOP5
快猫v1.1.7会员破解版_最新快猫vip破解教程大全-一一网
快猫v1.1.7会员破解版_最新快猫vip破解教程大全
5年前2.7W+人已阅读
TOP6
标签云
默认路由黑裙黑群晖麦克风车机鸿蒙系统鸿蒙系统鸿蒙OS鸿蒙驱动软件驱动题库音频剪辑音乐剪辑面板面具静态雷石集群随机阿里云