webpack 前端构建工具
上海_彭彭
这个作者很懒,什么都没留下…
展开
-
前端应用_webpack_理解webpack的概念
在网页中引用的静态资源?jscssimages模板文件.ejs , .jade .vue[webpack中定义组件的方式推荐的方式]网页引入静态资源多了 以后有什么问题?网页加载速度慢, 因为 有可能有很多的二次请求请求js1>依赖请求js2>依赖请求js3要处理错综复杂的依赖关系如何解决上述两个问题 ?合并 ,压缩 >>&g...原创 2019-08-19 15:16:40 · 296 阅读 · 0 评论 -
webpack中配置babel 来处理高级js类型语法
安装 babel 相关的插件npm i babel-core babel-loader babel-plugin-transform-runtime -Dnpm i babel-preset-env babel-preset-stage-0 -D这个两套都需要安装在webpack 的配置文件添加匹配规则...原创 2019-08-21 18:56:51 · 526 阅读 · 0 评论 -
webpack-babel解决babel-loader@8.0.5 requires a peer of @babel/core@^7.0.0 版本兼容的问题
# 第一套包,相当于babel的转换工具npm i babel-core babel-loader babel-plugin-transform-runtime -D# 第二套包,babel的语法npm i babel-preset-env babel-preset-stage-0 -D## 安装第一个包出现报警告 babel-loader@8.0.5 requires a peer o...原创 2019-08-21 18:29:20 · 15183 阅读 · 1 评论 -
webpack-使用url-loader处理字体文件
把字体文件放到 icons 文件下在css 引用这个 .icon{ width: 50px; height: 50px; background: url("../icons/check-circle.svg"); background-size: cover; }in...原创 2019-08-21 16:56:20 · 1101 阅读 · 0 评论 -
webpack-使用url-loader处理url 图片
安装 url-loadernpm i url-loader file-loader -Dfile-loader 是依赖包。在images 文件夹放一个图片 ,test.jpg配置 规则如下: module: {//这个节点用于配置所有的第三方模块加载器 rules:[//所有第三方模块的匹配规则 {test: /\.css$/,use:['st...原创 2019-08-21 16:06:19 · 653 阅读 · 0 评论 -
webpack-配置处理less 文件的loader
Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量、混合(mixin)、函数等功能,让 CSS 更易维护、方便制作主题、扩充。安装 less-loadernpm i less-loader -D安装依赖包less,npm i less -D定义less匹配规则 module: {//这个节点用于配置所有的第三方模块加载器 rules:[...原创 2019-08-21 13:33:31 · 1720 阅读 · 0 评论 -
webpack-loader处理css样式表
我们想在main.js 导入咱们的样式 ,import './CSS/index.css'在 css 目录下创建 inex.css然后把 index.html 的style 放到这个文件里*{ padding: 0; margin: 0;}.form{ width: 500px; margin: 100px auto 0;}table{ ...原创 2019-08-21 00:11:27 · 204 阅读 · 0 评论 -
html-webpack-plugin的两个基本作用
我们知道前面 bundle.js 是保存在内存中 ,优点就是速度快, 那咱们也想让 html 也放到内存中, 就要用到一个插件html-webpack- plugin首先先安装这个插件npm i html-webpack-plugin -D导入 在内存中生成html 页面的插件进入 webpack.config.js 里 添加内容如下:const path= require(...原创 2019-08-20 22:56:19 · 1735 阅读 · 0 评论 -
webpack-dev-server的 常用命令参数01
自动打开浏览器"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "webpack-dev-server --open", "build": "webpack --mode production"在dev 执行命令里 使用webpack-dev-serve...原创 2019-08-20 19:02:04 · 730 阅读 · 0 评论 -
前端应用_webpack-dev-server的基本使用_ 实现自动打包
在使用之前要先要先安装,安装的命令如下:npm i webpack-dev-server -D 看是否有提示 需要安装webpack ,webpack 官方支持在本地安装npm i webpack -D我的安装目录如下: "devDependencies": { "webpack": "^4.39.2", "webpack-cli": "^3.3.7", ...原创 2019-08-20 18:28:39 · 475 阅读 · 0 评论 -
前端应用_webpack_基本的配置文件使用
咱们的目标是 ,直接用webpack 就直接帮我们打包,不需要输入 源文件 和目标文件 webpack .\src\main.js -o .\dist\bundle.js 如何能做到呢, 就需要我们配置文件了在项目目录下添加一个配置文件名字为 webpack.config.js ,添加这个配置文件的目的就是 添加 入口的文件 和打包后的文件路径 。const path= requ...原创 2019-08-20 14:14:05 · 246 阅读 · 0 评论 -
webpack4.0-解决webpack 报The 'mode' option has not been set, webpack will fallback to 'production' fo
升级webpack4.0后,打包报如下错误:WARNING in configurationThe 'mode' option has not been set, webpack will fallback to 'production' for thisvalue. Set 'mode' option to 'development' or 'production' to enable de...原创 2019-08-20 13:53:46 · 26660 阅读 · 4 评论 -
前端应用-webpack-解决webpack 报错Module not found: Error: Can't resolve '.\dist\bundle.js' in 'D:\tasks_
当我使用命令 webpack .\src\main.js .\dist\bundle.jsmain.js 是源文件, bundl.js 是生成的文件 ,但是报错如下:这是为什么呢?原因是我的webpack版本过高,原来的命令已经不适用了如下查询版本号:那应该如何解决?更换打包命令为: webpack .\src\main.js -o .\dist\bundle.js其中 ...原创 2019-08-20 11:46:43 · 19177 阅读 · 12 评论 -
前端应用_webpack_基本的使用方式
webpack 安装的两种方式使用 npm i webpack -g 是全局安装 , 安装一次以后就不需要安装了在项目根目录中运行 ‘npm i webpack --save-dev’ 安装项目依赖中, 只是针对这个项目, 其他项目不可以用创建项目目录结构安装 jquery在主目录执行 npm init -y 进行初始化执行 npm i jquery ...原创 2019-08-19 18:41:09 · 168 阅读 · 0 评论 -
webpack- 两种方法解决: You are using the runtime-only build of Vue where the template compiler is not报错
安装 vue安装命令如下:npm i vue -S在webpack 使用vue在main.js 导入 vueimport Vue from 'vue'var vm= new Vue( { el:'pp', data:{ msg:'我是个好学生,爱学习,爱劳动,自己的事情自己做' } })...原创 2019-08-22 15:23:03 · 931 阅读 · 0 评论