webpack

最新推荐文章于 2024-07-16 14:43:25 发布

destiny316_

最新推荐文章于 2024-07-16 14:43:25 发布

阅读量99

点赞数

文章标签： webpack

本文链接：https://blog.csdn.net/destiny316_/article/details/120488251

版权

webpack

介绍

工程化工具： grunt->gulp->browserify->webpack

webpack 概念：

webpack是个工具，协助开发者做项目管理、打包、模块管理、加载资源，并转换到对应环境，webpack是一种静态编译工具(预编译)，它能把各种资源，例如JS（含JSX）、样式（含less/sass）、图片等都作为模块来使用和处理官网，中文国内

资源： js/css/html/png…/woff/data/vue…

转换：loader

历史

webpack1 支持CMD和AMD，同时拥有丰富的plugin和loader，webpack逐渐得到广泛应用。
webpack2 支持ES6 Module，分析ESModule之间的依赖关系，webpack1必须将ES，Module转换成CommonJS模块，支持tree sharking

tree sharking: 优化功能，顾名思义，就是将多余的代码给 “摇晃” 掉，在开发中我们经常使用一些第三方库，而这些第三方库只使用了这个库的一部门功能或代码，未使用的代码也要被打包进来，这样出口文件会非常大，tree-sharking 帮我们解决了这个问题，它可以将各个模块中没有使用的方法过滤掉，只对有效代码进行打包

webpack3 新的特性大都围绕ES Module提出，如Scope Hoisting和Magic Comment

Scope Hoisting(范围提升): 可以让 Webpack 打包出来的代码文件更小、运行的更快，它又译作 “作用域提升”，是在 Webpack3 中新推出的功能

Magic Comment: 魔法注释(magic comment)修改打包动态组件名称

webpack4

现在用的是webpack4

作用和优势：

webpack 是以 commonJS 的形式来书写脚本，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移。
能被模块化的不仅仅是 JS 了。
开发便捷，能替代部分 grunt/gulp 的工作，比如打包、压缩混淆、图片转base64等。
扩展性强，插件机制完善，
Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。

目标

模块化，工程化（环境分离），自动化我们的开发环境，涉及到的知识点有入口、出口、转换器、插件

development:开发目录（编辑代码部分）
a.浏览器调试工具
b.注释、开发阶段的详细错误日志和提示
c.快速和优化的增量构建机制
production:（发布目录/生产目录）
a.开启所有的优化代码
b.更小的main大小
c.去除掉只在开发阶段运行的代码
d.Scope hoisting(作用域提升)和Tree-shaking(打包的结构只包含实际用到的 exports)

环境要求

webpack4 ：Node8+、npm5+

项目中使用

安装：

创建文件夹cmd -->npm init -y生成package.json 复制下面和谐版本号 -->npm i

和谐版本号：

