webpack学习总结

什么是webpack

webpack 是前端的一个项目构建工具，它是基于 Node.js 开发出来的一个前端工具；

webpack 可以干什么

1.可以处理 js 之间互相依赖的关系
2.可以处理 js 的兼容问题

webpack 如何运行？

1.首先，webpack 发现，我们并没有通过命令的形式，给它指定入口和出口
2.webpack 就会去项目的根目录中，查找一个叫做 webpack.config.js 的配置文件
3.找到配置文件后，webpack 就会解析执行这个配置文件，当解析执行完配置文件后，就得到了配置文件中，导出的配置对象
4.当 webpack 拿到配置对象后，就拿到了配置对象中，指定的入口和出口，然后进行打包构建
5.如果 webpack 发现既没有 webpack 命令 ，也没有配置文件，他就会报错

重要概念

入口文件（entry point）

webpack工作开始的地方，就是一个js文件。webpack通过这个文件内的import，收集其他模块文件，在通过其他模块文件内的import语句，收集其他依赖，最后将所有模块文件打包到一起，形成一个整体可运行的代码。 默认的入口文件是 src/index.js。

输出文件（output）

output就是webpack通过build过程打包后形成的文件。默认的输出文件夹为根目录下的dist/文件夹。

加载器（loaders）

loaders是一些第三方扩展包，可以帮助webpack处理加载各种类型的文件。例如有处理css、image文件的loaders。如果没有loaders，webpack本身是不支持css文件的。

插件（plugins）

plugins也是第三方插件，它可以改变webpack的工作方式，例如有些插件可以设置webpack的环境变量。

模式（mode）

webpack有两种工作方式：development（开发模式）和production（生产模式）。 主要的区别就是production模式下，产生的捆绑包（文件）更小，去掉了在运行下无关的注释，空格等等。这样可以加快用户加载代码的速度。

使用 webpack-dev-server 自动打包

1.安装webpack-dev-server

//此安装方法为本项目安装，不可全局使用，无法把它当做脚本命令
npm i webpack-dev-server -D
//想在 powershell 终端中直接运行，必须安装到全局
npm i webpack-dev-server -g

2.在本地运行 webpack-dev-server

//在package.json 配置脚本命令
{
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "dev": "webpack-dev-server" // 配置一个名为 dev 的脚本指令
  },    
  "devDependencies": {
    "webpack": "^3.8.1",
    "webpack-dev-server": "^2.9.3"
  }
}

注意:
webpack-dev-server 这个工具是依赖于 webpack 的，要想使用这个工具，就必须安装 webpack
webpack-dev-server 打包的文件会直接存放在内存中

3.添加参数
第一种方法：

"dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"    // 添加参数

它其实会开启一个本地的服务器

--open 表示：保存时重新打包，并打开浏览器
--port端口号 表示：开启本地服务器的访问端口号
--contentBase路径 表示：指定根路经
--hot 表示：更新打包文件（不是重新创建打包文件），可以实现网页无刷新直接浏览效果

第二种方法：
在 webpack.config.js 文件中进行配置

const path = require('path');
const webpack = require('webpack');

module.exports = {
    entry: path.join(__dirname,'./src/main.js'),//入口文件
    output: {
        path: path.join(__dirname,'/dist'),
        filename: 'bundle.js' //指定输出的名称
    },
    devServer: {
        open: true,
        port: 3000,
        contentBase: 'src',
        hot: true
    },
//热更新插件
    plugins:[
        new webpack.HotModuleReplacementPlugin()
    ]
}

与第一种方式不一样，使用 webpack 的热更新必须还要加上两步
1.引用 webpack 模块
2.配置插件

//plugins ：是专门放 webpack插件 的地方

webpack的简单配置

方法一：通过命令打包文件（不推荐）
webpack 要打包的文件路径 打包输出的文件路径
方法二：通过 webpack.config.js 配置文件来打包文件
let path = require('path');
module.exports = {
    entry: path.join(__dirname,'./src/main.js'),//入口文件
    output: {                                    
        path: path.join(__dirname,'./dist'),    //输出文件的路径
        filename: 'bundle.js'                     //指定输出的文件名
    }
}

使用 html-webpack-plugin 插件

这是一个webpack插件，可以简化HTML文件的创建，并且可以将你指定的打包的文件自动插入到页面中去

//安装
npm i --save-dev html-webpack-plugin
//webpack.config.js 导入要使用的插件
const path = require('path');
const webpack = require('webpack');
const htmlWebPackPlugin = require('html-webpack-plugin') // 引用你要使用的插件
module.exports = {
    entry: path.join(__dirname,'./src/main.js'),//入口文件
    output: {
        path: path.join(__dirname,'/dist'),
        filename: 'bundle.js' //指定输出的名称
    },
    devServer: {
        open: true,
        port: 3000,
        contentBase: 'src',
        hot: true
    },
    plugins:[
        new webpack.HotModuleReplacementPlugin(),
        new htmlWebPackPlugin({
            template:path.join(__dirname,'./src/index.html'), // 配置你要在内存中生成的模板文件
            filename:'index.html' // 指定内存中的文件名
        })
    ]
}

