还不会配置webpack，来看看这篇文章

最新推荐文章于 2024-07-28 01:07:00 发布

十九万里

最新推荐文章于 2024-07-28 01:07:00 发布

阅读量464

点赞数

分类专栏： ajax、http 文章标签： webpack 前端 javascript

本文链接：https://blog.csdn.net/weixin_44865458/article/details/122031482

版权

ajax、http 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

webpack快速入门教程

重点:webpack是什么，可以干什么？gulp

1、webpack 介绍

什么是webpack https://www.webpackjs.com/

Webpack是一个模块打包器(bundler)。
在Webpack看来, 前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理
它将根据模块的依赖关系进行静态分析，生成对应的静态资源

五个核心概念

Entry：入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。
Output：output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件
Loader：loader 让 webpack 能够去处理那些非 JavaScript 文件
Plugins：插件则可以用于执行范围更广的任务。例如：打包优化、压缩，
Mode：模式，有生产模式 production 和开发模式 development

理解 Loader

Webpack 本身只能加载 JS/JSON 模块，如果要加载其他类型的文件(模块)，就需要使用对应的loader 进行转换/加载

Loader 本身也是运行在 node.js 环境中的 JavaScript 模块

本身是一个函数，接受源文件作为参数，返回转换的结果

loader 一般以 xxx-loader 的方式命名，xxx 代表了这个 loader 要做的转换功能，比如 less-loader。

理解 Plugins

插件可以完成一些loader不能完成的功能。

插件的使用一般是在 webpack 的配置信息 plugins 选项中指定。

配置文件(默认)

webpack.config.js : 是一个node模块，返回一个 json 格式的配置信息对象

2、零配置

零配置：不需要进行任何的配置即可对JS进行打包。直接通过命令就可以完成。

# 将src->index.js 打包到 dist->main.js当中
npx webpack

#  将src->index.js 打包到 dist->main.js当中,指定模式（mode）为开发模式(development)，默认是生产模式（production）
npx webpack --mode development

# 将src->index.js 打包到 dist->my.js当中
# output-filename:指定打包后的文件名
npx webpack --mode development --output-filename my.js

# 将src->index.js 打包到 ../abc/build/my.js当中
# --output-path:文件夹路径
npx webpack --mode development --output-filename my.js --output-path ../abc/build

# 将src->index.js,one.js,two.js 打包到 build/my.js文件中
npx webpack --entry ./src/index.js ./src/one.js ./src/two.js --mode development --output-filename my.js --output-path build

在项目根目录中新建一个package.json

{
   "scripts":{
     "build":"npx webpack --entry ./src/index.js ./src/one.js ./src/two.js --mode development --output-filename my.js --output-path build"
   }
}

执行

npm run build 
# 如果scripts的属性名为start,可以省略run
npm start

3、开启项目

项目的环境分为两种：
开发环境（development）:程序员写代码的环境。
生产环境 (production)：代码已经完成，代码所运行的环境。

生成package.json文件
npm init -y
安装webpack

webpack:核心模块

webpack-cli:命令模块
npm install webpack webpack-cli -D
全局安装
npm install webpack webpack-cli -g
查看版本
webpack -v
npx webpack -v

4、编译打包应用 application

创建js文件

src/js/app.js
src/js/module1.js
src/js/module2.js
src/js/module3.js

创建json文件

src/json/data.json

创建主页面:

src/index.html
运行指令
npx webpack --entry ./src/js/app.js --output-filename js/app.js --mode development --output-path build
功能: webpack能够编译打包js和json文件，并且能将es6的模块化语法转换成浏览器能识别的语法
结论：

webpack能够编译打包 js 和 json 文件
能将 es6 的模块化语法转换成浏览器能识别的语法
能压缩代码

缺点：

不能编译打包 css、img 等文件
不能将 js 的 es6 基本语法转化为 es5 以下语法

改善：使用 webpack 配置文件解决，自定义功能

5、使用 webpack 配置文件

1-创建一个名字为webpack.config.js的文件：

