1、webpack 初体验

全局安装webpack

npm i webpack webpack-cli -g

/*index.js:webpack 入口起点文件1.运行指令：开发环境：webpack ./src/index.js -o ./build/built.js --mode=developmentwebpack会以 ./src/index.js 为入口文件开始打包，打包后输出到 ./build/built.js生产环境：webpack ./src/index.js -o ./build/built.js --mode=productionwebpack会以 ./src/index.js 为入口文件开始打包，打包后输出到 ./build/built.js2.结论：1.webpack能处理js/json资源，不能处理css/img等其他资源2.生产环境比开发环境多压缩一个js文件*/
function add(x,y) {return x+y;
}
add(1,2)

执行打包 这个文件，打包成功

总结： index.js:webpack 入口起点文件

1.运行指令：
开发环境：webpack ./src/index.js -o ./build/built.js --mode=development
webpack会以 ./src/index.js 为入口文件开始打包，打包后输出到 ./build/built.js
生产环境：webpack ./src/index.js -o ./build/built.js --mode=production
webpack会以 ./src/index.js 为入口文件开始打包，打包后输出到 ./build/built.js
2.结论：
1.webpack能处理js/json资源，不能处理css/img等其他资源
2.生产环境比开发环境多压缩一个js文件

2.打包样式资源

创建webpack.config.js文件（配置文件）

use 数组中顺序执行：从右到左，从上到下

const {resolve} = require('path');module.exports = {// 入口entry:'./src/index.js',// 输出output:{// 输出文件名filename:'built.js',//输出路径path:resolve(__dirname,'build')},// loader的配置module:{rules:[{//匹配哪些文件test:/\.less/,//使用哪些loader进行处理use:['style-loader','css-loader',]},{//匹配哪些文件test:/\.css/,//使用哪些loader进行处理use:['style-loader','css-loader','less-loader']},]},// 模式mode:'development'
}

3.打包html资源

webpack.config.js文件（配置文件）

plugin 1.下载，2.引入，3.使用

const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {// 入口entry:'./src/index.js',// 输出output:{// 输出文件名filename:'built.js',//输出路径path:resolve(__dirname,'build')},plugins:[new HtmlWebpackPlugin({// 复制一个html文件，并引入template:'./src/index.html'})],// 模式mode:'development'
}

4.打包图片资源

webpack.config.js文件（配置文件）

需要url-loader 和html-loader

const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {// 入口entry:'./src/index.js',// 输出output:{// 输出文件名filename:'built.js',//输出路径path:resolve(__dirname,'build')},// loader的配置module:{rules:[{//匹配哪些文件test:/\.less/,//使用哪些loader进行处理use:['style-loader','css-loader',]},{//匹配哪些文件test:/\.css/,//使用哪些loader进行处理use:['style-loader','css-loader','less-loader']},{// 处理图片资源,但是处理不了html中img的路径问题test: /\.(jpg|png|gif)$/,loader:'url-loader',options:{limit: 8* 1024,// 关闭es6esModule:false,name:'[hash:10].[ext]' //不重复名字},},{// 处理html中的imgtest: /\.html$/,loader:'html-loader'}]},plugins:[new HtmlWebpackPlugin({// 复制一个html文件，并引入template:'./src/index.html'})],// 模式mode:'development'
}

5.打包其他资源

webpack.config.js文件（配置文件）

主要用到 file-loader

const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {// 入口entry:'./src/index.js',// 输出output:{// 输出文件名filename:'built.js',//输出路径path:resolve(__dirname,'build')},// loader的配置module:{rules:[{//匹配哪些文件test:/\.less/,//使用哪些loader进行处理use:['style-loader','css-loader',]},{//匹配哪些文件test:/\.css/,//使用哪些loader进行处理use:['style-loader','css-loader','less-loader']},{// 处理图片资源,但是处理不了html中img的路径问题test: /\.(jpg|png|gif)$/,loader:'url-loader',options:{limit: 8* 1024,// 关闭es6esModule:false,name:'[hash:10].[ext]' //不重复名字},},{// 处理html中的imgtest: /\.html$/,loader:'html-loader'},{// 打包其他资源exclude: /\.(css|js|html)$/,loader: 'file-loader'}]},plugins:[new HtmlWebpackPlugin({// 复制一个html文件，并引入template:'./src/index.html'})],// 模式mode:'development'
}

