webpack4.x深入与实践

Lsnsh 发布于2019-08-23 10:39 / 811人阅读

摘要：它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。可以将多种静态资源转换成一个静态文件，减少了页面的请求。因此我们不再按文件文件的方式运行指令，而是直接运行这样便能实现打包。

一、什么是webpack

是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。

二、安装和命令行

2、安装

全局安装

在输出版本时，显示，要安装webpack-cli

这样就能输出版本，可以看到我安装的是4.2.0，这里要注意，自webpack4之后，使用有很大的变化

局部安装

（1）练习（坑）：处理js文件，在项目根目录下，新建hello.js，然后打包

显示没有配置webpack的mode选项，默认有production和development两种，我们输入

依然有错：未找到入口模块发成错误，

这是因为webpack4.x是以项目根目录下的./src/index.js作为入口，所以我们要新建src目录且改hello.js为index.js

这里还要注意：

webpack4.x的打包已经不能用webpack 文件a 文件b的方式，而是直接运行webpack --mode development或者webpack --mode production，这样便会默认进行打包，入口文件是"./src/index.js"，输出路径是"./dist/main.js"，其中src目录即index.js文件需要手动创建，而dist目录及main.js会自动生成。

因此我们不再按webpack 文件a 文件b的方式运行webpack指令，而是直接运行

这样便能实现打包。

每次这样写是不是都点麻烦，我们可以在package.json中

每次执行就可以：

（2）练习：处理css文件

新建一个css文件style.css，在index.js中引入

然后打包：

会报如上错误，是因为webpack不支持css文件类型，需要依赖loader

css-loader：使webpack可以处理css文件

style-loader：新建一个style标签，把css-loader处理过的文件放进去，然后插入到HTML标签中

安装之后使用（直接在文件前）：

或者（在命令行）：

那每次更新都要执行一次，有没有自动更新的？？？

（3）其他参数：

--progerss：会出现打包过程，有百分比进度条

--display-modules：会把所有打包的模块列出来

--display-reasons：会把打包的原因列出来

三、webpack的配置

（1）新建一个项目并初始化

上面：将会打包。。。main.js文件到。。。bundle.js文件

多文件输入：

四、自动生成HTML页面文件

（1）安装html-webpack-plugin插件

（2）在webpack配置package.config.js中

（3）传参使用

1、参数

在根目录下的index.html中

生成的dist/index.html中

2、上线地址

在生成的index.html中

3、html压缩

4、多页面应用，生成多个html文件

五、loader的配置

1、解析es6语法

（1）安装babel

（2）配置webpack

2、解析css

（1）安装style-loader和css-loader

（2）配置webpack

（3）在项目中经常有类似-webkit的前缀，每次写很麻烦，这里就要用到postcss-loader,后处理loader

配置webpack

新建一个postcss.config.js文件和webpack.config.js同级

此时，如果你打包，并不会报错，但是前缀可能也没有，所以需要在package.json中加入

3、解析less

（1）安装

（2）webpack的配置

4、解析sass
sass的使用和less一样，只要把less改为sass就行了

5、处理html模板文件

（1）安装html-loader

（2）配置

（3）使用

layer.js

app.js

6、使用ejs模板文件，后缀为tpl或ejs

（1）安装

（2）配置

（3）使用

layer.tpl

layer.js

app.js

7、用file-loader处理图片

（1）安装

（2）配置

（3）使用

layer.less

若是在.tpl或.ejs中使用

（4）也可以加参数

8、使用url-loader处理图片（会影响文件大小）

9、通过image-webpack-loader和url-loader结合：先有image-webpack-loader打包，在通过url-loader

服务器托管云服务器微服务架构与实践机器学习与业务实践 javascript基础与实践教程网站运维技术与实践

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96566.html

基于webpack4.x, babel7.x 搭建的多页面脚手架, 简化前端开发环境配置，开箱即用，

摘要：开箱即用的多页面脚手架基于模块化开发可复用的现代化网站感兴趣的朋友，请点个及时关注项目更新请点个项目请提特性支持前后端分离开发配置完整的打包方案支持本地开发热更新集成代码风格校验支持编写源码，编译生成生产代码内置开发环境，自动加样式前缀自 Webpack-seed 开箱即用的多页面脚手架, 基于webpack4.2x babel7.1x模块化开发可复用的现代化网站(Without Vu...

junfeng777 2019-08-23 12:29 评论0 收藏0
webpack4.x升级摘要

摘要：以为例，编写来帮助我们完成重复的工作编译压缩我只要执行一下就可以检测到文件的变化，然后为你执行一系列的自动化操作，同样的操作也发生在这些的预处理器上。的使用是针对第三方类库使用各种模块化写法以及语法。 showImg(https://segmentfault.com/img/bVbtZYK); 一：前端工程化的发展很久以前，互联网行业有个职位叫做软件开发工程师在那个时代，大家可能...

levinit 2019-08-23 18:11 评论0 收藏0
基于 Webpack 4 多入口生成模板用于服务端渲染的方案及实战

摘要：原作者原链接基于多入口生成模板用于服务端渲染的方案及实战法律声明警告本作品遵循署名非商业性使用禁止演绎未本地化版本协议发布。这是什么背景现代化的前端项目中很多都使用了客户端渲染的单页面应用。原作者：@LinuxerPHL原链接：基于 Webpack 4 多入口生成模板用于服务端渲染的方案及实战法律声明警告：本作品遵循署名-非商业性使用-禁止演绎3.0 未本地化版本（CC BY-...

big_cat 2019-08-26 10:37 评论0 收藏0
基于 Webpack 4 多入口生成模板用于服务端渲染的方案及实战

摘要：原作者原博文地址基于多入口生成模板用于服务端渲染的方案及实战法律声明警告本作品遵循署名非商业性使用禁止演绎未本地化版本协议发布。这是什么背景现代化的前端项目中很多都使用了客户端渲染的单页面应用。原作者：@LinuxerPHL原博文地址: 基于 Webpack 4 多入口生成模板用于服务端渲染的方案及实战法律声明警告：本作品遵循署名-非商业性使用-禁止演绎3.0 未本地化版本（...

Lavender 2019-08-26 10:37 评论0 收藏0
webpack4.x 模块化浅析-CommonJS

摘要：先看下官方文档中对模块的描述在模块化编程中，开发者将程序分解成离散功能块，并称之为模块。每个模块具有比完整程序更小的接触面，使得校验调试测试轻而易举。先看下webpack官方文档中对模块的描述：在模块化编程中，开发者将程序分解成离散功能块(discrete chunks of functionality)，并称之为模块。每个模块具有比完整程序更小的接触面，使得校验、调试、测试轻而易...

alphahans 2019-08-23 12:57 评论0 收藏0