webpack打包教程

一、webpack环境配置

    1. 安装node
      node官网地址: https://nodejs.org/zh-cn/
  2. 创建package.json文件
    命令：npm init
  3. 安装webpack
    npm install --save-dev webpack
    npm install --save-dev webpack-cli

全局安装：
npm install --global webpack webpack-cli

  1. 打包
    默认entry入口 src/index.js
    默认output出口 dist/main.js

打包模式：
webpack --mode development
webpack --mode production

二、配置webpack.config.js

  1. 新建一个webpack.config.js
  2. 配置入口entry(所需打包的文件路径)
  3. 配置出口output

（1）path指文件打包后的存放路径
（2）path.resolve()方法将路径或路径片段的序列处理成绝对路径
（3）__dirname 表示当前文件所在的目录的绝对路径
（4）filename是打包后文件的名称

三、入口entry和出口output进阶用法

  1. 入口entry

（1）单入口

单文件：
例如： entry：‘./src/index.js’

多文件：
在你想要多个依赖文件一起注入，并且将它们的依赖导向到一个“chunk”时，传入数组的方式就很有用。

例如：entry：[‘./src/index.js’,‘./src/index2.js’,.......]

（2）多入口

例如：
entry:{
pageOne: ‘./src/pageOne/index.js‘,
pageTwo: ‘./src/pageTwo/index.js‘,
pageThree: ‘./src/pageThree/index.js‘
}

  1. 出口output

（1）单出口

output: {
path: path.resolve(__dirname, ‘dist‘),
filename: ‘bundle.js‘
}

（2）多出口

output：{
path:path.resolve(__dirname,‘dist‘),
filename:‘[name].js‘
}

四、配置webpack-dev-server

  1. 了解webpack-dev-server

webpack-dev-server是webpack官方提供的一个小型Express服务器。使用它可以为webpack打包生成的资源文件提供web服务。

webpack-dev-server 主要提供两个功能：
（1）为静态文件提供服务
（2）自动刷新和热替换(HMR)

  1. 安装webpack-dev-server

    npm install --save-dev webpack-dev-server

  2. 配置webpack.config.js文件

devServer:{
contentBase:‘./build, //设置服务器访问的基本目录
host:‘localhost‘, //服务器的ip地址
port:8080, //端口
open:true //自动打开页面
}

  1. 配置package.json

"scripts": {
"start": "webpack-dev-server --mode development"
}

五、1. 了解loader

    loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。
  1. 安装loader

安装style-loader和css-loader

下载：
npm install style-loader css-loader --save-dev

  1. 配置loader

（1）在webpack.config.js文件里配置module中的rules

在 webpack 的配置中 loader 有两个目标：

  1. test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。
  2. use 属性，表示进行转换时，应该使用哪个 loader。

代码：

九、使用PostCSS处理浏览器前缀

（1）处理效果

（2）安装loader

安装postcss-loader和autoprefixer

下载：
npm install --save-dev postcss-loader autoprefixer

（3）配置loader

需要和autoprefixer一起用

浏览器设置：

Loader中设置：
{
browsers: [
‘ie >= 8‘,//ie版本大于等于ie8
‘Firefox >= 20‘,//火狐浏览器大于20版本
‘Safari >= 5‘,//safari大于5版本
‘Android >= 4‘,//版本大于Android4
‘Ios >= 6‘,//版本大于ios6
‘last 4 version‘//浏览器最新的四个版本
]
}

或者在package.json里加上下图设置：

十、文件处理

  1. 图片处理
    （1）安装loader
    下载安装file-loader
    npm install --save-dev file-loader

（2）配置config文件

（3）选项配置

        配置options：

name：为你的文件配置自定义文件名模板（默认值[hash].[ext]）
context：配置自定义文件的上下文，默认为 webpack.config.js
publicPath：为你的文件配置自定义 public 发布目录
outputPath：为你的文件配置自定义 output 输出目录

                [ext]：资源扩展名
                [name]：资源的基本名称
                [path]：资源相对于 context的路径
                [hash]：内容的哈希值
  1. 字体文件处理
    （1）下载字体文件
    以bootstrap字体文件为例子
    Boostrap字体文件下载地址：https://v3.bootcss.com/getting-started/

（2）配置config文件

  1. 第三方 js库处理
    以jquery库为例子
    （1）本地导入
    编写配置文件：

            webpack.ProvidePlugin参数是键值对形式，键就是我们项目中使用的变量名，值就是键所指向的库。webpack.ProvidePlugin会先从npm安装的包中查找是否有符合的库。

    如果webpack配置了resolve.alias选项（理解成“别名”），那么webpack.ProvidePlugin就会顺着设置的路径一直找下去

        使用webpack.ProvidePlugin前需要引入webpack


