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