01-快速入门webpack模块化打包工具

不及你笑靥如花

已于 2024-05-06 10:46:07 修改

阅读量339

点赞数

分类专栏： webpack 文章标签： vue webpack 前端

于 2021-04-26 10:54:26 首次发布

本文链接：https://blog.csdn.net/qq_43775721/article/details/116143057

版权

webpack 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

快速入门webpack模块化打包工具

一、基本概念
- 1.1、什么是webpack？
- 1.2、webpack与grunt/gulp的区别？
二、webpack安装
- 2.1、node安转
- 2.2、webpack安装
三、webpack基础
四、webpack加载js以外的文件---loader转换
五、常用 plugin
六、webpack搭建本地服务器
七、以上代码的完整webpack.config.js配置及注释
八、package.json配置

一、基本概念

1.1、什么是webpack？

webpack 是一个现代的JavaScript应用的静态模块打包工具.

webpack核心：

处理js之间相关的依赖，就是让我们进行模块化开发，
给webpack扩展对应的loader。要加载css、图片，也包括一些高级的将ES6转成ES5代码，将TypeScript转成ES5代码，将scss、less转成css，将.jsx、.vue文件转成js文件等等转换成可以在浏览器上运行的代码。

在这里插入图片描述

1.2、webpack与grunt/gulp的区别？

runt/gulp更加强调的是前端流程的自动化，模块化不是它的核心。
webpack更加强调模块化开发管理，而文件压缩合并、预处理等功能，是他附带的功能。

二、webpack安装

webpack为了可以正常运行必须依赖node环境，node环境为了正常执行很多代码，必须其中各种依赖的包工具。

2.1、node安转

下载node软件并安装，下载地址 选择自己电脑相应的版本，然后点击下一步下一步安装就行。
在这里插入图片描述

2.2、webpack安装

安装命令，打开cmd并输入npm i webpack -g

在这里插入图片描述

三、webpack基础

3.1、js文件打包

3.1.1、创建文件夹

我的文件目录如下：先暂时用bbb.js代替main.js(入口)
在这里插入图片描述

3.1.2、打包文件

要想把我们所写的模块化静态资源打包成我们引入的静态资源，我们打开cmd并找到我们当前写的文件所在的目录。输入 webpack 打包文件的目录打包到的文件目录
在这里插入图片描述

3.1.3、引入文件

打包完成后，我们就可以把打包后的资源引入文件了。
在这里插入图片描述

3.2、webpack基础文件配置

3.2.1、初试化 node 并下载开发时依赖的 webpack（全局的）

打开我们写的文件所在的cmd

npm init初始化node
npm i webpack@3.6.0 --Save-dev下载开发时依赖的webpack

在这里插入图片描述

3.2.2、webpack.config.js基本配置

webpack.config.js 基本的路径配置如下

在这里插入图片描述
注意：此时我们在终端直接输入webpack 就可以运行文件了,但是我们此时运行的是全局的webpack,一旦我们的项目拷贝给其他人，可能会出现问题，因为一个项目往往依赖特定的 webpack 版本，全局的版本可能很这个项目的 webpack 版本不一致，导出打包出现问题。因此通常一个项目，都有自己局部的webpack，所以我们还需要对其package.json配置。

3.2.3、package.json配置（运行局部的webpack）

我们可以对我们自己的项目下载一个使用npm i webpack@3.6.0 --Save-dev局部的webpack，并通过package.json使用映射到我们的项目webpack。所以我们可以直接使用npm run build打包。
在这里插入图片描述 ### 3.2.4、npx（运行局部的webpack）
npx 是 Node.js 8.2.0版本引入的一个命令行工具，用于执行安装在 node_modules/.bin目录下的可执行文件。它的作用是在不全局安装模块的情况下，直接运行项目中安装的模块的可执行文件。所以可以使用 npx webpack来执行项目中安装的webpack模块中的 webpack 命令。

四、webpack加载js以外的文件—loader转换

给webpack扩展对应的loader 。loader主要用于转换某些类型的模块，它是一个转换器。转换css、图片，也包括一些高级的将ES6转成ES5代码，将TypeScript转成ES5代码，将scss、less转成css，将.jsx、.vue文件转成js文件等等转换成可以在浏览器上运行的代码。更多详情请点击

4.1、转换css 文件

4.1.1、安装

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

在这里插入图片描述

4.1.2、配置webpack.config.js

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

在这里插入图片描述

4.1.3、创建css文件，并引入到我们入口的js中

