webpack的基本操作

1.1webpack 第一阶段

1.1.1命名初始化阶段项目名不能有汉字,不能取名叫 webpack创建项目名称并生成 package.json,
命令 : npm init -y安装 : npm i -D webpack webpack-cli
webpack : 是 webpack 工具的核心包
webpack-cli : 提供了一些在终端中使用的命令-D(–save-dev) : 表示项目开发期间的依赖,也就是 : 线上代码中用不到这些包了(但是如果不写,就是线上也要用)创建一个main.js文件(入口文件)console.log(‘我就要被打包了,哦也’);在 package.json的scripts中,添加脚本 “scripts”: { “build”: “webpack main.js” },
webpack 是webpack-cli 中提供的命令, 用来实现打包的./main.js 入口文件,要打包哪个文件运行 : npm run build设置开发状态 : mode"build" : "webpack ./main.js --mode development"​

信息:WARNING in configurationThe ‘mode’ option has not been set, webpack will fallback to ‘production’ for this value.如果没有设置 mode 配置项, webpack 会默认提供 开发环境(production)​Set ‘mode’ option to ‘development’ or ‘production’ to enable defaults for each environment.

项目开发的两种环境

开发环境 (development) : 开发过程就是开发环境, (没有代码压缩)
生产环境 (production) : 线上环境, 也就是 : 项目做好了,发布上线 (代码压缩了) 生产环境下, 打包生产的js文件都是压缩后的, 开发环境下代码一般是不压缩的清除缓存:npm cache clean -f1.1.2隔行变色案例创建 src (源文件)隔行案例 => /index.html入口页面html => ul#list>li{我是 li $}*10安装 juqery : npm i jquery, 并且引入 jquery暂时引入 main.js , 在 main.js 里写入(入口文件)

使用ES6的模块化语法import $ from ‘jquery’ // 优点 不用沿着路径去找​ KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲list > li:odd')…(’#list > li:even’).css(‘backgroundColor’, ‘green’)语法报错问题 :引入 main.js 会报错,因为浏览器不支持这个import 的Es6语法

1.2webpack 第二阶段

1.2.1webpack 配置文件准备工作 : src源文件 : index.html和main.jswebpack 打包有两种方式1-命令行 2-配置项

方式 1 : 命令行"build" : “webpack ./mian.js --mode development”
“build” : 打包工具 入口 环境
npm run build一般情况下 : 改为"build" :打包工具 入口 --output 出口 环境
“build”: “webpack ./src/js/main.js --output ./dist/bundle.js --mode development”,
验证 : index.html 引入 bundle.js

方式 2 : 配置项(配置文件)

第一步 :项目根目录下, 创建一个 webpack.config.js文件 (文件名固定死)是webpack默认的胖子之文件专门指定其他文件 : --config webpack.XX.js​
第二步 : 在 webpack.config.js 中,进行配置webpack 是基于 node的 , 所以配置文件符合 node 方式书写配置注意 : 不要再这个文件中使用ES6的的模块化 import语法main.js里可以使用,是因为要通过webpack转化为es5的而这个是webpack 的配置文件,它是要转化别人的,所以必须要通过
第三步 : 修改 package.json 中的 scripts , 脚本命令为："build": "webpack"
第四步 :执行命令 : npm run build配置的示例代码(webpack.config.js) :
const path = require('path');
module.exports = {
// 入口
entry: path.join(__dirname, ‘./src/js/main.js’), /
/ 出口
output: {
// 出口目录
path: path.join(__dirname, ‘./dist’),
//出口文件名
filename: ‘bundle.js’ },
// 开发模式
mode: ‘development’
}

1.2.2webpack 配置文件html-webpack-plugin插件注意?:

作用 :能够根据指定的模板文件 (index.html),自动生成一个新的 index.html,并且注入到dist文件夹下能够自动引入js文件
安装 : npm i html-webpack-plugin -D

配置 :webpack-config.js
第一步: 引入模块
const htmlWebpackPlugin = require('html-webpack-plugin')
第二步: 配置

插件plugins: [ /
/ 使用插件(实例化插件) 指定模板文件
new htmlWebpackPlugin({
template: path.join(__dirname, ‘./src/index.html’)
})]

//运行:npm run build

1.2.3webpack 配置文件

配置文件 :webpack-dev-serverwebpack-dev-server 使用 webpack 必备的功能(插件)作用 : 为使用 webpack 打包提供一个开发期间的 服务器环境
1.1 自动为我们的项目创建一个服务器
1.2 自动打开浏览器
1.3 自动监视文件变化,自动刷新浏览器…

