![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
webpack
webpack
KunQian_smile
这个作者很懒,什么都没留下…
展开
-
webpack 引入 eslint
ESLint是一个用来识别 ECMAScript 并且按照规则给出报告的代码检测工具,使用它可以避免低级错误和统一代码的风格。ESLint被设计为完全可配置的,主要有两种方式来配置ESLint:(1)在注释中配置:使用JavaScript注释直接把配置嵌入到JS文件中。(2)配置文件:使用下面任一的文件来为全部的目录和它的子目录指定配置信息。 可以被配置的信息主要分为3类: 1>Environments:你的 javascript 脚步将要运行在什么环境(如:nodejs,brows...原创 2020-09-22 18:25:22 · 314 阅读 · 0 评论 -
开发、生产环境的拆分代码
目前我们打包的 js 代码,都在一个文件内,这会让这个文件变得非常大;项目中不可避免要使用第三方库,比如:Jquery react vue 等等,这些在项目上线后,依然需要依赖的库相关的 JS 代码,我们需要单独拆分出来,并打包到一个文件内,这些代码因为基不会发生改变,所以单独分离出来,因为有了缓存的缘故,也能加快编译速度。项目中一段代码在很多页面都有调用,这部分代码也需要拆分出来,单独生成一个文件。一:单独打包(1)修改webpack.test.conf.js的entry如下:entry...原创 2020-09-22 17:15:12 · 273 阅读 · 0 评论 -
初步优化开发环境-辅助插件等
优化项(1)开发调试所用的 sourcemap(2)js 文件增加 hash 值,方便缓存(3)配置模块热更新1:增加 sourcemap 开发过程中,代码出错是难免的,那么调试就很重要了,webpack 帮我们打包所有文件,省了我们很多事情,但打包后的代码,却不适合用来调试,可以通过在 webpack 中增加 devtool 配置,来向浏览器暴露我们的源码,让我们可以在源码的基础上,进行调试在 webpack.dev.conf.js 中,增加如下配置:// 开发工具...原创 2020-09-18 16:43:38 · 219 阅读 · 0 评论 -
十四:配置生产环境
1:根目录下新建一个 webpack.prod.conf.js 文件2:先将 webpack.dev.conf.js 文件的内容,全部复制到该文件中3:然后我们需要做以下几处修改:(1)删除 devServer 配置项的代码(2)出口配置 filename: 'js/[name].[hash].js' 改为 filename: 'js/[name].[chunkhash].js', 开发环境设置为 hash 是因为这个和 webpack-dev-server 不兼容(3)devtool .原创 2020-09-17 10:43:52 · 328 阅读 · 0 评论 -
十三:生产环境—打包静态资源
一个完整的项目,不仅有开发依赖的各种文件需要打包上传到服务器上,也许还会有各种开发文档,项目中没引用过的图片、设计图、或者会有一些静态页面不需要编译,也要上传到服务器上,以方便预览。这里就需要用到插件copy-webpack-plugin,首先下载该插件:1:安装copy-webpack-plugin插件cnpm add copy-webpack-plugin -D静态资源一般放在根目录下的 static 文件夹下,先创建该文件夹,随便放个什么文件进去,以方便之后打包,这个只需要...原创 2020-09-17 10:43:45 · 694 阅读 · 0 评论 -
十二:生产环境—代码压缩,js\css\html
虽说生产环境只要配置了 mode:"production" 就能实现 js 的代码压缩,但我们不仅要压缩 js 代码,还需要压缩 css html 文件1:css压缩(1)用到了 uglifyjs-webpack-plugin 插件这个插件在 webpack4.x 以前是用在 plugins 配置里的,在 webpack4.x 新增了 optimization 配置:optimization.minimize 用于控制压缩的开关,开发环境默认关闭,生产环境默认开启optimization.m原创 2020-09-17 10:43:30 · 441 阅读 · 0 评论 -
十:移动端适配配置
1:移动端首先最重要的是一个meta<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />在所有要做的移动端页面head 里,都需要加入该meta,然后是需要用到的插件:2:安装插件npm install postcss-aspect-ratio-mini postcss-write-svg postc原创 2020-09-17 10:42:53 · 692 阅读 · 0 评论 -
九:clean-webpack-plugin
clean-webpack-plugin 打开 js 文件夹,会发现,这里有两个 app.js 文件,只是 hash 值不同而已,打开 dist/index.html 文件,发现其引用了其中的一个,也就是说,另一个是完全没用的,当我们修改入口文件的 js 代码,再次执行 npm run build 时,会发现 js 文件夹又会生成新的 app.js 文件,我们只需要被引用的那一个,其他的我们都需要删除它,这里需要用到 clean-webpack-plugin1:安装插件npm i cle...原创 2020-09-16 14:26:10 · 268 阅读 · 0 评论 -
十一:生产环境—分离 css,开发环境不需要分离
在之前的版本中,分离 css 一直用的是 extract-text-webpack-plugin,但是如果在 webpack4.x 上继续使用,你会发现它会报错的,要想继续使用这个插件,必须 npm i extract-text-webpack-plugin@next -D 才可以,这样下载的就是最新的版本,而不是稳定版本,在写本文时,就是 4.0beta 版本,当然如果这个版本已经是稳定版本了,那就不用加 @next 了~当然 webpack 团队专门针对 webpack4.x 又另外写了一个...原创 2020-09-16 14:17:55 · 375 阅读 · 0 评论 -
八:配置babel
1:安装 babel 相关插件cnpm install babel-loader @babel/core @babel/preset-env @babel/runtime @babel/plugin-transform-runtime -D2:项目根目录添加 .babelrc 文件在 .babelrc 文件中加入以下代码:{ "presets": [ ["@babel/preset-env", { "modules": false, "targets": ...原创 2020-09-16 14:07:41 · 794 阅读 · 0 评论 -
四:webpack-dev-server—配置开发服务
开发服务—webpack-dev-server此前,我们要浏览页面都是在项目文件夹中,直接点击要浏览的文件,在浏览器中打开浏览,但是这种浏览方式还是太麻烦,而且,如果是移动端开发,想在手机上预览效果,就没有办法了,开了服务,我们可以通过本地服务浏览文件,也能在手机预览开发效果。这就需要用到 webpack-dev-server 插件了1:安装 webpack-dev-servernpm install webpack-dev-server -gnpm install webpack-dev-原创 2020-09-16 11:42:15 · 561 阅读 · 0 评论 -
七:配置图片、文件、图标文字
配置图片依赖1:图片的打包编译使用了 url-loader,file-loader,html-loader 依赖npm install url-loader file-loader html-loader -D2:更新 webpack.dev.conf.js 文件,添加图片依赖{ test: /\.(png|jp?g|gif|svg)$/, use: [ { loader: 'url-loader', op...原创 2020-09-16 13:26:41 · 349 阅读 · 0 评论 -
六:配置样式-css、postcss、scss、less
编译 CSS 文件处理 css 的相关技术有 postcss、 scss、less,接下来,会一一介绍1:.css 文件的编译编译 .css 文件,需要用到 css-loader 和 style-loader:css-loader 使你能够使用类似 @import 和 url(...) 的方法实现 require() 的功能;style-loader 将所有的计算后的样式加入页面中; 二者组合在一起使你能够把样式表嵌入 webpack 打包后的JS文件中。(1):安装相关插件npm i原创 2020-09-16 13:18:32 · 497 阅读 · 0 评论 -
五:获取ip并默认浏览器打开项目预览
默认浏览器打开项目预览在此之前,在浏览器打开项目,我们都需要,到文件夹去找 dist/index.html 直接打开,启动服务后,需要复制 http://localhost:8080 到浏览器打开在这里,可以省去这些步骤,在启动服务后,直接自动在默认浏览器打开项目预览1:安装相关插件npm install opn chalk -D2:更新 webpack.dev.conf.js 文件,文件顶部先引入插件const open = require('opn');//打开浏览器const cha原创 2020-09-16 11:49:04 · 529 阅读 · 1 评论 -
三:html-webpack-plugin
html-webpack-plugindist 目录属于构建目录,是我们源码的输出目录,我们希望里面的一切都是可以自动化的,包括 index.html 文件也能自动创建,js 文件也能自动引入到页面,所以我们需要用到插件 html-webpack-plugin 。1:首先安装该插件:npm install html-webpack-plugin -D要用该插件,首先我们得有一个模板文件,好让插件在执行命令时,知道参照谁来生成对应的 html 文件,我们在 src 目录下,新建一个 index.原创 2020-09-16 11:34:35 · 531 阅读 · 0 评论 -
二:项目初始化文件—package.json
一:项目初始化 package.json 文件1:新建一个项目文件夹并用 vscode 打开该文件夹,作为项目根目录文件夹:2:打开 vscode 的终端命令行,开始初始化 package.json 文件npm init -y3:当然,也可以不加最后的 -y ,那样的话,跟着命令行提示一步一步走,按提示可以输入自己的配置4:加上 -y ,省去这些步骤,直接在根目录生成 package.json 文件,可打开此文件进行修改,写入自己的配置二:安装 webpack 插件安装最新版.原创 2020-09-16 11:20:48 · 5449 阅读 · 0 评论 -
一:工作环境准备安装及配置文件介绍 —node npm Git vscode
一:安装 node npm Git vscode1:node.jshttp://nodejs.cn/ http://nodejs.org/#download 使用这些技术,node.js 是必须的,从官网下载并安装到自己的电脑,你需要配置并知道自己把它安装到了哪里,我的安装目录:D:/node2:npm通常安装过 node 后就会自动安装了 npm,node 安装成功后,win+r,输入 cmd ,打开终端命令行 cmd,输入 node -v , npm -v,检查版本3:Git安装 Gi原创 2020-09-16 10:21:35 · 346 阅读 · 0 评论 -
webpack expose-loader不同版本使用-举例全局变量Jquery
吐糟:一些插件版本升级后,配置方法有可能完全不同,互不兼容!报错……,初学者根据网上学习下载插件,下载方式如果不是指定版本,一般下载的为最新版本,极有可能和你看的文档配置冲突报错。官网地址:https://www.npmjs.com/package/expose-loader。没事看看官网更新 webpack打包是以文件为单位,每个文件会包装一个自执行函数,所以各个文件中的变量是不会污染的,比如两个文件a.js和b.js。有如下代码。//a.jslet name = "a文件"//...原创 2020-09-14 10:44:40 · 497 阅读 · 0 评论