webpack学习

webpack

  • 为什么需要webpack
  • 5个基本概念
    • entry:入口文件
    • output:出口文件
    • Loader:处理css,img
    • plugins:插件
    • mode:模式
  • 功能介绍
    • 开发模式:仅编译es6 development
    • 生产模式:编译+压缩 production
  • 创建+使用
    • 1.初始化
    • 2.下载
    • 3.根目录创建webpack.config.js文件,注意文件夹的位置
    • 4.npx webpack
  • 插件:html-webpack-plugin
    • 1.下载
    • 2.使用
  • devtool:’inline-source-map’,在开发模式下正常显示build.js下的js代码
  • – -watch

为什么需要webpack

本质上,Webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 Webpack 处理应用程序时,它会递归地构建一个依赖关系图(Dependency Graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个bundle。

在开发中一般会使用less,sass,vue等需要转化为浏览器可以识别的css,js,html,es6->es5
压缩代码,兼容处理

5个基本概念

entry:入口文件

口指示webpack以哪个文件为入口起点开始打包,分析构建内部的依赖图。

output:出口文件

输出指示 webpack打包后的资源bundles输出到哪里去,以及如何命名

Loader:处理css,img

让webpack去处理非JavaScript资源的文件,比如css、img等,将他们可以处理成一个webpack可以识别的资源,可以理解成一个翻译的过程。(webpack自身只能理解json和js)

plugins:插件

插件可以用来执行更加广的任务,插件的范围包括打包优化和压缩

mode:模式

模式指示webpack使用相应模式的配置。
开发模式(development):配置比较简单,能让代码本地调试运行的环境。
生产模式(production):代码需要不断优化达到性能最好。能让代码优化上线运行的环境。
都会自动启用一些插件,生产模式使用插件更多

功能介绍

开发模式:仅编译es6 development

生产模式:编译+压缩 production

创建+使用

1.初始化

npm init -y//生成package.json文件

2.下载

npm i webpack webpack-cli --save-dev

3.根目录创建webpack.config.js文件,注意文件夹的位置

//webpack.config.jsconst path = require('path') // 引用path模块module.exports = {     entry:"./src/index.js",    // 入口文件     output:{   // 出口文件               path:path.resolve(__dirname,'build'),// 输出的路径  是绝对路径             filename:'build.js',  // 输出的文件名称    },        mode:"production"// 使用生产}

4.npx webpack

插件:html-webpack-plugin

html-webpack-plugin 是 webpack 中的 HTML 插件,可以通过此插件自定制 index.html 页面的内容。
HTML 插件复制的 index.html 页面,到dist目录下,自动注入了打包的 bundle.js 文件

1.下载

  npm i --save-dev html-webpack-plugin

2.使用

const path = require('path') // 引用path模块const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {     entry:"./src/index.js",    // 入口文件     output:{   // 出口文件               path:path.resolve(__dirname,'./dist'),// 输出的路径  是绝对路径             filename:'build.js',  // 输出的文件名称        clean:true,//清除之前遗留的旧的文件    },        mode:"production",// 使用生产    plugins:[        new HtmlWebpackPlugin({            template:'./index.html',//模板            filename:'app.html',//输出文件名            inject:'body'//打包生成的script所在html的位置,默认在head标签里面    })]}

devtool:‘inline-source-map’,在开发模式下正常显示build.js下的js代码

//  webpack.config.jsmode:"development",// 使用开发    devtool:'inline-source-map',//在开发模式下正常显示build.js下的js代码

development模式下编译的build.js

转化完

– -watch