使用步骤 :
2.1 安装 : npm i webpack-dev-server -D
2.2 两种使用方式: 1-命令行 2-配置文件(推荐)

方式 1 : 命令行配置脚本 : “dev” : “webpack-dev-server”
运行到 npm run dev(驱动脚本)
在终端进行查看路径 : “http://localhost:8080/”｢wds｣: Project is running at http://localhost:8080/
注意:?上面的这种方式也能打开,但是需要手动打开,设置下面的配置可以自动打开
问题 1 : 自动打开?解决 : 添加 --open
问题 2 : 指定端口号解决 : 添加 --port 3001
问题 3 : 热更新解决 : --hot ( 整个页面和整个项目打包 )css一变,页面就变了
//在脚本:scripts"dev":“webpack-dev-server --open --port 3001 --hot”

方式 2 : 配置文件配置
#webpack.config.js里面配置/
/ hot 不要写在配置文件里面,不然的话还要配其他插件麻烦
//命令行里面配置"dev" : “webpack-dev-server --hot”,​
//配置文件 里面 配置 devServer : { open : true, port : 3001 }

1.3webpack 第三阶段 打包上线开发模式 :

打包上线开发模式 :npm run dev 不会打包的 ,只会把项目放到服务器里假设项目开发完成了,要上线,怎么操作?
2.1 执行 : npm run build 对项目进行打包,生成dist文件 把这个文件夹交给后台就可以了
2.2 http-server作用:开启一个临时服务器,托管文件夹里面的文件模拟本地服务器 :
安装 : npm i http-server -g
2.3 使用:在文件夹下==> 终端 ==>直接运行命令:"http-server"​把dist文件里的内容放到服务器里即可, 直接运行http-server ==>就是在dist文件夹下打开命令行窗口

1.4webpack 第四阶段 :

打包非js文件webpack 只能处理 js 文件,非 js(css.less.图片.字体等)处理处理不了, 借助 loader 加载器

1.4.1处理 css 文件

创建一个 css 文件, 然后在 main.js中引入 import '../css/index.css'

后使用里面的方法ul { style-list : none }

直接在命令行窗口运行:npm run dev
会报错You may need an appropriate loader to handle this file type. ul{| list-style: none;| }
//大概意思就是需要loader加载器来处理css,所以我们就需要

安装安装 : npm i -D style-loader css-loader
在 webpack.config.js 中,添加个新的配置项 module在 module 中添加 loader 来处理

cssloadermodule: { rules: [
//1.处理 css
// 注意点
use执行loader 顺序 从右往左顺序不能变 // css-loader : 读取css文件内容,将其转化为一个模块再交给style-loader // style-loader :拿到模块, 创建一个style标签,插入页面中
{ test: /.css$/, use: [‘style-loader’, ‘css-loader’] } ]}​
//正则 $以css结束的文件 /.是把.转义了,要不在正则里面会被转义成其他的 npm run dev在终端运行

1.4.2处理 less 文件

创建一个 less 文件, 然后再 main.js 中 引入 import ‘…/css/index.less’;