处理css样式表

webpack 默认只会处理 js 文件，所以在处理其他文件时我们需要安装一些第三方的 loader 加载器
如果我们想要打包处理 css 文件，我们需要安装 style-loader 、 css-loader 这两个插件

//安装
npm i style-loader css-loader -D
//使用
//1.在 webpack.config.js 先导入 style-loader 、 css-loader
//2.在 webpack.config.js 配置文件中新增一个配置节点，叫做 module ，它是一个对象，在这个 module 对象上，有一个 rules 属性，它是一个数组，这个数组中存放了所有第三方文件的匹配和处理规则
const path = require('path');
const webpack = require('webpack');
const htmlWebPackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: path.join(__dirname,'./src/main.js'),//入口文件
    output: {
        path: path.join(__dirname,'/dist'),
        filename: 'bundle.js' //指定输出的名称
    },
    plugins:[
        new htmlWebPackPlugin({
            template:path.join(__dirname,'./src/index.html'),
            filename:'index.html'
        })
    ],
    module: {   // 这个节点，用于配置所有第三方模块加载器
        rules:[ // 所有第三方模块 匹配规则
            {
                test: /\.css$/,     // 匹配以.css文件结尾的文件
                use: ['style.loader','css-loader'] // 指定要处理的.css文件的加载器
            }
        ]
    }
}

处理 less 文件

//安装
npm i less -D
npm i less-loader -D
//使用
const path = require('path');
const webpack = require('webpack');
const htmlWebPackPlugin = require('html-webpack-plugin')


console.log(htmlWebPackPlugin);
module.exports = {
    entry: path.join(__dirname,'./src/main.js'),//入口文件
    output: {
        path: path.join(__dirname,'/dist'),
        filename: 'bundle.js' //指定输出的名称
    },
    plugins:[
        new htmlWebPackPlugin({
            template:path.join(__dirname,'./src/index.html'),
            filename:'index.html'
        })
    ],
    module: {   // 这个节点，用于配置所有第三方模块加载器
        rules:[ // 所有第三方模块 匹配规则
            {
                test: /\.css$/,     // 匹配以.css文件结尾的文件
                use: ['style-loader','css-loader'] // 指定要处理的.css文件的加载器
            },
            {
                test: /\.less$/,
                use: ['style-loader','css-loader','less-loader']
            }
        ]
    }
}

处理 css 文件中的 url 地址

在默认情况下， webpack 是无法处理 css 文件中的 url 地址，不管是图片还是字体库，只要是 url 地址，就处理不了
因此我们需要 url-loader、 file-loader ，因为 url-loader 依赖 file-loader

//安装
npm i url-loader file-loader -D
//使用
const path = require('path');
const webpack = require('webpack');
const htmlWebPackPlugin = require('html-webpack-plugin')


console.log(htmlWebPackPlugin);
module.exports = {
    entry: path.join(__dirname,'./src/main.js'),//入口文件
    output: {
        path: path.join(__dirname,'/dist'),
        filename: 'bundle.js' //指定输出的名称
    },
    plugins:[
        new htmlWebPackPlugin({
            template:path.join(__dirname,'./src/index.html'),
            filename:'index.html'
        })
    ],
    module: {   // 这个节点，用于配置所有第三方模块加载器
        rules:[ // 所有第三方模块 匹配规则
            {
                test: /\.css$/,     // 匹配以.css文件结尾的文件
                use: ['style-loader','css-loader'] // 指定要处理的.css文件的加载器
            },
            {
                test: /\.less$/,
                use: ['style-loader','css-loader','less-loader']
            },
            {
                test: /\.(jpg|png|gif|bmg|jpeg)$/,
                use: 'url-loader'
            }
        ]
    }
}
url-loader 默认会将图片设置为 base64 进行传递，如果不想设置为 base64 就需要我们将 use:'url-loader' 设置为 use:'url-loader?limit=7631&name=[name].[ext]'

在 url-loader 设置参数，就像我们浏览器中的url地址一样
我们使用 limit 进行设置， limit 后面的值必须设置成小于图片的大小（单位是：字节 byte），这样图片就会以 url 的形式进行传输，否则图片就会被转为 base64格式的字符串进行传值
而后面的 name 参数是对客户端浏览器中的文件名进行设置，会将浏览器中图片文件名设置成路径中一样的文件名，因为经过上面的步骤只会将图片的路径设置成hash值

处理字体图片的url路径

const path = require('path');
const webpack = require('webpack');
const htmlWebPackPlugin = require('html-webpack-plugin')