6.devServer

// 自动打包运行
// 指令：npx webpack-dev-server

webpack.config.js文件（配置文件）

const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {// 入口entry:'./src/index.js',// 输出output:{// 输出文件名filename:'built.js',//输出路径path:resolve(__dirname,'build')},// loader的配置module:{rules:[{//匹配哪些文件test:/\.css/,//使用哪些loader进行处理use:['style-loader','css-loader','less-loader']},{// 处理html中的imgtest: /\.html$/,loader:'html-loader'}]},plugins:[new HtmlWebpackPlugin({// 复制一个html文件，并引入template:'./src/index.html'})],// 自动打包运行// 指令：npx webpack-dev-serverdevServer: {contentBase: resolve(__dirname,'build'),compress:true,port:3000,open:true},// 模式mode:'development'
}

7.提取css成单独文件

用到mini-css-extract-plugin插件
并且将style-loader 改为 MiniCssExtractPlugin.loader,

webpack.config.js文件（配置文件）

const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {// 入口entry:'./src/index.js',// 输出output:{// 输出文件名filename:'built.js',//输出路径path:resolve(__dirname,'build')},// loader的配置module:{rules:[{//匹配哪些文件test:/\.css/,//使用哪些loader进行处理use:[MiniCssExtractPlugin.loader,'css-loader',]},{// 处理html中的imgtest: /\.html$/,loader:'html-loader'}]},plugins:[new HtmlWebpackPlugin({// 复制一个html文件，并引入template:'./src/index.html'}),new MiniCssExtractPlugin()],// 自动打包运行// 指令：npx webpack-dev-serverdevServer: {contentBase: resolve(__dirname,'build'),compress:true,port:3000,open:true},// 模式mode:'development'
}

8.css兼容

package.json增加

webpack.config.js文件（配置文件）

const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')// 设置nodejs环境变量
// process.env.NODE_ENV = "development"
module.exports = {// 入口entry:'./src/index.js',// 输出output:{// 输出文件名filename:'built.js',//输出路径path:resolve(__dirname,'build')},// loader的配置module:{rules:[{//匹配哪些文件test:/\.css/,//使用哪些loader进行处理use:[MiniCssExtractPlugin.loader,'css-loader',{loader: "postcss-loader",options:{ident:'postcss',plugins:()=>{require('postcss-preset-env')()}}}]},{// 处理html中的imgtest: /\.html$/,loader:'html-loader'}]},plugins:[new HtmlWebpackPlugin({// 复制一个html文件，并引入template:'./src/index.html'}),new MiniCssExtractPlugin()],// 自动打包运行// 指令：npx webpack-dev-serverdevServer: {contentBase: resolve(__dirname,'build'),compress:true,port:3000,open:true},// 模式mode:'development'
}

9.css压缩

const MiniCssExtractPlugin = require(‘mini-css-extract-plugin’)

const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
// 设置nodejs环境变量
// process.env.NODE_ENV = "development"
module.exports = {// 入口entry:'./src/index.js',// 输出output:{// 输出文件名filename:'built.js',//输出路径path:resolve(__dirname,'build')},// loader的配置module:{rules:[{//匹配哪些文件test:/\.css/,//使用哪些loader进行处理use:[MiniCssExtractPlugin.loader,'css-loader',{loader: "postcss-loader",options:{ident:'postcss',plugins:()=>{require('postcss-preset-env')()}}}]},{// 处理html中的imgtest: /\.html$/,loader:'html-loader'}]},plugins:[new HtmlWebpackPlugin({// 复制一个html文件，并引入template:'./src/index.html'}),new MiniCssExtractPlugin(),new OptimizeCssAssetsWebpackPlugin()],// 自动打包运行// 指令：npx webpack-dev-serverdevServer: {contentBase: resolve(__dirname,'build'),compress:true,port:3000,open:true},// 模式mode:'development'
}

