色多多导入百媚导航_南海营销网站建设_如何建网站教程_互联网营销推广怎么做

webpack：

webpack 是node的第三方模块包，用于打包代码

webpack是一个现代JavaScript应用程序的静态模块打包器（module bundler）

把很多文件打包整合到一起，缩小项目体积，提高加载速度

功能：

less/sass ------> css

ES6/7/8 -------->ES5

html/css/js------>压缩合并

基础使用：

默认的入口文件 ./src/index.js 默认出口文件 ./dist/main.js

• 初始化环境

yarn init

• 安装依赖包

yarn add webpack webpack-cli -D

• package.json配置scripts(自定义命令)

"scripts": {"build": "webpack"
},

• 项目目录下新建src/add/index.js

export const addFn = (a, b) => a + b

• 项目目录下新建 src/index.js

import { addFn } from './add'
console.log(addFn(4, 5))

• 项目目录下打开命令窗口，运行打包命令

yarn build
or
npm run build

**总结：**打包命令执行后，在项目目录下生成默认的dist目录和打包后默认的main.js文件

• 代码变更，重新打包

  • 新建src/tool/index.js

    export const getArrSum = (arr) =>arr.reducw((sum, val) => {sum += val}, 0)
    

  • 更改src/index.js代码

    import { addFn } from './add'
    import { getArrSum } from './tool'
    console.log(addFn(4, 5))
    console.log(getArrSum([1, 2, 3, 4]))
    console.log(addFn(5, 6))
    

  • 运行打包命令

    yarn build
    

    **总结：**打包后，代码压缩，变量压缩

webpack配置：

如何指定webpack的入口和出口：

• 项目目录下，新建webpack.config.js
• 填写配置项

const path = require('path')module.exports = {entry: './src/main.js',    // 入口路径output: {path: path.resolve(__dirname, 'dist'),   // 出口路径为绝对路径+dist文件夹filename: 'build.js',    //  创建的出口文件名称},
}

打包隔行变色项目：

• 前面的步骤
• 下载jquery，项目目录下新建public/index.html
• src/main.js

import { addFn } from './add'
import { getArrSum } from './tool'
import $ from 'jquery'
console.log(addFn(4, 5))
console.log(getArrSum([1, 2, 3, 4]))
console.log(addFn(5, 6))
$(function () {$('#app li:nth-child(odd)').css('color', 'red')$('#app li:nth-child(even)').css('color', 'blue')
})

• 执行打包命令
• 把public以及他的html文件复制到dist目录下
• 在index.html文件中手动引入打包后的build.js

自动生成html文件：

webpack只能打包js文件，插件HtmlWebpackPlugin 简化了 HTML 文件的创建

该插件将为你生成一个 HTML5 文件， 在 body 中使用 script 标签引入你所有 webpack 生成的 bundle

• 安装：

npm install --save-dev html-webpack-plugin

• webpack.config.js中配置

const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')module.exports = {entry: './src/main.js',output: {path: path.resolve(__dirname, 'dist'),filename: 'build.js',},plugins: [new HtmlWebpackPlugin()],
}

打包后，dist目录下就多了html文件，还自动把打包的build.js文件通过script引入

处理css文件–加载器:

webpack 默认只认识js文件和json文件

• src/css/index.css给body添加背景颜色

• 把css文件引入到入口文件 被webpack打包

• loader加载器，让webpack处理其他类型的文件，打包到js中

• 安装

npm install --save-dev style-loader css-loader

• webpack配置

const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')module.exports = {entry: './src/main.js',output: {path: path.resolve(__dirname, 'dist'),filename: 'build.js',},plugins: [new HtmlWebpackPlugin()],module: {rules: [//loader的规则{test: /\.css$/i, //匹配所有的css文件// use数组中从右往左运行// 先用css-loader让webpack识别css文件的内容打包// style-loader 把css插入到dom中use: ['style-loader', 'css-loader'],},],},
}

处理less文件：

• 安装

npm install less less-loader --save-dev

• webpack配置

const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')module.exports = {entry: './src/main.js',output: {path: path.resolve(__dirname, 'dist'),filename: 'build.js',},plugins: [new HtmlWebpackPlugin({// 以此为标准 生成打包后的html文件template: './public/index.html',})],module: {rules: [//loader的规则{test: /\.css$/i, //匹配所有的css文件// use数组中从右往左运行// 先用css-loader让webpack识别css文件的内容打包// style-loader 把css插入到dom中use: ['style-loader', 'css-loader'],},{test: /\.less$/i, //匹配所有的less文件use: [// 从右往左运行// compiles Less to CSS// less-loader让webpack处理less文件，会用less翻译less代码转换成css代码'style-loader','css-loader','less-loader',],},],},
}

• src目录下新建less/index.less

• 入口main.js中引入less文件

• 打包

指定生成导入的html文件路径：

webpack配置文件中添加

