![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
webpack学习
文章平均质量分 92
xt_123456
这个作者很懒,什么都没留下…
展开
-
webpack中路径表示方法
在我们写代码里的路径时:.代表当前目录..代表当前目录的上一级目录./代表当前目录下的某个文件或文件夹,如:./index.js代表当前目录下的index.js文件../代表当前目录上一级目录的文件或文件夹,如:../index.js代表当前目录的上一级目录下的index.js文件具体例子:目录结构如上图所示:path文件夹下有两个文件夹inner1和inner2以及一个文件file1.jsinner1文件夹下有两个文件:file2.js和file3.js假设现在在文件file2.js中,原创 2020-05-26 20:15:31 · 323 阅读 · 0 评论 -
4-5 webpack-打包优化技巧
1.减少文件搜索范围1)优化resolve.extensions配置在导入文件的语句里,没有带文件后缀的时候,webpack会自动带上后缀去尝试询问文件是否存在。所以,在配置resolve.extensions的时候,要遵循以下几点,以做到尽可能的优化构建性能。后缀尝试列表要尽可能小,不要把项目中不存在的后缀类型写到后缀尝试列表中。频率出现最高的文件的后缀要优先放在最前面, 以做到尽快的退出寻找过程。在源码中写导 入语句时,要尽可能的带上后缀,从而可以避免上述寻找过程。例如在你确定的情况下把re原创 2020-05-22 13:15:32 · 184 阅读 · 0 评论 -
4-4 webpack-区分开发环境和生产环境
webpack-区分开发环境和生产环境开发环境和生产环境的构建目标差异很大。在开发环境中,我们需要具有强大的、具有实时重新加载或热模块替换能力和localhost server(本地服务器)。而在生产环境中,我们的目标则转向于关注更小的 bundle,以及资源的优化,以改善加载时间。所以我们通常建议为每个环境编写彼此独立的 webpack 配置。具体步骤1.安装打开终端,进入项目文件夹的路径,输入安装命令为:cnpm install --save-dev webpack-merge2.配置(1)原创 2020-05-20 12:36:39 · 528 阅读 · 0 评论 -
4-3 webpack-开发调试必备功能之模块热替换HMR
1.什么是模块热替换模块热替换(HMR - Hot Module Replacement)功能会在应用程序运行过程中替换、添加或删除模块,而无需重新加载整个页面。主要是通过以下几种方式,来显著加快开发速度:1)保留在完全重新加载页面时丢失的应用程序状态。2)只更新变更内容,以节省宝贵的开发时间。3)调整样式更加快速 - 几乎相当于在浏览器调试器中更改样式。2.具体步骤1)配置webpack.config.js文件在module.exports = {}里的devServer中写:hot:tr原创 2020-05-19 13:03:50 · 183 阅读 · 0 评论 -
4-2 webpack使用mapsource调试
一.什么是SourcemapSourcemap是为了解决在实际运行代码(打包后的)出现问题时,无法定位到开发环境中的源代码的问题。为了让资源更小,加载速度更快,在js项目部署之前都会将代码混淆压缩,将less、sass 、typeScript 等其他语言编译成 css 或 JS ,这样就可以使浏览器识别。但是这样也带来了影响,当代码中出现问题时,只能定位到压缩之后的代码,出错以后只会告诉我们第几行有错误。而压缩之后的代码一般就只有一两行,每一行上万字符,对排除检查几乎没有帮助。而sourceMap的存在就原创 2020-05-18 20:56:55 · 426 阅读 · 0 评论 -
4-1 webpack处理HTML内嵌图片(以及错误解决)
在html中引入图片时,比如: <body> <img src="Show.jpg"> </body>如果不使用loader,就会出现路径错误,图片不显示的情况:经过loader处理后,图片就可以正常显示了。具体步骤1.安装html-loader打开终端,进入到项目文件夹路径,输入命令cnpm install --save-dev html-loader2.配置webpack.config.js文件在module.exports = {}里的mo原创 2020-05-18 11:57:35 · 571 阅读 · 0 评论 -
3-5 webpack4插件-clean-webpack-plugin清除文件
当我们修改带hash的文件并进行打包时,每打包一次就会生成一个新的文件,而旧的文件并没有删除,这样就会产生很多不必要的文件。clean-webpack-plugin插件就可以用来清除残留打包文件。具体步骤1.安装插件打开终端,进入到项目文件夹路径,输入命令cnpm install --save-dev clean-webpack-plugin2.配置webpack.config.js文件首先,引入插件:const {CleanWebpackPlugin} = require("clean-web原创 2020-05-17 16:30:28 · 457 阅读 · 0 评论 -
3-4 webpack4插件-拷贝静态文件(以及错误解决)
拷贝静态文件这里的静态文件是指项目中未引用到的一些资源,比如一些图片、开发文档等。如果开发完成后,需要保留这些静态资源,要一起打包到项目中去,就需要拷贝静态文件,用到copy-webpack-plugin插件。例如下图就是把public中的静态资源拷贝到build文件夹下:具体步骤1.安装插件打开终端,进入到项目文件夹路径,输入命令cnpm install --save-dev copy-webpack-plugin2.配置webpack.config.js文件首先,引入插件:const原创 2020-05-17 10:59:55 · 921 阅读 · 1 评论 -
3-3 webpack4插件-压缩CSS和优化CSS结构
通过optimize-css-assets-webpack-plugin插件压缩CSS和优化CSS结构。具体步骤1.安装(下载)打开终端,进入到项目文件夹路径,输入命令cnpm install --save-dev optimize-css-assets-webpack-plugin2.配置webpack.config.js文件首先需要引入optimize-css-assets-webpack-plugin插件,代码如下:const OptimizeCSSAssetsPlugin = requi原创 2020-05-16 11:48:13 · 362 阅读 · 0 评论 -
3-2 webpack4插件-提取分离css单独打包
webpack提取分离css单独打包就是将所有的入口 chunk(entry chunks)中引用的 css,移动到独立分离的CSS文件,如下图所示:需要使用extract-text-webpack-plugin(旧版)插件或者mini-css-extract-plugin(新版)插件。一.extract-text-webpack-plugin插件具体步骤:1.安装依赖打开终端,进入到项目文件夹路径,输入命令cnpm install --save-dev extract-text-webpac原创 2020-05-16 10:26:59 · 631 阅读 · 0 评论 -
3-1 webpack4插件-根据HTML模版自动生成HTML
想要根据HTML模版自动生成HTML,就需要使用一个插件:html-webpack-pluginhtml-webpack-plugin会为你自动生成一个html文件,根据指定的index.html模版生成对应的html文件。比如:根据src下的index.html文件自动在打包后的目录下生成webpack.html文件,相关引用关系和文件路径都会按照正确的配置被添加进生成的html文件里,如下图所示:具体步骤:1.安装依赖打开终端,进入到项目文件夹路径,输入命令cnpm install html原创 2020-05-14 17:15:08 · 174 阅读 · 0 评论 -
2-7 webpack-使用babel-loader编译ES6语法
babel的用途目前,ES6的语法已经得到了大规模的应用,它具有功能更加强大,更加简洁的特点。在实际项目中,我们可能采用了ES6语法的模块,但是浏览器对于ES6语法的支持并不完善,为了实现兼容,就需要使用转换工具,把ES6语法转换为ES5语法,babel就是最常用的一个工具。babel转化语法需要的依赖项babel-loader:负责ES6语法转换babel-core:babel核心包babel-preset-env:告诉babel使用哪种转码规则进行文件处理使用babel-loader编译原创 2020-05-14 11:09:17 · 501 阅读 · 0 评论 -
2-6 (webapack4 loader) webpack文件处理(file-loader)之第三方js库处理
webpack第三方js库处理以jquery库为例:一.本地导入方式1)下载jquery文件,进入官网https://jquery.com/.点击上面的按钮后,会出现下面的页面:production版本是精简和和压缩后的,为实际开发网站时使用,减小文件大小developmet版本是原生js库,可以用于自己查看jquery源代码来学习jquery根据你的需要点击下载,点击后会发现是一整页代码,你只要command+s(control+s)保存即可。2)配置webpack.config.js原创 2020-05-13 12:59:38 · 241 阅读 · 0 评论 -
2-5 (webapack4 loader) webpack文件处理(file-loader)之字体文件处理
webpack字体文件处理1.下载字体文件以bootstrap字体文件为例:Bootstrap字体文件下载地址:https://v3.bootcss.com/getting-started/#download下载完成后,把里面的css文件和fonts文件拷贝到项目里的入口文件夹下。2.配置webpack.config.js文件在webpack.config.js文件中的module中的rules里写入:{ test:/\.(eot|svg|ttf|woff|woff2)/, use:'fi原创 2020-05-13 10:49:00 · 313 阅读 · 0 评论 -
2-4 (webapack4 loader) webpack文件处理(file-loader)之图片处理
一.图片处理1)安装loader下载安装file-loader,打开终端,进入到项目文件夹路径,输入命令cnpm install file-loader --save-dev2)配置webpack.config.js文件在webpack.config.js文件中的module中的rules里写入{ test:/\.(png|jpg|gif|jepg)$/, use:'file-loader'},webpack.config.js全部代码如下所示:const path = require原创 2020-05-12 21:57:42 · 206 阅读 · 0 评论 -
2-3 (webapack4 loader)-使用PostCSS处理浏览器前缀
在处理浏览器的兼容性问题时,我们需要加一些浏览器前缀,一般情况下,我们都是在css文件里手动添加的,如果使用PostCSS处理浏览器前缀,就可以自动添加浏览器前缀。1)首先,我们要安装loader。需要安装postcss-loader 和 autoprefixer打开终端,进入到项目文件夹的路径,输入命令cnpm install postcss-loader autoprefixer --save-dev2)在webapack.config.js里配置loader,代码如下:module:{原创 2020-05-12 12:19:36 · 169 阅读 · 0 评论 -
2-2 (webapack4 loader)-webpack编译less和sass文件
1.webpack编译less首先在入口的文件夹下新建index.less文件,写入样式。在index.js文件中引入index.less,代码为import './index.less';1)安装loader需要安装less-loader和less打开终端,进入到项目文件夹的路径,输入命令npm install less-loader less --save-dev,如下图所示:2)配置loader在webpack.config.js里配置module中的rules,代码为:module:{原创 2020-05-12 10:13:49 · 234 阅读 · 1 评论 -
2-1 (webapack4 loader)-webpack加载css所需lodar及其使用方式
webpack官网对Loader的解释:需要注意的是,webpack是JavaScript 应用程序的静态模块打包器,不能处理javascript以外类型的文件,loader可以让 webpack 能够去处理那些非 JavaScript 文件。1.首先,我们需要安装loader:需要安装两个,分别为:style-loader 和 css-loader打开终端,进入项目文件夹的路径,输入安装命令为:npm install style-loader css-loader --save-dev2.配置l原创 2020-05-11 21:57:29 · 236 阅读 · 0 评论 -
1-4 webapack4配置-mac环境下配置webpack-dev-server
1.webpack-dev-server有什么作用?webpack-dev-server是用来配置本地服务器的,用它可以为webpack打包的资源文件提供web服务。webpack-dev-server主要提供两个功能:1)为静态文件提供web服务(它会将webpack打包的资源文件部署到本地服务器上)2)自动刷新和热替换(自动刷新就是当我们修改了代码以后,webpack会进行自动编译,之后就会自动更新网页的内容,不需要手动刷新。热替换就是当我们运行时更新各种模块而不想要完全刷新时可以实现局部刷新。原创 2020-05-11 12:39:03 · 692 阅读 · 0 评论 -
1-3 webapack4配置-webpack入口和出口的用法
【在webpack.config.js文件中配置】入口entry可以分为单入口和多入口:1.单入口(分为单文件和多文件):1)单文件(假设只有在public下的index.js文件需要打包)入口:entry:'./public/index.js',出口:output:{ //path.resolve()方法将路径或路径片段的序列处理成绝对路径 //__dirname表示当前文件所在目录的绝对路径 path:path.resolve(__dirname,'build'), //原创 2020-05-10 17:35:48 · 202 阅读 · 0 评论 -
1-2 webapack4配置-webpack如何使用配置文件打包?
1.在项目中新建一个文件 webpack.congig.js2.配置入口entry(你所需要打包文件的路径)3.配置出口 outputwebpack.congig.js里的代码如下:(在项目中新建一个public文件夹,里面新建一个index.js文件,假设我要把这个index.js文件打包)const path = require('path');module.exports = { // path指文件打包后存放的路径 entry:'./public/index.js', outp原创 2020-05-10 16:51:41 · 144 阅读 · 0 评论 -
1-1 webapack4配置-webpack介绍及打包基本步骤实例
1.什么是webpack?webpack是一个javascript应用程序的静态模块打包器。2.webpack有什么作用?webpack会将项目的资源文件当成一个一个的模块,模块之间会有依赖关系,webpack将会对这些有依赖关系的文件进行处理,让浏览器能够识别出来,最后将应用程序需要的每个模块打包成一个或者多个bundle。2.打包的实例:1)安装node链接: https://nodejs.org/zh-cn/2)在桌面新建一个项目webpackdemo3)打开sublime,打开这个项原创 2020-05-10 16:33:49 · 255 阅读 · 0 评论