module.exports = {
    entry: path.join(__dirname,'./src/main.js'),//入口文件
    output: {
        path: path.join(__dirname,'/dist'),
        filename: 'bundle.js' //指定输出的名称
    },
    plugins:[
        new htmlWebPackPlugin({
            template:path.join(__dirname,'./src/index.html'),
            filename:'index.html'
        })
    ],
    module: {   // 这个节点，用于配置所有第三方模块加载器
        rules:[ // 所有第三方模块 匹配规则
            {
                test: /\.css$/,     // 匹配以.css文件结尾的文件
                use: ['style-loader','css-loader'] // 指定要处理的.css文件的加载器
            },
            {
                test: /\.less$/,
                use: ['style-loader','css-loader','less-loader']
            },
            {
                test: /\.(jpg|png|gif|bmp|jpeg)$/,
                use: 'url-loader'
            },
            {
                test: /\.(ttf|eot|svg|woff|woff2)$/,
                use:'url-loader'
            }
        ]
    }
}
//将网页中要使用到字体图片后缀名 ttf、 eot、 svg、 woff、 woff2 进行配置

处理 ES6 的高级语法

在 webpack 中，默认只能处理一部分 ES6 的语法，一些更高级的 ES6 语法 语法或者 ES7 语法，webpack 是处理不了的；这时候，就需要借助于第三方的 loader ，来帮助 webpack 处理这些高级的语法，而第三方的 loader 把高级语法转为低级语法之后，会把结果交给 webpack 去打包到我们要打包的文件中

而我们通过 Babel，可以帮我们将高级的语法转换为低级的语法

在 webpack 中，必须装两套包，才能实现将高级语法转为为低级语法的功能

第一套
babel-core 、 babel-loader 、 babel-plugin-transform-runtime
第二套
babel-preset-env 、 babel-preset-stage-0

//安装
npm i babel-core babel-loader babel-plugin-transform-runtime -D
npm i babel-preset-env babel-preset-stage-0 -D
//在webpack.config.js 文件中配置处理 ES6 的高级语法
const path = require('path');
const webpack = require('webpack');
const htmlWebPackPlugin = require('html-webpack-plugin')


module.exports = {
    entry: path.join(__dirname,'./src/main.js'),//入口文件
    output: {
        path: path.join(__dirname,'/dist'),
        filename: 'bundle.js' //指定输出的名称
    },
    plugins:[
        new htmlWebPackPlugin({
            template:path.join(__dirname,'./src/index.html'),
            filename:'index.html'
        })
    ],
    module: {   // 这个节点，用于配置所有第三方模块加载器
        rules:[ // 所有第三方模块 匹配规则
            {
                test: /\.css$/,     // 匹配以.css文件结尾的文件
                use: ['style-loader','css-loader'] // 指定要处理的.css文件的加载器
            },
            {
                test: /\.less$/,
                use: ['style-loader','css-loader','less-loader']
            },
            {
                test: /\.(jpg|png|gif|bmp|jpeg)$/,
                use: 'url-loader'
            },
            {
                test: /\.(ttf|eot|svg|woff|woff2)$/,
                use:'url-loader'
            },
            {
                test: /\.js$/,
                use: 'babel-loader',
                exclude: /node_modules/ //这是配置 Babel 来转换 ES 的语法
            }
        ]
    }
}

注意：

在配置 babel 的 loader 规则的时候，必须把 node_modules 目录，通过 exclude 选项排除掉，原因有两个：
1.如果不排除 node_modules ，则会把 node_modules 中所有的第三方 JS 文件都打包编译，这样会非常消耗CPU，同时，打包速度非常慢；
2.如果不加上，最终，Babel 把 所用 node_modules 中的 JS 转换完毕了，但是项目依然是无法正常运行的

而后，我们必须还要在项目的根目录中，新建一个叫做 .babelrc 的 Babel 配置文件，这个配置文件，属于 JSON 格式，所以，在写 .babelrc 配置的时候，必须符合 JSON 语法规范；不能写注释，字符串必须用双引号，而该文件中写如下内容：

{
    "presets": ["env","stage-0"],
    "plugins": ["transform-runtime"]
}
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 199,902评论 5赞 468
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 84,037评论 2赞 377
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 146,978评论 0赞 332
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 53,867评论 1赞 272
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 62,763评论 5赞 360
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,104评论 1赞 277
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,565评论 3赞 390
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,236评论 0赞 254
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,379评论 1赞 294
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,313评论 2赞 317
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,363评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,034评论 3赞 315
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,637评论 3赞 303
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,719评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,952评论 1赞 255
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,371评论 2赞 346
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 41,948评论 2赞 341

推荐阅读更多精彩内容

  • webpack学习总结
    Webpack学习总结 此文只是自己学习webpack的一些总结，方便自己查阅，阅读不变，非常抱歉！！ 下载安装：...
    Lxs_597阅读 926评论 0赞 0
  • webpack学习总结
    webpack介绍 webpack是一个javascript静态模块打包器（module bundle）当webp...
    奋斗的小小小兔子阅读 672评论 0赞 1
  • webpack学习总结
    一、webpack是什么？ 本质上,webpack是一个现代JavaScript应用程序的静态模块打包器（mo...
    1761acf52a36阅读 258评论 0赞 0
  • webpack学习总结01
    webpack打包原理 webpack只是一个打包模块的机制，只是把依赖的模块转化成可以代表这些包的静态文件。并不...
    木易先生灬阅读 131评论 0赞 0
  • webpack4学习总结
    把每章节的代码都放到了git仓库：https://github.com/fx35792/webapck-study...
    读书的鱼阅读 678评论 0赞 8