10.eslint 语法检查

注意：不检查第三方 node_module

npm i eslint eslint-loader eslint-config-airbnb-base eslint-plugin-import

"eslintConfig": {"extends": "airbnb-base"}

const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
// 设置nodejs环境变量
// process.env.NODE_ENV = "development"
module.exports = {// 入口entry:'./src/index.js',// 输出output:{// 输出文件名filename:'built.js',//输出路径path:resolve(__dirname,'build')},// loader的配置module:{rules:[{//匹配哪些文件test:/\.css/,//使用哪些loader进行处理use:[MiniCssExtractPlugin.loader,'css-loader',{loader: "postcss-loader",options:{ident:'postcss',plugins:()=>{require('postcss-preset-env')()}}}]},{// 处理html中的imgtest: /\.html$/,loader:'html-loader'},// {//     test:/\.js$/,//     exclude:/node_modules/,//     loader:'eslint-loader',//     options:{//         fix:true//     }// }]},plugins:[new HtmlWebpackPlugin({// 复制一个html文件，并引入template:'./src/index.html'}),new MiniCssExtractPlugin(),new OptimizeCssAssetsWebpackPlugin()],// 自动打包运行// 指令：npx webpack-dev-serverdevServer: {contentBase: resolve(__dirname,'build'),compress:true,port:3000,open:true},// 模式mode:'development'
}

11.js，html压缩只要将mode改为production就会自动压缩

12.开发性能提升：HMR:热模块替换

在devServer中启动hot：true，
css默认启动hmr因为style-loader内部启动了
js：需要在js中添加

if (module.hot){module.hot.accept('./print.js',function () {print();})
}

13.开发性能提升：source-map

方便找出开发中的错误

devtool: "source-map",

const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
// 设置nodejs环境变量
// process.env.NODE_ENV = "development"
module.exports = {// 入口entry:'./src/index.js',// 输出output:{// 输出文件名filename:'built.js',//输出路径path:resolve(__dirname,'build')},// loader的配置module:{rules:[{//匹配哪些文件test:/\.css/,//使用哪些loader进行处理use:[MiniCssExtractPlugin.loader,'css-loader',{loader: "postcss-loader",options:{ident:'postcss',plugins:()=>{require('postcss-preset-env')()}}}]},{// 处理html中的imgtest: /\.html$/,loader:'html-loader'}]},plugins:[new HtmlWebpackPlugin({// 复制一个html文件，并引入template:'./src/index.html'}),new MiniCssExtractPlugin(),new OptimizeCssAssetsWebpackPlugin()],// 自动打包运行// 指令：npx webpack-dev-serverdevServer: {contentBase: resolve(__dirname,'build'),compress:true,port:3000,open:true},devtool: "source-map",// 模式mode:'development'
}

13.生产性能提升：tree-shaking（去除没用到的代码）

1.必须es6模块化，2.开启生产环境
在package.json中配置

  "sideEffects":["*.css"]

---------------------
作者：培歌行
来源：CSDN
原文：https://blog.csdn.net/weixin_43964148/article/details/105313149
版权声明：本文为作者原创文章，转载请附上博文链接！
内容解析By：CSDN,CNBLOG博客文章一键转载插件

[转]Webpack5(从入门到精通)相关推荐

1. java从入门到精通_想要开始学java？你要的java从入门到精通布列如下！

   java从入门到精通,让我来告诉你! 毫无疑问,java是当下最火的编程语言之一.对于许多未曾涉足计算机编程的领域「小白」来说,深入地掌握java看似是一件十分困难的事.其实,只要掌握了科学的学习方法 ...

