1、webapp项目已经通过vue-cli搭建的脚手架写好了，然后通过webpack打包成一个部署文件list，如下：2、打开HBulider,打开目录，选择这个list，项目名称自己更改。（或者直接新建一个app项目，然后把里边的unpackage和manifest这两个保留下来，其他的替换成自己dist文件里边的内容）这个时候是web项目，需要改为APP项目（如果直接新建的app，请忽略此步）更改前： 更改后： 3、在HB中打开这个dist，可以看到有一个manifest.json的文...
虽然已经2019年了 不过有一些项目 还是需要用到jquery的 不过考虑到使用jquery的一堆兼容性问题 也为了可以顺利地使用ES6来撸代码 研究使用webpack+babel打包代码来发布 几个重点：1.为了将模块分割加载，不至于一个js文件过大，一个页面中使用多个js文件 2.由于是多页项目（多个html），每个页面使用的js文件都不一致 基于以上两点，需要配置多个入口文件 3.会把小图片转换成base64，所以可能css转成的js文件会比较大，所以css文件...
gettext 是GNU 提供的一套 国际化与本地化 处理的相关函数库。大多数语言都有对应的gettext实现。本文主要使用jed 来实现gettext 一系列方法对应的功能。 pot/po文件 pot文件 是po文件的模板文件，一般是通过 xgettext 程序生成出来的。po文件 是根据pot文件通过msginit程序，设置对应的国家语言生成用于填写实际翻译内容的文件。xgettext/msginit/msgmerge xgettext 程序可以扫描指定的代码文件，取出其中gettext部分的内容生成对...
项目文件准备： 执行npm init,然后创建如下图所示的文件。在index.html里面添加 <!DOCTYPE html> <html><head><title>The Minimal React Webpack Babel Setup</title></head><body><div id="app"></div><script src="./bundle.js"></script></body> </html>在webpack.config.js里面添加 module.exports = {entry: ./src/index.js,output: {path: __dirname + /dist,publicPath: /,filename: bundle.js},devServer: {contentBase: ....
一直使用webpack,上次也分享过webpack配置es6~9的语法参考链接,但是对于一些小白童鞋来说,最基本的配置都不太知道,刚好利用春节休假期间对webpack4的知识点梳理一次。方便一些刚刚入行的人学习,也是对自己的一种总结与提高 一、几个盲点的解释1、全局安装与局部安装 对于一般的新手都有一个疑惑我是全局安装还是本项目中安装(局部安装),个人建议,现在前端发展那么快,我们使用局部安装的方式更好(使用最新的技术栈)。我们知道javasc...
简单介绍 首先本文不会对webpack代码进行解释，其所有配置都可以在文档上找到。 平时工作中会写一些多页面应用，因为习惯了react的开发模式，故此写了一个简单的配置，跟大家一起分享。如果你也喜欢，对你的开发有所帮助，希望给点鼓励（start） github地址：https://github.com/ivan-GM/Gm-cli 项目目录介绍：打包后文件目录：打包成cli如果你厌烦了新项目的复制、粘贴，也可以构建成cli 1，首先创建个文件夹，npm init初始化项目...
一般情况下，我们不用担心所使用的第三方库，在npm管理仓库中找不到。 如果需要某一个库，如：jquery，可以直接运行npm install jquery脚本命令来安装这个项目所需要的依赖； 然后，在使用jquery的模块文件中，通过import $ from 'jquery'或者var $ = require('jquery')来引入。 这是常用的在webpack构建的项目中引入第三方库的方式。 注：为了更好的演示示例代码，示例是在nodemon这篇文章的基础上操作的。 但是，在不同的场景下，...
本文讲解的是最近在做的一个多页面项目，结合webpack4的splitChunks进行代码包分拆的过程 项目框架项目有home和topic两个入口文件,主要包括： react、mobx、antd作为项目的基本框架，echarts和d3(画图)是项目中部分页面用到比较大的组件库src下的工作的组件和代码其他的非公共代码。两个入口文件都用react-loadable做了异步加载 import Loadable from react-loadable; ... const LoadableLogin = Loadable({loader: () => import(....
正如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为例。 特别说明 此文描述...
webpack.config.js在配置devtool时，webpack给我们提供了四种选项 source-map:在一个单独文件中产生一个完整且功能完全的文件。这个文件具有最好的source map,但是它会减慢打包速度；cheap-module-source-map:在一个单独的文件中产生一个不带列映射的map，不带列映射提高了打包速度，但是也使得浏览器开发者工具只能对应到具体的行，不能对应到具体的列（符号）,会对调试造成不便。eval-source-map:使用eval打包源文件模块，在同一...
简介 安装 npm install --save-dev file-loader用法 默认情况下，生成的文件的文件名就是文件内容的 MD5 哈希值并会保留所引用资源的原始扩展名。 import img from ./webpack-logo.pngwebpack.config.js module.exports = {module: {rules: [{test: /\.(png|jpg|gif)$/,use: [{loader: file-loader,options: {}}]}]} }生成文件 bd62c377ad80f89061ea5ad8829df35b.png （默认的文件名为 [hash].[ext]），输出到输出目录并返回 publi...
webpack同之前的gulp相比，gulp属于非模块化打包工具，webpack属于模块化打包工具，两者的优劣这里不做过多分析（可自行百度）。 目的：是为了分享一下使用过程中，用到的插件、loader、遇到的各种问题以及解决办法，最后会附上最终代码。 在这个项目中，用 webpack打包css、scss、js、图片文件、jquery、第三方插件、字体图标，编译es6、压缩html、压缩js、压缩css ，基本涵盖了常用的东西。 代码结构如下下面单独说几个难点 1、打...
在项目中经常会需要将一些接口的配合文件或者某些样式文件，分离出来单独打包，便于后期改动，这里我以css文件为例，介绍实现两种方法： 项目目录：如上图所示，现在我需要将项目中的scBtn.css文件单独打包出来。在不做任何配置，直接打包出来的css文件是压缩合并成了一个了，如下图，当我想要改某一个css文件时就不行了。方法一： 1、在bulid文件夹下建一个copy.js（这个js名称可以自定义）代码如下： var fs = require(fs); var...
webpack 的使用越来越广泛，但其中不乏很多鲜为人知的细节设置，甚至很多人会认为这是 webpack 的 bug。这次，我们就来聊一聊 webpack.optimize.CommonsChunkPlugin。这个 plugin 我相信几乎90%的用 webpack 的都用了这个，但我同样相信几乎 90% 的用了这个 plugin 的人都没有正确的使用。 entry: {index: ./app/main.jsx,vendor: [react, react-dom, react-router, classnames]},output: {path: path.resolve(__dirname, ./dist),...
1 基础回顾首先我们先回顾一下webpack常见配置，因为后面会用到，所以简单介绍一下。 1.1 webpack常见配置 // 入口文件entry: {app: ./src/js/index.js,},// 输出文件output: {filename: '[name].bundle.js',path: path.resolve(__dirname, 'dist'),publicPath: '/' //确保文件资源能够在 http://localhost:3000 下正确访问},// 开发者工具 source-mapdevtool: 'inline-source-map',// 创建开发者服务器devServer: {contentBase:...