正如Vue官方所说，SSR配置适合已经熟悉 Vue, webpack 和 Node.js 开发的开发者阅读。请先移步ssr.vuejs.org 了解手工进行SSR配置的基本内容。 从头搭建一个服务端渲染的应用是相当复杂的。如果您有SSR需求，对Webpack及Koa不是很熟悉，请直接使用NUXT.js。 本文所述内容示例在 Vue SSR Koa2 脚手架 ： https://github.com/yi-ge/Vue-SSR-Koa2-Scaffold 我们以撰写本文时的最新版：Vue 2，Webpack 4，Koa 2为例。 特别说明 此文描述...
一、ESLint协同开发过程中，经常感受到来自代码检视的恶意。代码习惯不一致，看半天；居然提交低级错误，我的天(╯‵□′)╯︵┻━┻！...研究了一番，决定使用ESLint来做代码规范检查。 二、配置方式JavaScript注释：通过JavaScript注释把配置信息嵌入代码中。package.json：在package.json文件中的eslintConfig字段中指定配置。配置文件：通过.eslintrc.(js/json/yaml/yml)的独立文件来为整个目录或者子目录指定配置信息，ESlint...
新建项目的时候创建合理的目录结构便于后期的维护是很重要 环境：vue、webpack 目录结构： 项目子目录结构子目录结构都差不多，主要目录是在src下面操作 src目录结构src/common 目录 主要用来存放公共的文件src/components 主要用来存放公共的组件 src/config 用来存放配置文件，文件目录如下src/config/index.js 配置目录入口文件 import api from ./website// 当前平台 export const HOST_PLATFORM = WEB // 当前环境 export con...
前言最近新起了一个多页项目，之前都未使用 webpack4，于是准备上手实践一下。这篇文章主要就是一些配置介绍，对于正准备使用 webpack4 的同学，可以做一些参考。 webpack4 相比之前的 2 与 3，改变很大。最主要的一点是很多配置已经内置，使得 webpack 能“开箱即用”。当然这个开箱即用不可能满足所有情况，但是很多以往的配置，其实可以不用了。比如在之前，压缩混淆代码，需要增加uglify插件，作用域提升(scope hosting)需要增...
前言 最近搞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...
什么是webpack webpack是一个module bundler（模块打包工具），所谓的模块就是在平时的前端开发中，用到一些静态资源，如JavaScript、CSS、图片等文件，webpack就将这些静态资源文件称之为模块 webpack支持AMD和CommonJS，以及其他的一些模块系统，并且兼容多种JS书写规范，可以处理模块间的以来关系，所以具有更强大的JS模块化的功能，它能对静态资源进行统一的管理以及打包发布，在官网中用这张图片介绍：它在很多地方都能替代Gr...
本文实例讲述了webpack4.x开发环境配置方法。分享给大家供大家参考，具体如下： 写这篇文章的初衷在于，虽然网络上关于webpack的教程不少，但是大多已经过时，由于webpack版本更新后许多操作变化很大，很多教程的经验已经不适合。当我们使用npm安装webpack时，若不指定webpack的版本，将默认安装最新版，笔者测试时默认安装的是4.1.1，并不能照搬老教程的方法。为此，笔者进行了最新版配置的探索，使用的是windows操作系统，如果你...
React提供了create-react-app的快速构建工具, 但作为一个专业的程序员(老司机), 面对复杂的项目, 入门级的构建工具, 是远远不够的, 我们这里从零开始, 用webpack, 手动配置一个独立的React开发环境, 开发环境完成后, 支持自动构建, 自动刷新, sass语法 等功能... 1. 首先用npm初始化环境mkdir react-webpack-demo cd react-webpack-demo npm init -y 安装相关软件包npm install react react-dom webpack webpack-cli webpack-dev-s...
前言由于前后端分离的前端应用脱离了后端的支持，在单独开发前端应用时，页面调试时使用固定的开发环境地址还好，如果出现在本地开发时需要调试不同环境的远端API，或者需要将应用部署到不同环境的服务器上时，如果不将这些环境对应的服务器地址、环境专属变量等单独配置，也许每次切换环境都需要修改大量代码。网上关于这部分的资料较少，所以下面将以用vue-cli init命令生成的Vue/Webpack项目作为例子，介绍一下我当前正在使用的...
项目开发中，前端在配置后端api域名时很困扰，常常出现:本地开发环境: api-dev.demo.com测试环境: api-test.demo.com线上生产环境: api.demo.com， 这次是在Vue.js项目中打包，教大家个方法： 使用 npm run build -- xxx ，根据传递参数xxx来判定不同的环境，给出不同的域名配置。 1.项目中/config/dev.env.js修改： 新增：HOST: "dev" use strict const merge = require(webpack-merge) const prodEnv = require(./prod.env)mod...
一，准备工作 1.下载node.js 和 npm 2.将镜像源替换为淘宝镜像 二，创建目录及安装webpack创建项目 在命令行中输入 npm init -y我们看到了项目中多了一个package.json文件，它定义了这个项目中所需各种模板及项目中的配置信息。该对象的每一个成员就是当前项目的一项设置。详细设置信息请参考 https://docs.npmjs.com/files/package.json 安装webpack 全局安装webpack,在命令行输入 npm install webpack -g npm install webpack-cl...
最近正在研究webpack，听说webpack可以自己搭建一个小型的服务器（使用过vue-cli的朋友应该都见识到过），所以迫不及待的想要尝试一下。不过，在实际操作中发现，用webpack搭建服务器仍有不少坑，一方面是由于自己对文档的不熟悉，不了解webpack-dev-server的运作模式；另一方面，在翻阅了不少博客和文章后，发现不少配置实际上都跑不起来（有可能是版本的原因，也有可能是我自己配置的原因）。所以我打算用webpack3.0把dev-server...
本文介绍了浅谈webpack-dev-server的配置和使用，分享给大家，具体如下：1安装的WebPack-dev-server 在终端输入 npm i webpack-dev-server安装webpack-dev-server包 2.配置dev-server 在package.json文件中的脚本中添加代码 "dev":"WebPack-dev-server --config webpack.config.js” 在webpack.config.js文件中全局添加 target:"web" 终端输入 npm i cross-env安装env 配置环境变量 "build": "cross-env NODE_ENV=production webpa...
WebPack虐我千百遍，我带她如初恋。一个项目前台页面写差不多了，webpack几乎零配置，也算work起来了。现在需要编写后台管理界面，另起一个单独的项目，那是不存在的。于是网上了搜了大把大把的文章，很多都是修改了项目的结构，讨厌，vue-cli搞的那一套，干嘛要修改来修改去的。像我这种前端小萌新，webpack的配置改着就把前台部分run不起来了。。。 于是就有了这个笔记： 先看看项目的结构： ├── build ├── config ├── ...
问题项目在开发环境下工作正常，当打包后图片不见了，检查元素后发现路径出错了。图片路径是这样：background: url(/static/img/bg_camera_tip.bd37151.png)，但该路径下文件并不存在。打包后文件目录如下：可以看到背景图片的路径应该是../../static而实际却是/static，找到原因后就好解决了 方法一查看build目录下webpack.base.conf.js的配置，图片文件会经过url-loader处理。module: {rules: [...{test: /\.(png|jpe?g|gif|svg)...