const path = require("path");
module.exports = {
    /*****************************指定入口文件*********************************************************/
    // 1-指定字符串：将一个文件打包到一个文件
    // entry:"./src/app.js"

    // 2-指定数组：将多个文件打包到一个文件
    // entry: ["./src/app.js","./src/home.js"],

    // 3-指定对象：将多个文件打包到多个文件。新生成的文件名是设置的属性名。
    // entry:{
    //     one:"./src/app.js",
    //     two:"./src/home.js"
    // },
    // mode:"development"
    /*****************************指定出口目录及文件*********************************************************/
    // 1-打包一个文件
    // entry: "./src/app.js",
    // output: {
    //     // filename: "my.js"// 将打包后的文件名指定为my.js
    //     filename: "./a/b/my.js",// 将打包后的文件名指定为my.js
    //     path:path.join(__dirname,"/build")
    // },
    // mode:"development"

    // 2-打包多个
    // entry: ["./src/app.js","./src/home.js"],
    // output: {
    //     filename: "my.js",// 将打包后的文件名指定为my.js
    //     // filename: "./a/b/my.js",// 将打包后的文件名指定为my.js
    //     path:path.join(__dirname,"/build"),
    //     clean: true// 清空之前的打包内容。
    // },
    // mode:"development"

    // 3-打包多个文件到多个文件。
    entry: {
        one:"./src/app.js",
        two:"./src/home.js"
    },
    output: {
        filename: "[name].[hash:8].bundle.js",// 将打包后的文件名指定为my.js
        // filename: "./a/b/my.js",// 将打包后的文件名指定为my.js
        path:path.join(__dirname,"/build"),
        clean: true// 清空之前的打包内容。
    },
    mode:"development"

}

执行
```
npx webpack
```
npx webpack会默认执行webpack.config.js。如果名字为其它，那么需要通过–config命令来解决
```
npx webpack --config my.config.js
```

6、清除打包文件目录(了解)

每次打包生成了文件，都需要手动删除，引入插件 clean-webpack-plugin 帮助我们自动删除上一次生成的文件
安装插件
cnpm install clean-webpack-plugin --save-dev
2. `webpack.config.js` 引入插件