在这里插入图片描述
以上就是我们的基本步骤，接下来运行即可：

在这里插入图片描述

4.2、转换图片

4.2.1、导入图片并安装

安装命令npm install --save-dev url-loader
在这里插入图片描述

4.1.2、配置 webpack.config.js 并运行报错 Module build failed: Error: Cannot find module ‘file-loader’

	 module: {
        rules: [{
                //css-loader只负责将css文件进行加载
                //ts-loader负责将样式添加到DOM中
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }
        ]
    }

在这里插入图片描述
这里的错误时由于limit的限制导致的，当加载的图片，大于limit时，需要使用file-loader模块进行加载，所以我们还需要安装npm install --save-dev file-loader

此时我们去运行文件时，还会报错，错误如下

4.1.3、解决报错Module build failed: TypeError [ERR_INVALID_ARG_TYPE]: The “from” argument

在这里插入图片描述
这里报错是因为我的webpack版本是3.6.0，但是file-loader版本是6.2.0，因为我们需要安装旧版本file-loader。比如我安装的就是npm install file-loader@4.0.0 --save-dev

4.1.4 webpack运行没有问题，但图片资源显示未找到

在这里插入图片描述
要想解决这个问题，我们必须必须去配置webpack.config.js中图片的路径，在url的配置对象中加入如下代码

name: 'img/[name].[hash:8].[ext]'

img:文件夹
[name]:name变量，即原来图片的名字
[hash:8]:8位数的哈希值，为了确保图片命名不重复
[ext]:图片继承的类型，即图片的扩展名

注意：这里还有一个问题，就是我们img的存放位置也变了，所以我们还需要配置webpack.config.js中出口的路径

 publicPath: 'dist/' //涉及到url的时候，都会自动给其加上对应的路径

完整的配置如下：

const path = require('path')

module.exports = {
    entry: './src/main.js', //打包文件的入口文件
    output: { //打包到的文件路径
        //dirname是node提供的全局变量，保存当前文件所在路径
        path: path.resolve(__dirname, 'dist'), //打包到的文件路径，注意这里是绝对路径。
        filename: 'bundle.js', //打包到的文件名
        publicPath: 'dist/' //涉及到url的时候，都会自动给其加上对应的路径
    },
    module: {
        rules: [{
                test: /\.(png|jpg|gif|jpeg)$/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        //当加载的图片，小于limit时，会将图片编译成base64字符串形式
                        //当加载的图片，大于limit时，需要使用file-loader模块进行加载
                        limit: 8192,
                        name: 'img/[name].[hash:8].[ext]'
                    }
                }]
            }
        ]
    }
}

在这里插入图片描述

4.3、将 es6 转换成所有浏览器支持的 es5

4.3.1 安装

如果希望将ES6的语法转成ES5，那么就需要使用babel。而在webpack中，我们直接使用babel对应的loader就可以了。即打开 cmd 输入 npm install --save-dev babel-loader@7 babel-core babel-preset-es2015
在这里插入图片描述

4.3.2 配置 webpack.config.js 并运行

	 module: {
        rules: [{
                test: /\.js$/,
                // exclude: 排除
                // include: 包含
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['es2015']
                    }
                }
            }
        ]
    }

在这里插入图片描述

五、常用 plugin

webpack 中的插件，就是对webpack现有功能的各种扩展，比如打包优化，文件压缩等等。

plugin的使用过程：

通过npm安装需要使用的plugins(某些webpack已经内置的插件不需要安装)
在webpack.config.js中的plugins中配置插件。

5.1、添加版权的Plugin

添加版权名字叫BannerPlugin—webpack自带的插件。但我需要配置 webpack.config.js

 plugins: [
        new webpack.BannerPlugin('最终版权归君莫笑所有')
    ]

在这里插入图片描述

5.2、打包html的Plugin

在真实发布项目时，发布的是dist文件夹中的内容，但是dist文件夹中如果没有index.html文件，那么打包的js等文件也就没有意义了。这个时候就可以使用 HtmlWebpackPlugin 插件。该插件可以帮我们完成以下事情：

自动生成一个index.html文件，可以指定模板来生成
将打包的js文件，自动通过script标签插入到body中

5.2.1、安装并配置 webpack.config.js

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

在这里插入图片描述

配置 webpack.config.js

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

plugins: [
        new htmlWebpackPlugin({
            template: 'index.html'
        })
    ]

5.2.2、运行

在这里插入图片描述

5.3、js压缩的Plugin