"devDependencies": {
    "@babel/core": "^7.13.10",
    "@babel/preset-env": "^7.13.10",
    "babel-loader": "^8.2.2",
    "css-loader": "^5.1.3",
    "sass-loader": "^8.0.2",
    "node-sass": "^4.14.1",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^4.5.0",
    "style-loader": "^2.0.0",
    "url-loader": "^4.1.1",
    "webpack": "^4.46.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  }

全局环境

npm i webpack webpack-cli -g

项目环境

npm i webpack webpack-cli --save-dev

打包

执行:  webpack 
//默认 会自动找src/index.js 到 dist/main.js

//要求设置开发模式|生产模式
执行:  webpack --mode development | production

//指定出入口
webpack 入口文件路径 --mode development  出口文件路径

入口文件路径：就是要打包那个文件

出口文件路径：把打包结果放在何处，文件名是啥

在打包时，我们一般会把配置写在一个单独的文件里。每个项目根目录下都必须配置有一个 webpack.config.js ，它的作用如同常规的 gulpfile.js/Gruntfile.js ，就是一个配置项，告诉 webpack 它需要做什么。配置文件是一个nodejs文件

webpack.config.js文件示例

var webpack = require('webpack');

module.exports = {
     mode: 'production', //production  区别环境
     entry:  {     }, //页面入口文件配置
     output: {     },  //文件输出配置
     module: {        //加载器配置
         rules: [ ]
     },
     resolve: {     } //其它解决方案配置
     plugins: {     } // 插件
}

webpack.config.js配置的详细解释：

mode：

  mode: 'production', //development  区别环境

entry:

是页面入口文件配置。可以是字符串，也可以是对象

//1、字符串：
   entry: "./src/index.js", //入口文件，需要打包的入口文件
               
//2、对象
//  会创建多个入口包。key就是 块（chunk）名字。value就是一个字符串或者一个数组
    entry: {
        page1: "./page1.js",//入口文件
        page2: "./page2.js"//入口文件
    }

output：

是对应输出项配置，表示入口文件最终要生成什么名字的文件、存放到哪里，其语法为：

 entry: {
        page1: "./page1.js",//入口文件
        page2: "./page2.js"//入口文件
 },
 //output必须是个对象
 output: {
        path: __dirname+"/dist/",
        filename: "js/[name].bundle.js"
 }
该段代码最终会生成一个 page1.bundle.js 和 page2.bundle.js，并存放到 ./dist/js/下

module.rules

可以配置loader，loader类似一种转化器，它可以把一个东西，转成另一个，webpack本身只支持javascript文件模块化，其他文件如需模块化，需要转换器(loader,加载器)，loader都需要安装

即：告知 webpack 每一种类型的文件都需要使用什么模块加载器来处理：

style-loader

编译好的css文件插到页面，遍历 CSS 文件，然后找到 url() 表达式然后处理,即负责解读，处理css中路径引用等问题，加载css文件

npm install style-loader -D

css-loader

读取css文件，模块化，把 CSS 代码插入页面中的一个 style 标签中。

npm install css-loader -D

url-loader

把模块化引入的文件（如：图片），转换base64。对未设置或者小于limit设置的图片进行转换，以base64的格式，被img标签的src所使用

npm install url-loader -D

file-loader

模块化引入文件，大于limit byte的图片用进行解析。url-loader是对file-loader的上层封装

npm install file-loader -D

babel-loader

优雅降级， es6+ 转换 es5，与他同款还有tracuer

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

@babel/core 核心

@babel/preset-env 解析目标 es6+ 包

配置：

module: {
    rules: [        //加载器配置   
	         { //.css 文件使用 style-loader 和 css-loader 来处理
                 test: /\.css$/, 
                 loader: 'style-loader!css-loader' 
             }, 
        
            { //.scss 文件使用 style-loader、css-loader 和 sass-loader 来编译处理
                test: /\.scss$/, 
                loader: 'style!css!sass?sourceMap'
            },
        
            { //图片文件使用 url-loader 来处理，小于8kb的直接转为base64
                test: /\.(png|jpg)$/, 
                loader: 'url-loader',
                 options: {
                    limit: 5000,//
                    // outputPath:'images/',//输出的文件路径
                    name:'images/[name]-[hash:8].[ext]'
                 }
            },
        
            {
                test:/\.js$/,
                exclude:/node_modules/, //排除掉js文件
                loader:'babel-loader',
                options:{ //相关配置 可以配置在webpack.config 亦可以配置在.bablerc
                    presets: ['@babel/preset-env']
                }
            }
        ]
 }

.babelrc

{
  "presets": [
    "@babel/preset-env"
  ]
}

resolve

Resolve 定义文件名后缀，省略引入时输入后缀。定义别名

resolve: {
    extensions: ['', '.js', '.json', '.scss'],//可以省略的后缀名
    alias: { //模块别名定义，方便后续直接引用别名，
		  '@': path.resolve(__dirname,'src'),
          '~': path.resolve(__dirname,'public')
	}
}

插件（plugins）

所有的插件，都都需要安装，引入，在plugins选项里面实例化

html-webpack-plugin

产出html，动态给单页html做拷贝，及注入的工作

安装

npm i html-webpack-plugin -D

引入

//webpack.config.js
var HtmlWebpackPlugin = require('html-webpack-plugin');//插件==类

配置plugins

module.exports = {
  plugins:[
    new HtmlWebpackPlugin({
      // title:'HTML标题',//html 浏览器的标题
      filename:'index.html',//输出到dist的文件名
      template:'./public/index.html',//要参考的html模板
      hash:true, //防止缓存,会给文件后面加入hash
      minify:{
        //是否去除空格，默认false
        collapseWhitespace: true,
        
        //是否压缩html里的css（使用clean-css进行的压缩） 默认值false；
        minifyCSS: true,
        
        //是否压缩html里的js（使用uglify-js进行的压缩）
        minifyJS: true,
        
        //是否移除注释 默认false
        removeComments: true,
      },
      favicon:'./public/favicon.ico',//配置网址图标
    })
  ]
}

filename 参考 output配置

webpack-dev-server

搭建前端开发环境服务器，可以在开发环境下，浏览器热刷新，模块热重载（增量构建机制），默认自动打包（放到内存），创建前端开发型服务器(默认找webpack.config所在的位置，找index.html)

配置

//scripts 命令行
"scripts": {
    "start": "webpack-dev-server --port 8080 --open --mode development"
},

//webpack.config.js配置文件
devServer:{
    port: 8081,//端口
    open: false, //开浏览器
    // contentBase: path.join(__dirname,'public'), //静态资源|html 托管位置
    inline:true, //浏览器热刷新
    // host:'127.0.0.1'  //主机地址
    // https: false , //开启https服务器,需要提供签名文件
    // progress: true, //开启打包进度
    proxy:{
      '/api':{
        target:'http://localhost:9001',
        /* pathRewrite:{
          '^/api': ''
        } */
      },
      '/douban':{
        target:'https://douban.uieee.com',
        pathRewrite:{
          '^/douban':''
        },
        secure: false //接受https的代理
      }
    },
    // watchContentBase: true, //监听public下的文件变动
  }

devtool

使用webpack打包后，代码的错误是按照打包后的文件的行号进行报错的。如果想按照源代码的行号，使用devtool，把代码错误指定到src源代码中

module.exports={
  devtool:'inline-source-map'
}

gulp和webpack的异同(面试题)

不同：（定义和用法上来说都不是一种东西，无可比性，更不冲突！）

gulp是工具链、构建工具，可以配合各种插件做js压缩，css压缩，less编译替代手工实现自动化工作

1.构建工具
2.自动化
3.提高效率用

webpack是文件打包工具，可以把项目的各种js文、css文件等打包合并成一个或多个文件，主要用于模块化方案，预编译模块的方案
1.打包工具
2.模块化识别
3.编译模块代码方案用

模块化：gulp不能，webpack不仅仅能针对js进行模块化，针对所有的静态资源（CSS，图片等都能进行模块化）
打包：经过webpack把所有的模块打包成一个大的文件，可以减少HTTP请求次数。并且针对图片文件，如果小于某个字节大小的文件，使用base64编码，也能够减少HTTP请求次数。

相同：比如合并，压缩。但各有各的优势

wepack中loader和plugin的区别(面试题)

https://blog.csdn.net/jiang7701037/article/details/98887179

destiny316_

关注

0
点赞
踩
0

收藏

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

webpack介绍工程化工具： grunt->gulp->browserify->webpack webpack 概念： webpack是个工具，协助开发者做项目管理、打包、模块管理、加载资源，并转换到对应环境，webpack是一种静态编译工具(预编译)，它能把各种资源，例如JS（含JSX）、样式（含less/sass）、图片等都作为模块来使用和处理官网，中文国内资源： js/css/html/png…/woff/data/vue…
复制链接

扫一扫