（2）npm安装模块

        安装jquery库：
            npm install jquery --save-dev

        直接在js里import引入
        Import $ from‘jquery’

十一、编译es6

  1. 了解babel
    目前，ES6（ES2015）这样的语法已经得到很大规模的应用，它具有更加简洁、功能更加强大的特点，实际项目中很可能会使用采用了ES6语法的模块，但浏览器对于ES6语法的支持并不完善。为了实现兼容，就需要使用转换工具对ES6语法转换为ES5语法，babel就是最常用的一个工具


babel转化语法所需依赖项：
babel-loader： 负责 es6 语法转化
babel-core： babel核心包
babel-preset-env：告诉babel使用哪种转码规则进行文件处理

  1. 安装依赖

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

  1. 配置config文件

exclude表示不在指定目录查找相关文件

  1. 新建 .babelrc 文件配置转换规则

    1. 另一种规则配置
      .

十二、生成HTML(html-webpack-plugin)

  1. 了解html-webpack-plugin

HtmlWebpackPlugin会自动为你生成一个HTML文件，根据指定的index.html模板生成对应的 html 文件。

根据src下的index.html自动在打包后的目录下生成html文件，相关引用关系和文件路径都会按照正确的配置被添加进生成的html里

  1. 安装依赖

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

  1. 配置config文件

十三、提取分离css

  1. 处理效果
    将所有的入口 chunk(entry chunks)中引用的 css，移动到独立分离的 CSS 文件
  2. ExtractTextPlugin插件

（1）安装（下载）

npm install --save-dev extract-text-webpack-plugin@next

（2）配置config文件

引入插件：

Rules设置：
fallback:编译后用什么loader来提取css文件

Plugins设置

  1. mini-css-extract-plugin插件

（1）安装（下载）

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

（2）配置config文件

引入插件

Rules设置：

Plugins设置

十四、压缩css及优化css结构

  1. 处理效果


  1. optimize-css-assets-webpack-plugin插件

（1）安装（下载）

                npm install --save-dev optimize-css-assets-webpack-plugin

（2）配置config文件

引入插件：


Plugins设置

assetNameRegExp: 正则表达式，用于匹配需要优化或者压缩的资源名。默认值是 /.css$/g
cssProcessor: 用于压缩和优化CSS 的处理器，默认是 cssnano.
cssProcessorPluginOptions:传递给cssProcessor的插件选项，默认为{}
canPrint:表示插件能够在console中打印信息，默认值是true
discardComments:去除注释

十拷贝静态文件

  1. 处理效果

    1. 安装(下载)

npm install --save-dev copy-webpack-plugin

  1. 配置config文件

引入插件：

Plugins设置

十五、用clean-webpack-plugin来清除文件

  1. 处理效果

当我们修改带hash的文件并进行打包时，每打包一次就会生成一个新的文件，而旧的文件并没有删除。

为了解决这种情况，我们可以使用clean-webpack-plugin在打包之前将文件先清除，之后再打包出最新的文件

  1. 安装

    npm install --save-dev clean-webpack-plugin

  2. 配置config文件

    引入插件

    Plugin配置

十六、HTML中引入图片

  1. 处理效果

未使用loader时，会出现路径错误，图片不显示的情况


经过loader处理后，图片能正常显示

  1. 安装

cnpm install --save-dev html-loader

  1. 配置config文件

Rules中配置

十六、使用sourcemap调试

  1. 了解sourcemap

Sourcemap是为了解决实际运行代码（打包后的）出现问题时无法定位到开发环境中的源代码的问题。

devtool选项

5个基本类型：
(1) eval
每个模块都使用 eval() 执行，每一个模块后会增加sourceURL来关联模块处理前后的对应关系。如下图

由于会映射到转换后的代码，而不是映射到原始代码（没有从 loader 中获取 source map），所以不能正确的显示行数。因为不需要生成模块的sourcemap，因此打包的速度很快。

原文地址：https://blog.51cto.com/yht1990/2361686

时间： 2024-09-28 03:15:55

webpack打包教程的相关文章

webpack打包和gulp打包工具详细教程

30分钟手把手教你学webpack实战 阅读目录 一:什么是webpack? 他有什么优点? 二:如何安装和配置 三:理解webpack加载器 四:理解less-loader加载器的使用 五:理解babel-loader加载器的含义 六:了解下webpack的几个命令 七:webpack对多个模块依赖进行打包 八:如何独立打包成样式文件 九:如何打包成多个资源文件 十:关于对图片的打包 十一:React开发神器:react-hot-loader 回到顶部 什么是webpack? 他有什么优点?