去掉js的空格、回车、换行之类的确保我们的js所占空间更小

5.3.1、安装并配置 webpack.config.js

安装第三方的插件uglifyjs-webpack-plugin，并且版本号指定1.1.1，和CLI2保持一致
npm install uglifyjs-webpack-plugin@1.1.1 --save-dev
在这里插入图片描述
配置 webpack.config.js

  const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')

  plugins: [
        new UglifyjsWebpackPlugin()
    ]

5.3.2、运行

在这里插入图片描述

六、webpack搭建本地服务器

webpack提供了一个可选的本地开发服务器，这个本地服务器基于node.js搭建，内部使用express框架，可以实现我们想要的让浏览器自动刷新显示我们修改后的结果。

6.1、安装

npm install --save-dev webpack-dev-server@2.9.1
在这里插入图片描述

6.2、配置 webpack.config.js

devServer: {
    contentBase: './dist',
    inline: true
  }

contentBase：为哪一个文件夹提供本地服务，默认是根文件夹，我们这里要填写./dist
port：端口号
inline：页面实时刷新
historyApiFallback：在SPA页面中，依赖HTML5的history模式

在这里插入图片描述

6.3、解决报错 webpack-dev-server : 无法将“webpack-dev-server”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。

配置：package.json 中的 "scripts"

"scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "webpack", 
        "dev": "webpack-dev-server --open"
    },

其中：build代表最后打包的命令，dev代表开发时的命令（–open表示自动打开）

6.4、运行

我们配置完毕，可以在开发中直接运行npm rn dev
在这里插入图片描述

七、以上代码的完整webpack.config.js配置及注释

const HtmlWebpackPlugin = require('html-webpack-plugin') //打包html
const path = require('path')
const webpack = require('webpack')
const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin') //压缩js

module.exports = {
    //出口
    entry: './src/main.js', //打包文件的入口文件
    //入口
    output: { //打包到的文件路径
        //dirname是node提供的全局变量，保存当前文件所在路径
        path: path.resolve(__dirname, 'dist'), //打包到的文件路径，注意这里是绝对路径。
        filename: 'bundle.js', //打包到的文件名
        // publicPath: 'dist/'
    },
    //loader加载
    module: {
        rules: [{
                //css-loader只负责将css文件进行加载
                //ts-loader负责将样式添加到DOM中
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.(png|jpg|gif|jpeg)$/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        //当加载的图片，小于limit时，会将图片编译成base64字符串形式
                        //当加载的图片，大于limit时，需要使用file-loader模块进行加载
                        limit: 8192,
                        name: 'img/[name].[hash:8].[ext]'
                    }
                }]
            }, {
                test: /\.js$/,
                // exclude: 排除
                // include: 包含
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['es2015']
                    }
                }
            }
        ]
    },
    //插件
    plugins: [
        new webpack.BannerPlugin('最终版权归aaa所有'),
        new HtmlWebpackPlugin({
            template: 'index.html'
        }),
        new UglifyjsWebpackPlugin()
    ],
    //服务器
    devServer: {
        contentBase: './dist',
        inline: true
    }
}

八、package.json配置

{
    "name": "webpack",
    "version": "1.0.0",
    "description": "",
    "main": "webpack.config.js",
    "dependencies": {
        "css-loader": "^3.6.0",
        "style-loader": "^2.0.0",
        "webpack": "^3.6.0"
    },
    "devDependencies": {
        "babel-core": "^6.26.3",
        "babel-loader": "^7.1.5",
        "babel-preset-es2015": "^6.24.1",
        "file-loader": "^4.0.0",
        "html-webpack-plugin": "^3.2.0",
        "uglifyjs-webpack-plugin": "^1.1.1",
        "url-loader": "^4.1.1",
        "webpack-dev-server": "^2.11.5"
    },
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "webpack",
        "dev": "webpack-dev-server --open"
    },
    "author": "君莫笑",
    "license": "ISC"
}

不及你笑靥如花

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
01-快速入门webpack模块化打包工具

快速入门webpack模块化打包工具一、基本概念1.1、什么是webpack？1.2、webpackg与runt/gulp的区别？二、webpack安装2.1、node安转2.2、webpack安装三、webpack基础3.1、初识webpack3.1.1、创建文件夹3.1.2、打包文件3.1.3、引入文件一、基本概念1.1、什么是webpack？        webpack 是一个现代的JavaScript应用的静态模块打包工具.&nb
复制链接

扫一扫