Webpack

webpack 3 零基础入门教程 #5

人走茶凉 提交于 2020-12-26 09:42:38
之前我们已经可以转化 js 文件了,但是一般来说,我们放在网页上的是 html 页面。 现在我们就把 html 和 js 还有 webpack 结合来玩玩。 很简单,只要把 js 文件引入到 html 中就好。 1. 创建 index.html 首先在 dist 目录下创建 index.html 文件,其内容如下: <!DOCTYPE html> <html lang= "en" > <head> <meta charset= "UTF-8" > <title>Project </title> </head> <body> <script src= "app.bundle.js" ></script> </body> </html> 这样,你在服务器上把这个 index.html 和 app.bundle.js 放到网站根目录中,用 nginx 托管起来,就可以用了。 前端的项目不就是这样处理的吗? 但是,我一般不会这么做,我会用更好的方式来处理这个问题。 为什么呢? 因为 index.html 文件太死了,连 js 文件都写死了,有时候引用的 js 文件是动态变化的呢? 打个比方,类似下面这种例子: <script src= "app.bundle1.js" ></script> <script src= "app.bundle2.js" ></script> <script

How to include “leaflet.css” in a React app with webpack?

好久不见. 提交于 2020-12-26 07:03:37
问题 I using the survivejs.com site as a template to build a map based React app with webpack. For the map i am using leaflet but i can't find a way to add the leaflet.css. Without this the map tiles are displayed in the wrong order. I have tried adding the leaflet.css to the App.jsx file using this require('leaflet/dist/leaflet.css'); but get the following error ERROR in ./~/leaflet/dist/leaflet.css Module parse failed: myApp/node_modules/leaflet/dist/leaflet.css Unexpected token (3:0) You may

How to include “leaflet.css” in a React app with webpack?

▼魔方 西西 提交于 2020-12-26 07:00:23
问题 I using the survivejs.com site as a template to build a map based React app with webpack. For the map i am using leaflet but i can't find a way to add the leaflet.css. Without this the map tiles are displayed in the wrong order. I have tried adding the leaflet.css to the App.jsx file using this require('leaflet/dist/leaflet.css'); but get the following error ERROR in ./~/leaflet/dist/leaflet.css Module parse failed: myApp/node_modules/leaflet/dist/leaflet.css Unexpected token (3:0) You may

基于vue-cli,sass,vant的移动端项目

牧云@^-^@ 提交于 2020-12-26 06:26:18
项目架构 开始 vue init webpack 项目名称 //新建项目,cd进入新项目 npm install axios //先安装! npm install --save axios vue-axios //然后! npm install vuex --save //安装vuex npm i vant -S //安装vant,Ui框架,选择性安装 npm install babel-plugin-import -D // 与vant是绑定安装关系 配置babelrc文件 "plugins": [ "transform-vue-jsx", "transform-runtime", ["import", [{ "libraryName": "vant","libraryDirectory":"es","style": true }] ] 然后可以在模块中引入或全局引入,本人采用全局引入 import { Button } from 'vant' Vue.use(Button) npm install --save-dev node-sass sass-loader //安装sass npm install mockjs //选择性安装,mock数据 打开webpack.base.config.js在loaders里面加上 { test: /\.scss$/, loaders: [

进阶攻略|前端完整的学习路线

浪子不回头ぞ 提交于 2020-12-26 00:58:34
最近写了一篇关于前端一些常见轻便耐用的UI框架的小总结,很多小伙伴私信问我,要怎么学习前端,没有明确的方向,为了感谢大家的关注点赞打赏和喜欢,决定把前端的学习进阶之路稍微整理一下,也为了自己能在工作之中思路更加的清晰。姑娘水平能力火候不够尚在学习中,如有不足,欢迎批评指正补充。 初级阶段 阿里矢量图标库:http://www.iconfont.cn/ ps使用教程:http://www.16xx8.com/ JavaScript教程:http://www.runoob.com/js/js-tutorial.html css教程:http://www.runoob.com/css/css-tutorial.html css3教程:http://www.runoob.com/css3/css3-tutorial.html HTML教程:http://www.runoob.com/html/html-tutorial.html HTML5教程:http://www.runoob.com/html/html5-intro.html jQuery 教程:http://www.w3school.com.cn/jquery/index.asp Ajax教程:http://www.runoob.com/ajax/ajax-intro.html HTTP1教程:http://www.runoob

【第554期】Webpack 一探究竟