2. 虚幻引擎5（UE5）实时VFX游戏特效制作入门到精通

   UE5 Niagara学习教程  课程获取:虚幻引擎5(UE5)实时VFX游戏特效制作入门到精通-云桥网 你会学到什么 我将通过创建各种各样的实时效果来教你虚幻引擎中强大的粒子系统. 我们将从简单的基 ...

3. Revit:从入门到精通学习教程

   流派:电子学习| MP4 |视频:h264,1280×720 |音频:AAC,48.0 KHz 语言:英语+中英文字幕(根据原英文字幕机译更准确) |大小:8.07 GB |时长:12h 16m Re ...

4. 《Java 开发从入门到精通》—— 2.2 编写第一段Java程序

   本节书摘来异步社区<Java 开发从入门到精通>一书中的第2章,第2.2节,作者: 扶松柏 , 陈小玉,更多章节内容可以访问云栖社区"异步社区"公众号查看. 2.2 编 ...

5. meteor从入门到精通_我已经大规模运行Meteor一年了。 这就是我所学到的。

   meteor从入门到精通 by Elie Steinbock 埃莉·斯坦博克(Elie Steinbock) 我已经大规模运行Meteor一年了. 这就是我所学到的. (I've been runni ...

6. Java学习从入门到精通的学习建议

   想要学好java技术,首先打好基础很重要,不论学什么基础都是重中之重,学习Java更是如此.如:基础语法.核心类库.面向对象编程.异常.集合.IO流等基础如果学不好,那么后边更深入的语法也不容易学会. ...

7. ASP网络编程从入门到精通 下载

   <ASP网络编程从入门到精通> 清华大学出版社 特点: 面向ASP零基础读者,循序渐进 全面分析ASP技术细节 用代码描述个个知识点,操作性强 通过典型模块设计,体会ASP的奥妙 通过网上 ...

8. 【组队学习】【28期】数据采集从入门到精通

   数据采集从入门到精通 论坛版块: http://datawhale.club/c/team-learning/38-category/38 开源内容: https://github.com/dataw ...

9. MAT入门到精通（二）

   点击上方"方志朋",选择"置顶或者星标" 你的关注意义重大! 阅读本文大概需要6分钟. 上一篇文章MAT入门到精通(一)介绍了MAT的使用场景和基本概念,这篇文 ...

最新文章

1. Hbuilder开发移动App（1）
2. 避免神经网络过拟合的5种技术
3. 聊聊SwitchUserFilter的使用
4. 为了熟练掌握动态SQL你必须要知道Mybatis中的OGNL表达式
5. php5.4 traits
6. [羊城杯 2020]RRRRRRRSA
7. bzoj3192: [JLOI2013]删除物品（树状数组）
8. 腾讯AI Lab造出中国第一台临床应用智能显微镜！
9. mysql 排序 删除_是否可以删除mysql表排序规则？
10. 实现抢红包算法？如此简单
11. String s = new String(xyz);创建了几个对象？
12. STL之template类模板
13. 微软发布Surface平板电脑 再度挑战苹果
14. 软件架构（7）---软件架构设计-五视图方法论
15. Maven学习总结（9）——使用Nexus搭建Maven私服
16. Leetcode-403-青蛙过河（DFS+备忘录）
17. wind金融数据接口python_Wind——接口python
18. 上海家政圈已经这么卷了吗。。。
19. 使用FreeMarker导出Word文档(感觉是重要收获)
20. 追梦算法----修路

热门文章

1. poj-1980 Unit Fraction Partition **
2. Avalonia跨平台入门第十九篇之语音播放
3. 使用Blazor做个简单的时间戳在线转换工具
4. 在业务层实现校验请求参数
5. 手把手教你学Dapr - 6. 发布订阅
6. 自动Mock，让编写单元测试更简单
7. .NET 容器环境下创建应用 dump 文件
8. Blazor 中如何下载文件到浏览器
9. 使用 Benchmark.NET 测试代码性能
10. .NET Core + K8S + Apollo 玩转配置中心