直接运行npm run dev 会报错,
You may need an appropriate loader to handle this file type. ul{| background-color: skyblue;| &li:hover{@ ./src/main.js 7:0-25//大概意思就是需要loader加载器来处理less文件npm run dev在终端运行安装 : npm i -D less-loader less style-loader css-loader后面两个在处理css的时候就装过了,但是less-loader依赖于less,也需要安装less在 webpack.config.js 中, 配置 module->rules在 module 中, 添加 loader 来处理 less 需要三个loader三个loader分别是:style-loadercss-loaderless-loaderul { background-color: aqua; li { &:hover { color: yellow; } }}配置 : //处理less也是从右往左处理的 都在module 里面的rules:[]里面配置{ test ?.less$/, use : [‘style-loader’,‘css-loader’,‘less-loader’] },

1.4.3处理 图片文件

.cls { width: 300px; height: 300px; background: url(’…/css/4.jpg’); background-size: 100%;}

运行 npm run dev
会报错You may need an appropriate loader to handle this file type/
/大概意思就是处理文件需要loader对应的加载器来处理这个文件(图片)

安装 :npm i -D url-loader file-loaderurl-loader (推荐) 和 file-loader
二选一即可两个都装最好,因为他们的功能不一样

在 webpack.config.js 添加 loader 规则
// 处理图片 都在module 里面的rules:[]里面配置 { test : /.(jpg|png)$/, use : [‘url-loader’] },

把图片转换成base64 格式的编码格式, 文件/图片如果图片比较小==> 可以转换成base64如果图片大==>不要转换成base64,太多了,印象加载速度url-loader 默认会将图片转化为 base64 编码格式, 目的:提高性能file-loader 在车里图片时, 会对文件进行重命名 :
原始： background-image: url(…/images/1.jpg);

处理后： background-image: url(9c9690b56876ea9b4d092c0baef31bb3.jpg);

base64 编码格式的图片说明 :精灵图 : 将一些小图片合并为一张图片,减少请求次数,提高性能字体图标 :直接将一些小的图片,合并到字体文件中,并且不会失真
base64 : 是一种编码格式,能够将图片、文字等常见的文件,转化为 base64 格式,这种字符串格式, 浏览器能够识别并且读取显示到页面中;base64 是一个字符串,也可以直接被内嵌到页面中, 或者 css 中
注意 : 大图片不适合用 base64 处理, 只有小的图标才适合 base64 处理设置配置
方式1 :{ test : /.(jpg|png)$/, use : [‘url-loader?limit=57417’] }

方式2 : {test: /.(jpg|png)$/, use: [ { loader: ‘url-loader’, options: { // 比57417这个小 => 转化为base64 // 大于等于这个57417值 => 不会转base64 内部调用 file-loader 加载图片 limit: 57417 }}]},

1.4.4处理字体图标

文件准备字体图标: 字体图标文件 iconfont 或者 从阿里矢量图标里下载拷贝到项目中的 css 文件夹中

在 main.js 中引入 css 文件import '…/css/iconfont/iconfont.css’使用 :
需要: url-load 处理图片的时候安装过了

直接运行 npm run dev
会报错You may need an appropriate loader to handle this file type.

<?xml version="1.0" standalone="no"?>

| | <!–@ ./src/css/iconfont/iconfont.css (./node_modules/css-loader/dist/cjs.js!./src/css/iconfont/iconfont.css) 8:41-82

//大概意思就是需要加载器,处理文件(精灵图,字体图标…)
在 webpack.config.js 中配置处理字体图标
都在module 里面的rules:[]里面配置{ test:/.(svg|woff|woff2|ttf|eot)$/,use:‘url-loader’}

//svg|woff|woff2|ttf|eot 都是字体图标里面依赖的文件的后缀名

1.4.5处理 ES6 语法

现在的项目都是使用 ES6 开发的, 但是这些新的 ES6 语法, 并不是所有的浏览器都支持, 所以就需要有一个工具,帮我们转成 es5 语法, 这个就是: babelbabelBabel is a JavaScript compiler. babel 是一个 JavaScript 编译器webpack 只能处理 import / export 这个 es6 模块化语法而其他的 js 新语法,应该使用 babel 来处理

比如 : var o = { …obj } 在谷歌上可以,edge 就不可以babel 的使用 :

1.4.5.1

安装 1 : npm i -D babel-core babel-loader@7
babel-core 是 babel 的核心包babel-loader 加载 js 文件, 并将 js 代码内容交给 babel-core 解析为 es5 低版本的 js6.2
安装 2 : npm i -D babel-preset-env babel-preset-stage-2
babel-preset-* 表示能够解析什么版本的 js 语法babel-preset-env : 表示能够解析 es2015,es2016,es2017,es2018 这些标准的语法

babel-preset-stage-2 : 用来解析经过会遇到,但是还没有被采纳为标准的语法比如 : ‘abc’.padStart(10, ‘6’) : 准备 10 位字符,有 abc,前面不够用 6 补充,是 es2017 的语法,babel-polyfill与babel-plugin-transform-runtime 也是做兼容处理的,以前都是用这个,兼容更早的6.3 配置 : 在 webpack.config.js 中添加一个 loader//都在module 里面的rules:[ ]

里面配置{ test: /.js$/, use: ‘babel-loader’, exclude: /node_modules/ }
//exclude ==>不包含,因为node_modules里面都已经处理好了6.4 在项目根目录中创建 babel 的配置文件，
叫：.babelrc { “presets”: [ “env”, “stage-2” ],​
// 暂时不用
// 如果未来某一天真的用到了polify
“plugins”: [
[“transform-runtime”, {
“helpers”: false,
“polyfill”: true,
“regenerator”: true,
“moduleName”: “babel-runtime” }]

1.4.5.2 测试 : 谷歌 和 edge ie8以下不支持

var obj = {name: ‘zs’,age: 20}​
var o = { …obj }console.log(o)

webpack中文链接 : https://www.webpackjs.com/loaders/url-loader