webpack 使用教程--实时刷新测试

学习webpack,基本始终是围绕: 1.如何安装webpack 2.如何使用webpack 3.如何使用loader 4.如何使用开发服务器 可能我们会在如何使用开发服务器的时候,遇到诸如调试的相关问题: 使用开发服务器 我们webpack中使用的开发调试服务器通常是 webpack-dev-server,通过这个服务我们更多的是想实现无刷新的处理编译入口文件. 通过以下命令全局安装 1 npm install webpack-dev-server -g 启动服务器 1 webpack-dev

webpack打包avalon

webpack打包avalon+oniui+jquery 随着avalon的发展壮大,我根据CSDN的统计数字,中国前端大概有1%的人在使用avalon了. avalon的最大优势是能兼容IE6,并且其API是非常稳定,只是在1.3.7 对ms-duplex的拦截器做了一次改动(但这次改动也向下兼容),1.5中去除avalon.define的旧风格支持,废掉ms-widget指令改成更强大的自定义标签指令.相对于其他MVVM框架来说,是非常的良心.此外,配套是非常完善,尤其是oniui,也支持到

webpack使用教程

webpack使用教程 接触webpack也有挺长一段时间了,公司的项目也是一直用着webpack在打包处理,但前几天在教新人的情况下,遇到了一个问题,那就是:尽管网上的webpack教程满天飞,但是却很难找到一个能让新人快速入手的.接地气的.傻瓜式的教程,自己手把手教又太浪费时间.想了一想,决定自己写一篇webpack的傻瓜式教程,旨在教会尚未了解webpack的人迅速入手. 对于webpack的概念.用途.好处等等一律省略,想了解的上网搜索即可,这里直接演示如何新建一个webpack的实例.

Webpack打包进阶

说在前面 由于使用了React直出,页面各项性能指标使人悦目.本篇将深入探讨目前PC部落所采用webpack打包优化策略,以及探讨PC部落并未使用的 webpack Code Splitting 代码分包.异步模块加载特性.看看它们又是如何对PC部落的性能起到进一步的催化作用. 为什么要使用webpack 如果你曾经使用过 Broserify, RequireJS 或类似的打包工具,并注重:代码分包.异步加载.静态资源打包(图片/CSS).那么 webpack 就是帮你构建项目的利器!简单一句话

webpack打包分离第三方库和业务代码

使用webpack打包工程,通常会需要分离第三方类库和应用本身的代码,因为第三方类库更新频率不高,这样浏览器可以直接从缓存读,不需要项目每次上线再获取一次. 以react为例,正常情况下,最初是这么配置的: 1 module.exports = { 2 entry: { 3 app: "./src/App.js", 4 vendor: ["react", "react-dom"] 5 }, 6 output: { 7 path: __dirnam

webpack打包经验——处理打包文件体积过大的问题

前言 最近对一个比较老的公司项目做了一次优化,处理的主要是webpack打包文件体积过大的问题. 这里就写一下对于webpack打包优化的一些经验. 主要分为以下几个方面: 去掉开发环境下的配置 ExtractTextPlugin:提取样式到css文件 webpack-bundle-analyzer:webpack打包文件体积和依赖关系的可视化 CommonsChunkPlugin:提取通用模块文件 提取manifest:让提取的公共js的hash值不要改变 压缩js,css,图片 react-

前端项目模块化的实践2：使用 Webpack 打包基础设施代码

以下是关于前端项目模块化的实践,包含以下内容: 搭建 NPM 私有仓库管理源码及依赖: 使用 Webpack 打包基础设施代码: 使用 TypeScript 编写可靠类库 (实现中) 本文是关于前端项目模板化的第2部分 现状 实际项目远远比示例使用的 myGreeting 复杂,比如 为了提高可维护性我们将项目折成了许多功能模板: 我们希望使用 Promise 等语法等,但是顾忌目标环境的支持能力: 可能依赖了多个第三方类库: 为了提高加载速度我们打包时需要进行很多额外工作: 代码压缩: Tre

webpack进阶教程（一）

注:本文重点不是怎样配置webpack.config.js并实现相应的功能,而是通过对比webpack编译前和编译后文件,探究webpack打包后的文件是怎样加载执行的.本文讨论commonJS模块化方案时,webpack的打包工作.为了便于讨论,我们准备了一个非常简单的例子,涉及三个文件,分别是 文件a.js module.exports ={ say:function(){ console.log('A is saying.'); } } 文件b.js module.exports ={ s