plugins: [new HtmlWebpackPlugin({// 以此为标准 生成打包后的html文件template: './public/index.html',}),
],

const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')module.exports = {entry: './src/main.js',output: {path: path.resolve(__dirname, 'dist'),filename: 'build.js',},plugins: [new HtmlWebpackPlugin({// 以此为标准 生成打包后的html文件template: './public/index.html',}),],module: {rules: [//loader的规则{test: /\.css$/i, //匹配所有的css文件// use数组中从右往左运行// 先用css-loader让webpack识别css文件的内容打包// style-loader 把css插入到dom中use: ['style-loader', 'css-loader'],},{test: /\.less$/i, //匹配所有的less文件use: [// 从右往左运行// compiles Less to CSS// less-loader让webpack处理less文件，会用less翻译less代码转换成css代码'style-loader','css-loader','less-loader',],},],},
}

从yarn build开始，都走了哪些流程：

执行webpack命令，找到配置文件，入口和依赖关系，打包代码输出到指定位置

webpack处理图片文件：

webpack无法自己处理图片文件

webpack5使用asset module技术来实现字体文件和图片文件的处理，无需配置额外的loader

https://webpack.docschina.org/guides/asset-modules/

1：webpack5.在rules里，针对图片文件设置type:asset

2:小于8kb转base64字符串进js里，大于8kb输出文件

• 在src/assets准备图片文件
• 在less/aa.less文件中对body设置背景图片
• 在入口导入图片文件，设置到img标签插入到body
• 打包

module:{rules:[{// 图片文件的配置  (仅适用于webpack5版本)test: /\.(gif|png|jpg|jpeg)/,type: 'asset', //匹配上面的文件后，webpack会把他们当静态资源处理打包// 如果你设置的asset模式  以8kb来区分图片文件// 小于8kb的 把图片文件转base64，打包到js中// 大于8kb的，直接把图片文件输出到dist下},]
}

为什么8kb上下的图片要区分：

图片翻译成base64打包到js文件中

好处：浏览器不用法请求了，直接可以读取，速度快

坏处：图片太大，再转base64就会让图片的体积增大30%左右，得不偿失

webpack处理字体图标：

• src/assets中放入fonts字体相关的文件夹
• src/main.js引入assets/font/iconfont.css
• src/main.js创建一个i标签，把字体图标标签添加到body上
• 添加针对字体文件的加载器规则，使用asset/resource （直接输出文件并配置路径）
• 打包

module:{rules:[{test: /\.(ttf|eot|svg|woff|woff2)/,type: 'asset/resource',generator: {// 生成文件的文字  定义规则filename: 'fonts/[name].[hash:6][ext]', //[ext] 会替换成.eot/.woff},},]
}

#### webpack对js语法降级babel  https://www.babeljs.cn/babel-loader   https://v4.webpack.js.org/loaders/babel-loader/babel一个JavaScript编译器，把高版本js语法降级处理输出兼容的低版本语法babel-loader 让webpack编译打包js代码步骤：- src/main.js  定义箭头函数，打印箭头函数变量（不要调用，为 了让webpack打包函数，看降级效果）- 下载加载器

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

- webpack配置- 打包

{test: /\.m?js$/,exclude: /(node_modules|bower_components)/, //不去匹配这些文件夹下的文件use: {loader: 'babel-loader', //使用这个loader处理js文件options: {//加载器选项presets: ['@babel/preset-env'], // @babel/preset-env 降级规则  按照这里的规则降级我们的js语法},},},

webpack开发服务器：

#### webpack开发服务器问题：每次修改完代码，重新yarn build打包，才能看到最新效果，实际工作中，打包yarn build非常耗时为什么：- 从0构建依赖
- 磁盘读取对应的文件到内存，webpack开始加载
- 再用对应的loader进行处理
- 将处理完的内容，输出到磁盘指定目录解决：**起一个开发服务器，缓存一些已经打包过的内容，只重新打包修改的文件，最终运行在内存中给浏览器使用**打包在内存中，速度快自动更新打包变化的代码，实时返回给浏览器显示###### 使用webpack-dev-serverhttps://webpack.docschina.org/api/webpack-dev-server/#root- 下载

npm install --save-dev webpack-dev-server

- 自定义webpack开发服务器启动命令serve 在package.json里

"scripts": {"build": "webpack","serve": "webpack serve"},

设置开发环境：

mode: 'development', //设置开发环境还是生产环境

启动服务器：

yarn serve

**webpack-dev-server 会给我们一个地址+端口号 ，浏览器中访问就可以看到打包的index.html页面**###### 修改端口号webpack.config.js中修改端口号，重新启动项目

module.exports = {mode: 'development',devServer: {port: 3000,},}

webpack-dev-server

- 自定义webpack开发服务器启动命令serve 在package.json里

"scripts": {"build": "webpack","serve": "webpack serve"},

设置开发环境：

mode: 'development', //设置开发环境还是生产环境

启动服务器：

yarn serve

**webpack-dev-server 会给我们一个地址+端口号 ，浏览器中访问就可以看到打包的index.html页面**###### 修改端口号webpack.config.js中修改端口号，重新启动项目

module.exports = {mode: 'development',devServer: {port: 3000,},}