自作多情 提交于 2020-12-25 13:39:56
前言 本文来自@晓风东东的投稿,相信webpack大家应该很熟悉了~~ 正文从这开始~ 记得我第一次上 webpack 官网的时候看了半天,最后总结是:这是个什么东西?!接下来的第二次第三次依然会有这种感觉,webpack 令人懵逼的文档对新手来说简直是噩梦。这篇文章针对 webpack 中令人疑惑的部分进行全面讲解,让你不再懵逼。 Webpack 是目前最火 React 和 Redux 打包工具,使用 Angular2 或者其他框架的人们可能也用了 Webpack 一段时间了。 当我第一次见到 Webpack 配置文件的时候,它看起来像火星文 来源: oschina 链接: https://my.oschina.net/u/4274700/blog/4840186

vue.config.js

…衆ロ難τιáo~ 提交于 2020-12-25 13:39:30
3.x的脚手架封装了webpack绝大部分配置,使得生成的项目更加清晰,但是在开发中免不了会有自己的个性需求,来添加一些自己的项目配置,此时只需在项目的根目录下新建一个vue.config.js文件即可, module.exports = { //打包文件输出路径,即打包到哪里 outputDir: 'dist', // 静态资源地址 assetsDir: 'static', // eslint-loader 是否在保存的时候检查 lintOnSave: false, // 生产环境是否生成 sourceMap 文件 productionSourceMap: false, filenameHashing: true, //文件hash // chainWebpack 这个库提供了一个 webpack 原始配置的上层抽象,使其可以定义具名的 loader 规则 // 和具名插件,可以通过其提供的一些方法链式调用,在cli-service中就使用了这个插件 chainWebpack: () => {}, /* configureWebpack是调整webpack配置最简单的一种方式,可以新增也可以覆盖cli中的配置。 可以是一个对象:被 webpack-merge 合并到webpack 的设置中去 也可以是一个函数:如果你需要基于环境有条件地配置行为,就可以进行一些逻辑处理

webpack 打包后 Uncaught SyntaxError: Unexpected token <

﹥>﹥吖頭↗ 提交于 2020-12-24 19:06:08
  问题描述 :npm run dev 没报错。是可以正常运行的,        npm run build 过程也没报错,         但是打开dist index.html 就报错了    错误内容:                 解决方法:         1. npm run build 改成 cnpm run build         2.                       这个地方加个点。    ps:是不是很简单,具体是什么原因,我也不清楚,但是浪费了我好几天时间,好气(`ヘ´)=3 来源: oschina 链接: https://my.oschina.net/u/4358820/blog/3907515

前端骨架屏

戏子无情 提交于 2020-12-24 19:04:08
骨架屏 最近在项目不时有用到骨架屏的需求,所以抽时间对骨架屏的方案作了一下调研,骨架屏的实践已经有很多了,也有很多人对自己的方案作了介绍.在这里按照个人的理解做了一个汇总和分类,分享给大家. 关于骨架屏(简介) 骨架屏就是在页面数据尚未加载前先给用户展示出页面的大致结构,直到请求数据返回后再渲染页面,补充进需要显示的数据内容。常用于文章列表、动态列表页等相对比较规则的列表页面。 很多项目中都有应用:ex:饿了么h5版本,知乎,facebook等网站中都有应用。 借个图举例如下: 两类用途 简介中作了关于用途的说明,但是仍然可以继续细分: 作为spa中路由切换的loading,结合组件的生命周期和ajax请求返回的时机来使用. 作为首屏渲染的优化. 第一类用途 第一类用途需要自己编写骨架屏,推荐两个成熟方便定制的svg组件定制为骨架屏的方案 react-content-loader vue-content-loader 作为首屏渲染(自动化方案) 该方案是饿了么在骨架屏的实践中总结出的一套方案: 骨架屏的dom结构和css通过离线生成后构建的时候注入模板中的节点下面. 原理相关 eleme骨架屏插件实现原理 方案的项目地址: page-skeleton-webpack-plugin 使用时候的注意点: cssUnit的配置: 需要使用自适应的单位,按照文档给出的选择范围选,直接用

webpack 打包json文件,报 Unexpected token, expected ";"错误解决方案

南楼画角 提交于 2020-12-24 18:43:13
webpack 打包json文件,报 Unexpected token, expected ";"错误解决方案 参考文章: (1)webpack 打包json文件,报 Unexpected token, expected ";"错误解决方案 (2)https://www.cnblogs.com/wangyinqian/p/11548886.html 备忘一下。 来源: oschina 链接: https://my.oschina.net/u/4437974/blog/4838180