```js
//1. 引入插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin'); 
module.exports = {
    .
    .
    .
    plugins: [
        //2. 配置插件
        new CleanWebpackPlugin() 
    ],
}
运行指令
npx webpack

7、打包 less 资源

less 文件 webpack 不能解析，需要借助 loader 编译解析，使用步骤如下：

1、创建less文件

src/less/test1.less
src/less/test2.less

2、入口app.js文件

//引入两个 less 文件
import '../css/test1.less';
import '../css/test2.less';

3、安装 loader

cnpm install css-loader style-loader less-loader less --save-dev

4、配置 loader

module.exports = {
    .
    .
    .
    module:{
        rules:[
            {
                test:/\.less$/,  		// 检查文件是否以.less结尾（检查是否是less文件）
                use:[					// 数组中loader执行是从下到上，从右到左顺序执行
                    'style-loader', 	// 创建style标签，添加上js中的css代码
                    'css-loader', 		// 将css以commonjs方式整合到js文件中
                    'less-loader' 		// 将less文件解析成css文件
                ]
            }
        ]
    },
}

5、运行指令

npx webpack

8、JS 语法检查

webpack 使用 ESLint（https://eslint.bootcss.com/）能对 JS 基本语法错误/隐患进行提前检查，但是不能检测运行时错误，使用步骤

1、安装loader

cnpm install eslint-loader eslint --save-dev

eslint 是语法检查的包

eslint-loader 是 eslint 在 webpack 中的 loader 包

2、webpack.config.js 配置 loader

module.exports = {
    .
    .
    .
    module: {
        rules: [
    		.
    		.
    		.
            {
                test: /\.js$/,                  //只检测js文件
                exclude: /node_modules/,        //排除node_modules文件夹
                enforce: "pre",                 //提前加载使用
                use: {                          
                    loader: "eslint-loader"		//使用eslint-loader解析
                }
            }
        ]
    }
}

3、创建 .eslintrc.js 文件,放置到项目根目录

module.exports = {
    "parserOptions": {
        "ecmaVersion": 6, 				// 支持es6
        "sourceType": "module"			// 使用es6模块化
    },
    "env": { 							// 设置环境
        "browser": true,   				// 支持浏览器环境： 能够使用window上的全局变量
        "node": true       				// 支持服务器环境:  能够使用node上global的全局变量
    },
    "globals": {						// 声明使用的全局变量, 这样即使没有定义也不会报错了
        "$": "readonly"					// $ 不允许重写变量
    },
    "rules": {  						// eslint检查的规则  0 忽略 1 警告 2 错误
        "no-console": 0, 				// 不检查console
        "eqeqeq": 0,					// 用 == 而不用 === 就报错
        "no-alert": 0 					// 不能使用alert
    },
    "extends": "eslint:recommended" 	// 使用eslint推荐的默认规则
}

4、运行指令

npx webpack

9、JS 语法转换

借助 Babel 可以将浏览器不能识别的新语法（ES6, ES7）转换成原来识别的旧语法（ES5），浏览器兼容性处理。

1、安装loader
cnpm install babel-loader @babel/core @babel/preset-env --save-dev
@babel/core 是 babel 的核心库

@babel/preset-env 是 babel 的预设的工具包，默认可以将所有最新的语法转为为 ES5

babel-loader 是 babel 在 webpack 中的 loader 包

2、配置loader
module: {
  rules: [
    .
    .
    .
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: "babel-loader",
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }
]
}
3、运行指令
npx webpack	

10、JS 兼容性处理

Polyfill 是一块代码（通常是 Web 上的 JavaScript），用来为旧浏览器提供它没有原生支持的较新的功能
安装 polyfill
cnpm install @babel/polyfill -D
app.js（入口文件）引入
import '@babel/polyfill';
解决 babel 只能转换语法的问题(如：let/const/解构赋值…)，引入polyfill可以转换高级语法(如:Promise…)

11、打包样式文件中的图片资源

图片文件 webpack 不能解析，需要借助 url-loader编译解析

1、两张资源图片:

小图, 小于8kb: src/images/vue.png
大图, 大于8kb: src/images/react.jpg

2、在 less 文件中通过背景图的方式引入图片

.react {
width: 200px;
height: 200px;
background: url('../images/react.png') no-repeat;
background-size: cover;
}

.vue {
width: 200px;
height: 200px;
background: url('../images/vue.png') no-repeat;
background-size: cover;
}

3、安装 loader

cnpm install file-loader url-loader --save-dev 
# css-loader的版本
cnpm install css-loader@5 -D

file-loader 可以指定要复制和放置资源文件的位置，以及如何使用版本哈希命名以获得更好的缓存。

url-loader 允许你有条件地将文件转换为内联的 base-64 URL (当文件小于给定的阈值)，这会减少小文件的 HTTP 请求数。如果文件大于该阈值，会自动的交给 file-loader 处理。

4、webpack.config.js 配置 loader

module.exports = {
 .
 .
 .
 module: {
     rules: [
         .
         .
 		.
         {
             test: /\.(png|jpg|gif)$/,
             use: {
                 loader: 'url-loader',
                 options: {
                     limit: 8192,               		// 8kb以下的图片会base64处理
                     outputPath: 'images',           // 文件本地输出路径
                     publicPath: '../build/images',   // 图片的url路径
                     name: '[hash:8].[ext]',         // 修改文件名称和后缀 
                 }
             }
         },
     ]
 }

}

5、运行指令

npx webpack

12、打包 HTML 文件

HTML 文件不能直接被 webpack 解析，需要借助 HtmlWebpackPlugin 插件编译解析

1、在 src 目录下创建 index.html 文件，注意不要在 HTML 中引入任何 CSS 和 JS 文件

2、安装插件

cnpm install html-webpack-plugin --save-dev

3、webpack.config.js 修改配置

// 插件都需要手动引入
const HtmlWebpackPlugin = require('html-webpack-plugin');
.
.
module.exports = {
 .
 .
 plugins: [
     new HtmlWebpackPlugin({
           // filename: "home.html",// 默认打包以后的文件名为index.html.--->home.html
            // inject: false,// 不自动引入JS文件
            // inject: "head",
            inject: "body",// 指定JS文件在body尾部引入
            hash:true,
            template: "./src/index.html",// 指定打包的模板文件。
            minify:{
            removeAttributeQuotes:true,// 移除双引号
            removeComments:true,// 移除注释
            collapseWhitespace:true
        }
     })
 ]
}

4、运行指令

npx webpack

src 目录就是源文件目录，所有的代码和资源都保存在该目录，index.html 也是如此

13、打包 HTML 中图片资源

url-loader 只能处理 JS 和 CSS 中引入的图片，无法处理 HTML 中的 img 图片，需要 html-loader 处理。

1、src/index.html 添加 img 标签

<img src="./images/sun.jpg" alt="">

2、安装loader

cnpm install html-loader@1 --save-dev

3、配置loader

module.exports = {
    .
    .
    .
    module: {
        rules: [
            .
            .
            .
            {
                test: /\.(html)$/,
                use: {
                    loader: 'html-loader'
                }
            }
        ]
    }
}

4、运行指令

npx webpack

14、打包字体资源

字体文件需要借助 file-loader 编译解析，以 iconfont 为例，下载一个项目

1、将字体文件保存在 src/iconfont 目录下

2、修改 src/index.html

<span class="iconfont icon-qq"></span>

3、配置 loader

module.exports = {
    .
    .
    .
    module: {
        rules: [
            .
            .
            .
            {
                test: /\.(eot|svg|woff|woff2|ttf|mp3|mp4|avi)$/,  // 处理字体文件
                loader: 'file-loader',
                options: {
                  outputPath: 'fonts',
                  name: '[hash:8].[ext]'
                }
            }
        ]
    }
}

4、运行指令

npx webpack

15、自动编译打包运行

之前的操作，每次修改代码都需要重新执行 webpack 命令，可以使用 webpack-dev-server 自动打包运行

1、安装 loader，通过webapck-dev-server可以快速搭建服务。代理。

cnpm install webpack-dev-server --save-dev

2、修改 webpack.config.js

.
.
.
module.exports = {
 .
 output: {
     path: resolve(__dirname, 'build'),
     filename: 'js/app.js',
     //1. 添加 devServer 服务后需要调整输出的路径
     publicPath: '/'
 },
 module: {
     rules: [
         .
         .
         .
         {
             test: /\.(png|jpg|gif)$/,
             use: {
                 loader: 'url-loader',
                 options: {
                     limit: 8192,               		
                     outputPath: 'images',           
                     name: '[hash:8].[ext]',       
         			//2. 删除 publicPath 配置
                 }
             }
         },
         

     ]
 },
 .
 .
 //3. 增加 devServer 配置
// 对服务进行配置
    devServer:{
        port:80,// 设置端口号
        host:"api.zhangpeiyue.com",
        open:true,// 自动在浏览器中打开页面
        compress:true,// false关闭gzip压缩,true开启（默认）
        // open:["home.html"],// 打开home.html.如果不指定默认打开的是index.html
    }
 mode: 'development'
}

3、现在就可以启动服务

npx webpack serve

4、配置 package.json 中 scripts 指令。增加 server 配置

{
   .
   .
   .
   "scripts": {
        "start": "npx webpack serve --config my.config.js" 
    },
   .
   .
   .
 }

5、运行指令

npm run start
# 名字为start 可以省略run
npm start

# 默认是webpack.config.js 通过--config指定配置文件。
npx webpack serve --config my.config.js

16、热模替换功能

模块热替换 (HMR - Hot Module Replacement) 功能会在应用程序运行过程中替换、添加或删除模块

修改 webpack.config.js 的 devServer 配置

.
.
.
module.exports = {
    //index.html 不能自动刷新的解决方法
    //新增一个入口，解决开启热模块替换后首页无法刷新的问题
    entry: {
        main:['./src/js/app.js','./src/index.html']
    },
    .
    .
    .
    devServer: {
        open: true, 	
        compress: true, 
        port: 3000, 	
        hot: true		// 开启热模块替换功能
    },
    mode: 'development'
}

17、devtool

devtool 是 webpack 中的一个配置，可以将压缩/编译文件中的代码映射回源文件中的原始位置，便于调试代码

详细配置官网地址 https://www.webpackjs.com/configuration/devtool/

配置 webpack.config.js
.
.
.
module.exports = {
    .
    .
    .
    devtool:'eval-cheap-module-source-map',// 原始源代码（仅限行）
    mode: 'development'
}
推荐使用：
开发环境：
eval-cheap-module-source-map // 原始源代码（仅限行），构建速度较快
eval-source-map // 原始源代码，构建速度较慢
生产环境不建议使用。

18、准备生产环境 * （重要）

webpack 可以使用不同的配置文件，进行不同的编译。

1、创建文件夹 config，将 webpack.config.js 复制两份

./config/webpack.dev.js
./config/webpack.prod.js

2、修改 package.json 的指令
{
	.
	.
	.
	"scripts": {
       "start": "npx webpack serve --config ./config/webpack.dev.js",
  	 "build": "npx webpack --config ./config/webpack.prod.js"
    }
    .
    .
    .
}
3、开发环境指令

npm start 用于开发环境不打包文件
npm run build 用于生产环境打包文件

19、提取 CSS 成单独文件（对CSS文件进行抽离。）

前面的 CSS 样式代码都是放在 style 标签中，这里可以借助 mini-css-extract-plugin 抽离 CSS 文件

1、安装插件

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

2、配置 webpack.prod.js

.
.
// 1. 引入插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    .
    .
    .
    module: {
        rules: [
            {
                test: /.less$/,
                use: [
                    MiniCssExtractPlugin.loader,   	// 2. 修改配置 loader
                    'css-loader',
                    'less-loader'
                ]
            }
        ]
    },
    plugins: [
        .
        .
        new MiniCssExtractPlugin({					// 3. 配置插件
            filename: "css/[hash:8].css",
        })
    ]
    .
    .
}

3、运行指令

npm start

20、添加 CSS 兼容

1、安装 loader

cnpm install postcss-loader autoprefixer --save-dev

2、配置 loader

.
.
.
module.exports = {
   	.
    .
    module: {
        rules: [
            {
                test: /\.less$/, 
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
     				"postcss-loader",// 1、 设置 postcss-loader
                    'less-loader',
                ]
            },
            .
            .
        ]
    }
    
}

3、在项目的根目录下创建一个名字为：postcss.config.js

module.exports = {
    plugins: [
        require("autoprefixer") 	// 2. 配置插件
    ]
}

4、在项目目录下创建 .browserslistrc 这里一要加目标浏览器设置

cover 99.5%

5、运行指令：

npm run build

21、压缩 CSS

1、安装插件

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

2、引入插件，配置插件

//1. 引入插件
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = {

    plugins: [
        .
        .
        .
        //2. 配置插件
        new OptimizeCssAssetsPlugin({
            cssProcessorPluginOptions: {
        		//移除所有的注释
                preset: ['default', {discardComments: {removeAll: true}}],
            },
            // 解决没有source map问题
            cssProcessorOptions: {                  
                map: {
                    // 不生成内联映射,这样配置就会生成一个source-map文件
                    inline: false,
                    // 向css文件添加source-map路径注释
                    // 如果没有此项压缩后的css会去除source-map路径注释
                    annotation: true
                }
            }
        })
    ],
    mode: 'production'
}

运行指令
```
> npm run build
```

附录

配置规则介绍

规则介绍
> 1% 全球超过1%人使用的浏览器
> 5% in US 指定国家使用率覆盖
last 2 versions 所有浏览器兼容到最后两个版本根据CanIUse.com追踪的版本
Firefox > 20 指定浏览器的版本范围
not ie <=8 排除 ie8 及以下
Firefox 12.1 指定浏览器的兼容到指定版本
since 2013 2013年之后发布的所有版本
not dead with > 0.2% 仍然还在使用且使用率大于 0.2%
last 2 Chrome versions 最新的两个 Chrome 配置

规则	介绍
> 1%	全球超过1%人使用的浏览器
> 5% in US	指定国家使用率覆盖
last 2 versions	所有浏览器兼容到最后两个版本根据CanIUse.com追踪的版本
Firefox > 20	指定浏览器的版本范围
not ie <=8	排除 ie8 及以下
Firefox 12.1	指定浏览器的兼容到指定版本
since 2013	2013年之后发布的所有版本
not dead with > 0.2%	仍然还在使用且使用率大于 0.2%
last 2 Chrome versions	最新的两个 Chrome 配置

    })
],
mode: 'production'

}


1. 运行指令

   ```shell
   > npm run build

