Webpack的基本使用

简介: Webpack的基本使用

📘一、什么是Webpack

Webpack是一个静态的模块打包工具,当webpack处理应用程序时,会将所有这些模块打包成一个或多个文件

webpack提供了友好的模块化支持以及代码压缩混淆、处理JS兼容问题、性能优化等强大的功能,提高开发效率和项目的可维护性

静态:开发的过程中,存在于本地的js/css/图片图标字体文件等,就是静态的

动态的内容,webpack没办法处理只能处理静态的

📘二、Webpack安装

首先初始化项目

npm init -y

全局安装webpack

npm install -g webpack webpack-cli

查看版本

webpack -v

📘 三、配置文件:webpack.config.js

在webpack.config.js配置文件中,初始化如下的配置:

  • development模式不会进行代码的压缩与混淆,在开发期间都用development模式,可以提高编译的速度。
  • production模式会减少打包文件的体积,上线阶段使用production模式

📘 四、在package.json配置文件中的scripts节点下,新增dev脚本如下:

📘 五、在终端中运行npm run dev命令,启动 webpack进行项目的打包,打包后会出现dist文件。

📘 六、Webpack 的四个基本的概念

( 一)、 入口(entry)

入口起点(entry point) 指示 webpack 应该使用哪个模块,来作为构建其内部 依赖图(dependency graph) 的开始。进入入口起点后,webpack 会找出有哪些模块和库是入口起点(直接和间接)依赖的。

//单入口文件写法
    // entry: './Webpack/src/index.js',
    //多入口文件写法
    entry: {
        main: './webpack/src/index.js',
        search: './webpack/src/search.js'
    },

(二)、输出(output)

output 属性告诉 webpack 在哪里输出它所创建的 bundle,以及如何命名这些文件。主要输出文件的默认值是 ./dist/main.js,其他生成文件默认放置在 ./dist 文件夹中。

//__dirname目录名  
    output: {
        path: path.resolve(__dirname, 'dist'),
        // filename: 'bundle.js',
        //多个出口
        filename: '[name].js'
    },
const path = require('path');
module.exports = {
    mode: 'development',
    //单入口文件
    // entry: './Webpack/src/index.js',
    //多入口文件
    entry: {
        main: './webpack/src/index.js',
        search: './webpack/src/search.js'
    },
    //__dirname目录名  
    output: {
        path: path.resolve(__dirname, 'dist'),
        // filename: 'bundle.js',
        //多个出口
        filename: '[name].js'
    },
};

(三)、loader

webpack 只能理解 JavaScript 和 JSON 文件,这是 webpack 开箱可用的自带能力。loader 让 webpack 能够去处理其他类型的文件,并将它们转换为有效 模块,以供应用程序使用,以及被添加到依赖图中。简单来说。

在更高层面,在 webpack 的配置中,loader 有两个属性:

  • test 属性,识别出哪些文件会被转换。
  • use 属性,定义出在进行转换时,应该使用哪个 loader。

安装babel-loader步骤

执行以下命令

npm install --save-dev babel-loader@8.1.0 @babel/core@7.11.0 @babel/preset-env@7.11.0

配置Babel

创建一个.babelrc 文件夹,配置

在webpack.config.js中的module对象的rules属性添加一项代码:

module: {
        rules: [{
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader'
        }]
    }

安装core-js

npm install --save-dev core-js@3.6.5

引入core-js

import 'core-js/stable';

打包并测试

npm run dev

(四)、插件(plugin)

loader 用于转换某些类型的模块,而插件则可以用于执行范围更广的任务。包括:打包优化,资源管理,注入环境变量。

想要使用一个插件,你只需要 require() 它,然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。

首先我们安装插件,执行以下命令

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

引入插件

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

配置插件

多页面配置html-webpack-plugin插件

📗七、处理CSS文件

安装css-loader执行以下命令

npm install --save-dev css-loader@4.1.1

📗方法一:通过style的方式引入

安装 style-loader,执行以下命令

npm install --save-dev style-loader@1.2.1

在webpack.config.js文件中配置

📗方法二:通过link的形式引入

安装,执行以下命令

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

在webpack.config.js文件中配置

📗 八、使用file-loader处理CSS文件中的图片

首先我们要知道:如果图片是外部资源,是不需要考虑webpack的,只有本地的图片才被webpack处理

安装file-loader,执行以下命令:

npm install --save-dev file-loader@6.0.0

file-loader的作用:把图片从原来的地方粘贴复制到输出的目录中,然后更改源码的路径

基本配置如下:

📗 九、使用file-withimg-loader处理CSS文件中的图片

安装file-withimg-loader,执行以下命令

npm install --save-dev html-withimg-loader@0.1.16

配置

📗 十、使用file-loader 处理JS中的图片

配置与CSS文件处理图片一样

JS引入图片

📗 十一、使用url-loader处理图片

安装url-loader,执行以下命令

npm install --save-dev url-loader@4.1.0

配置图片的限制大小,输出的格式为base64编码

📗 十二、使用webpack搭建开发环境

执行以下命令

npm install --save-dev webpack-dev-server@3.11.0

在webpack.config.js中进行以下配置

"dev": "webpack-dev-server --open chrome",

运行:npm run dev


相关文章
|
6月前
|
前端开发 JavaScript 搜索推荐
webpack----前端工程化与webpack的基本使用
webpack----前端工程化与webpack的基本使用
|
8月前
|
前端开发 JavaScript
Webpack的基本使用,将html和css文件打包
Webpack的基本使用,将html和css文件打包
|
9月前
|
前端开发
前端学习笔记202303学习笔记第二天-webpack基本使用
前端学习笔记202303学习笔记第二天-webpack基本使用
39 0
前端学习笔记202303学习笔记第二天-webpack基本使用
|
存储 前端开发 JavaScript
【Vue】webpack的基本使用
【Vue】webpack的基本使用
84 0
【Vue】webpack的基本使用
|
资源调度 前端开发 JavaScript
14、webpack的基本使用
14、webpack的基本使用
99 0
|
前端开发
webpack打包文件的基本使用
webpack打包文件的基本使用
|
缓存 资源调度 JavaScript
万字长文解密webpack-基本使用/高级用法/性能优化 你想要的全都有!!!
万字长文解密webpack-基本使用/高级用法/性能优化 你想要的全都有!!!
|
2月前
webpack 使用打包报错 ERROR in node_modules\@types\node\ts4.8\assert.d.ts
webpack 使用打包报错 ERROR in node_modules\@types\node\ts4.8\assert.d.ts
45 0
|
1月前
|
前端开发 JavaScript 开发者
webpack打包机制,构建过程和配置
webpack打包机制,构建过程和配置
11 0
|
1月前
|
资源调度 前端开发 JavaScript
vue - ES6模块化、promise、webpack打包(所在在学的朋友们先看这篇,看了不吃亏)...
vue - ES6模块化、promise、webpack打包(所在在学的朋友们先看这篇,看了不吃亏)...

热门文章

最新文章

相关产品

  • 云迁移中心