webpack

最新推荐文章于 2023-01-06 15:27:30 发布

荒年1010

最新推荐文章于 2023-01-06 15:27:30 发布

阅读量158

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_42673485/article/details/119011093

版权

初始化WebPack

一、为什么会有webpack？

因为开发者编写的代码是模块化开发，.less .scss .vue .js等文件
开发者编写的代码是工程化

因为浏览器不能解析vue、react 、less 、scss 等工程化，模块化的代码，所以需要webpack 工具，将编写的模块化代码，进行编译/打包,然后在浏览器中运行的编译后或者打包后的代码。

二、webpack是什么？

webpack是自动化构建工具

三、怎么搭建使用webpack的环境

依赖node.js npm 下载 node.js npm ,npm init -y —> 生成package.json文件。
安装cli工具 webpack 库

npm i --save-dev webpack webpack-cli
测试运行webpack

局部安装：npx webpack --version

全局安装：webpack --version

全局安装相对整个电脑

全局会覆盖局部，会导致版本受限制。（推荐局部安装，只相对于当前文件夹）。
创建webpack配置文件

webpack.config.js

module.exports = {}
运行webpack

npx webpack

webpack的核心概念

一、entry和output

entry

entry 配置入口文件

- 作用：告诉webpack模块化代码的入口文件在哪里

- webpack 可以通过入口文件找到所有的模块化文件，进行编译打包处理
项目分类

- 单页面应用一个 html 一个入口文件

- 多页面应用多个 html 多个入口文件

entry

- 如何配置单入口
```
entry: './src/index.js',
```
- 如何配置多入口
```
xiaomihu:'./src/index.js',
damihu:'./src/search.js'
```
output

> output 配置出口文件

> 作用：告诉webpack 编译打包后的代码，应该放在哪里。

> 换句话：配置是打包后的代码，放在哪个文件以及文件夹中。
```
// 配置多出口文件
output:{
     
  path:path.resolve(__dirname,'./duorukou'),
  // [name] 动态文件名。赋值的是 entry的key值
  filename:'[name].js'
}
```

2、loader

需求：在webpack 中使用babel 将高版本js 编译为低版本的js

什么是webpack loader ?

loader 有 n 个

作用：可让webpack 解决一些非js的模块

babel-loader

作用：在webpack 中使用babel，将高版本js 编译为低版本

npm init

npm install -D babel-loader @babel/core @babel/preset-env

//新建 .babelrc文件
{
   
   "presets": [
         "@babel/preset-env"
      ]
}

// 在webpack 使用loader:
module: {
   
// 这里配置loader 
rules: [
//loader 可以配置多个 
//一个loader一个对象
{
   
  test: /\.m?js$/,
  // 正则匹配文件，匹配那些文件可以使用 babel-loader
  exclude: /(node_modules|bower_components)/,
  // 作用：使用哪一个loader
  // use 赋值  对象 or 函数
  use: {
   
    loader: 'babel-loader',   // loader 的名字
    options: {
     // 可以写 babel-loader 具体参数配置
    presets: ['@babel/preset-env']
       }
      }
     }
   ]
}

3.plugin

为什么有Plugin插件？
因为有一个模块 loader 不能解决所有的模块;以及提供的功能是有限的,所以有了webpack插件。
没有什么问题,是插件解决不了的,如果解决不了,找你们负责人写一个。

插件是什么？
插件是用来解决各种模块编译的
注意:loader和插件可以同时使用

如何使用插件？
需求:希望将html进行打包处理,同时希望html加载对应的js
- 1:下载插件
- 2:使用插件

~~~js
const htmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    // 数组中元素 为配置的插件
    plugins:[
        new htmlWebpackPlugin({
            template: './index.html',      //template 指定需要被编译的html
            filename: 'index.html',        //filename  配置打包输出的 html文件名
            chunks: ['index'],             // chunks  设置 打包后的html 加载那个打包后js文件
            minify: {                              
                // 删除 index.html 中的注释
                removeComments: false,
                // 删除 index.html 中的4空格
                collapseWhitespace: true,
                // 删除各种 html 标签属性值的双引号
                removeAttributeQuotes: true
            }
        }),
    ]
}

~~~

基础中常用的插件有那些?

用于修改行为
~~~
define-plugin:定义环境变量，在4-7区 分环境中有介绍。

context-replacement-plugin:修改require语句在寻找文件时的默认行为。

ignore-plugin:用于忽略部分文件。

~~~
用于优化

- commons-chunk-plugin：提取公共代码，在4-11提取公共代码中有介绍。
- extract-text-webpack-plugin：提取 JavaScript 中的 CSS 代码到单独的文件中，在1-5使用 Plugin中有介绍。
- prepack-webpack-plugin：通过 Facebook 的 Prepack 优化输出的 JavaScript 代码性能，在 4-13使用 Prepack 中有介绍。
- uglifyjs-webpack-plugin：通过 UglifyES 压缩 ES6 代码，在 4-8压缩代码中有介绍。
- webpack-parallel-uglify-plugin：多进程执行 UglifyJS 代码压缩，提升构建速度。
- imagemin-webpack-plugin：压缩图片文件。
- webpack-spritesmith：用插件制作雪碧图。
- ModuleConcatenationPlugin：开启 Webpack Scope Hoisting 功能，在4-14开启 ScopeHoisting中有介绍。
- dll-plugin：借鉴 DDL 的思想大幅度提升构建速度，在4-2使用 DllPlugin中有介绍。
- hot-module-replacement-plugin：开启模块热替换功能。


其他

- serviceworker-webpack-plugin：给网页应用增加离线缓存功能，在3-14 构建离线应用中有介绍。
- stylelint-webpack-plugin：集成 stylelint 到项目中，在3-16检查代码中有介绍。
- i18n-webpack-plugin：给你的网页支持国际化。
- provide-plugin：从环境中提供的全局变量中加载模块，而不用导入对应的文件。
- web-webpack-plugin：方便的为单页应用输出 HTML，比 html-webpack-plugin 好用。

webpack实现devserve自动化打包

//package.json 
"scripts": {
   
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack serve --inline --progress",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
   
    "@babel/core": "^7.14.6",
    "@babel/preset-env": "^7.14.7",
    "babel-loader": "^8.2.2",
    "html-webpack-plugin": "^5.3.2",
    "webpack": "^5.45.1",
    "webpack-cli": "^4.7.2",
    "webpack-dev-server": "^3.11.2"
  }
}

//webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin")
module.exports = {
   
    mode: 'development',
    entry: "./src/main.js",
    output: {
   
        path: path.resolve(__dirname, 'dist'),
        filename: "[name].js"
    },

    module: {
   
        rules: [
            {
   
                test: /\.m?js$/,   // 正则匹配文件，匹配那些文件可以使用 babel-loader
                exclude: /(node_modules|bower_components)/,
                use: {
   
                    loader: 'babel-loader',  // loader 的名字
                    options: {
    // 可以写 babel-loader 具体参数配置
                        presets: ['@babel/preset-env']
                    }
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
   
            template: './public/index.html'

最低0.47元/天解锁文章

荒年1010

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack

初始化WebPack一、为什么会有webpack？因为开发者编写的代码是模块化开发，.less .scss .vue .js等文件开发者编写的代码是工程化因为浏览器不能解析vue、react 、less 、scss 等工程化，模块化的代码，所以需要webpack 工具，将编写的模块化代码，进行编译/打包,然后在浏览器中运行的编译后或者打包后的代码。二、webpack是什么？webpack是自动化构建工具三、怎么搭建使用webpack的环境依赖node.js npm 下载
复制链接

扫一扫