附录

配置规则介绍

规则介绍
> 1% 全球超过1%人使用的浏览器
> 5% in US 指定国家使用率覆盖
last 2 versions 所有浏览器兼容到最后两个版本根据CanIUse.com追踪的版本
Firefox > 20 指定浏览器的版本范围
not ie <=8 排除 ie8 及以下
Firefox 12.1 指定浏览器的兼容到指定版本
since 2013 2013年之后发布的所有版本
not dead with > 0.2% 仍然还在使用且使用率大于 0.2%
last 2 Chrome versions 最新的两个 Chrome 配置
cover 99.5% 99.5% 的浏览器都是目标

规则	介绍
> 1%	全球超过1%人使用的浏览器
> 5% in US	指定国家使用率覆盖
last 2 versions	所有浏览器兼容到最后两个版本根据CanIUse.com追踪的版本
Firefox > 20	指定浏览器的版本范围
not ie <=8	排除 ie8 及以下
Firefox 12.1	指定浏览器的兼容到指定版本
since 2013	2013年之后发布的所有版本
not dead with > 0.2%	仍然还在使用且使用率大于 0.2%
last 2 Chrome versions	最新的两个 Chrome 配置
cover 99.5%	99.5% 的浏览器都是目标

十九万里

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
还不会配置webpack，来看看这篇文章

webpack快速入门教程重点:webpack是什么，可以干什么？gulp1、webpack 介绍什么是webpack https://www.webpackjs.com/Webpack是一个模块打包器(bundler)。在Webpack看来, 前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理它将根据模块的依赖关系进行静态分析，生成对应的静态资源五个核心概念Entry：入口起点(entry point)指示 webpack 应该使用哪个模块，
复制链接

扫一扫