使用es6+新语法编写代码，可是不能运行于低版本浏览器，需要将语法转换成es5的。那就借助babel转换，再加上webpack打包，实现代码的转换。 转换包括两部分：语法和API let、const这些是新语法。 new promise()等这些是新API。 简单代码 类库 utils.js const name = weiqinllet year = new Date().getFullYear()export { name, year }index.js import _ from lodashimport { name, year } from ./utilsPromise.resolve(year).then(v...
使用vue init webpack 创建vue项目时报如下错误： vue init webpack my-projectC:\Users\computer\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-init:60 let template = program.args[0] ^^^SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode at exports.runInThisContext (vm.js:53:16) at Module._compile (module.js:374:25) at Object.Module._extension...
在开发vue的项目（我使用的是vue2）,需要添加js，虽然可以通过npm install 安装插件，但是如果有一些插件并没有开源，这时候我们只有脸上宽面条了。所以我更倾向于在webpack中引入外部js文件。 1.直接引用Note:(红色标注部分) 位置1：将页面中需要用到的js，引入进来，from 后面是该js所在的文件目录； 位置2：需要用到位置一中定义的变量Swiper; 位置3：为防止eslint严格模式下报错，需要将位置2定义的swiper再次调用一下； 以上这...
适用情况 首先说明，此情况不具备普遍性。若你的情况与笔者类似那么希望这篇文章能够帮到你。 我的项目情况是这样的：用node.js做后台，ejs做模板引擎（即整个页面是一个ejs文件）由node.js将数据渲染完成后，再将完整页面返回给用户。 那么这样做会遇到的问题： 1. 本项目没有html页面，ejs的作用也不是引入公共的组件，直接就是一个完整的页面，用webpack中处理ejs文件的loader返回的是一个函数，故会产生问题 2.由于node.js配置...
当我们用vue-cil建立一个完整的webpack+vue的项目之后，它的设置选项还是蛮多的。比如，当我们输入npm run dev开始跑起项目之后，就会自动的打开浏览器，并把页面打开。 按理说，这是一个很方便的配置。问题是，我们在调试的过程中，可能需要不断的重启项目。每一次重启，就会开一个网页，让我非常头疼。 查看了一下，找到了解决方法，分享给各位看官。 打开 /build/dev-server.js 文件 末尾，代码如下： // when env is testing, ...
一、npm 版本需要大于 3.0，如果低于此版本需要升级它： # 查看版本 $ npm -v 2.3.0#升级 npm cnpm install npm -g 二、在用 Vue.js 构建大型应用时推荐使用 NPM 安装： # 最新稳定版 $ cnpm install vue三、Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。 # 全局安装 vue-cli $ cnpm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project # 这里需要进行一些配置，默认回...
前言 最近搞vue+webpack，vue的api还是比较容易懂的，每次build很复杂，这里就介绍下热启动调试吧，心累~~~ ITDogFire –sky 工具及目录 所用的到的简单工具 webstorm +vue +webpack +express，小项目都是官方down下来的。 目录介绍如下package {"name": "yx","version": "1.0.0","description": "A sample Node.js app using Express 4","main": "server.js","scripts": {"build": "webpack --config ./build/webpack.dev.conf.js...
1：下载需要 swiper 的js文件和css文件 http://www.swiper.com.cn/2：下载好swiper相关的js和css，js放在static目录下，css放在assets目录下。 3：安装runtime： npm install babel-runtime 4：修改.eslintrc.js文件如下： 最后一行添加globals: {"Swiper": true} //这个地方是新加入的 全局注入5： vue模板中引入 swiper.min.js import Swiper from @/../static/js/swiper.min.js;6： vue模板中引入 swiper-3.4.2.min.css @import...
记录下webpack-dev-server的用法. 首先，我们来看看基本的webpack.config.js的写法module.exports = {entry: ./src/js/index.js,output: {path: ./dist/js,filename: bundle.js}}配置文件提供一个入口和一个出口，webpack根据这个来进行js的打包和编译工作。虽然webpack提供了webpack --watch的命令来动态监听文件的改变并实时打包，输出新bundle.js文件，这样文件多了之后打包速度会很慢，此外这样的打包的方式不能做到hot replac...
css加载器在webpack中，所有的资源（js文件、css文件、模板文件，图片文件等等）都被看成是一个模块，因此多有的资源都是可以被加载的。 加载这些资源我们要在module属性定义这些加载配置（指定加载器）。 在module属性中，通过定义loaders定义加载器，其属性值是一个数组，每一个成员代表一个配置。 通过test定义匹配的规则（正则表达式）通过loader定义加载器，可以通过！级联多个加载器加载css是要两个加载器，一个是style-load...
简介 我们开发不可能只写一个页面，每次都要写很多页面，这时为了开发效率，我们使用前端自动化工具webpack，那么webpack是如何打包页面的呢？又是如何打包多页面的呢？ 单页面打包 我们知道要打包单页面的方法，很简单，配置入口，和html插件，const HtmlWebpackPlugin = require(html-webpack-plugin);const config = {entry:{index:./src/index.js},output:{path: path.join(__dirname, dist),filename: js/index.js}...plugins...
vue cli搭建的项目，在本地测试调试都OK，运行npm run dev之后运行正常，今天放到服务器上跑，结果RD说找不到打包后的静态资源，浏览器控制台错误代码404 问了RD，因为服务器上线方式的调整，不会指定具体项目路径因此，https://bigdata.yiche.com/static/css/app.149f36018149fcbe537f02cafdc6f047.css 这个文件找不到，看看我们正常打包好的目录：正确的访问路径是：https://bigdata.yiche.com/deploy/static/css/app.149f360181...
这节课讲解webpack4中处理scss。只需要在处理css的配置上增加编译scss的 LOADER 即可。1. 准备工作为了方便叙述，这次代码目录的样式文件只有一个scss文件，以帮助我们了解核心 LOADER 的使用。 下图展示了这次的目录代码结构： 目录结构这次我们需要用到node-sass，sass-loader等 LOADER，package.json如下： {"devDependencies": {"css-loader": "^1.0.0","extract-text-webpack-plugin": "^4.0.0-beta.0","node-sass": "^4.9.2"...
这节课讲解webpack4中打包css的应用。v4 版本和 v3 版本并没有特别的出入。1. 准备工作众所周知，CSS 在 HTML 中的常用引入方法有<link>标签和<style>标签两种，所以这次就是结合webpack特点实现以下功能： 将 css 通过 link 标签引入将 css 放在 style 标签里动态卸载和加载 css页面加载 css 前的transform下图展示了这次的目录代码结构： 这次我们需要用到css-loader，file-loader等 LOADER，package.json如下： {"devDependen...
问题是这样的，我使用webpack的npm run dev运行的时候，keep-alive路由缓存是有效的，但是我npm run build，把文件放到实际的项目中去的时候，会有如下的问题： 路由如下： var menus = [{path: /user,name: 用户,component: /user,redirect: /user/index1,icon: fa-bandcamp,meta: {keepAlive: false},children: [{ path: index1, component: /user/index1, name: 用户管理1, meta: {keepAlive: true}},{ path: index2, component...