当我们需要和后台分离部署的时候，必须配置config/index.js:用vue-cli 自动构建的目录里面 （环境变量及其基本变量的配置）var path = require(‘path‘)module.exports = {build: {index: path.resolve(__dirname, ‘dist/index.html‘),assetsRoot: path.resolve(__dirname, ‘dist‘),assetsSubDirectory: ‘static‘,assetsPublicPath: ‘/‘,productionSourceMap: true},dev: {port: 8080,proxyTable: {}} }在‘build‘部分，...
有两个组件home和search两个组件中都有class为footer的元素但是search的footer比home的多一条background的样式本地开发的时候没问题，但是打包之后，home也被打包上了background的样式暂时处理方法是home和search的footer元素使用不同的class原文：https://www.cnblogs.com/chenzeyongjsj/p/8414207.html
铭文真义 一种前端资源构建工具，一个静态模块打包器。它会根据模块的依赖关系进行静态分析，打包生成对应的静态资源。 五大神将 1、entry:打包入口 入口指示webpack以哪个文件为入口起点开始打包，分析构建内部依赖图 2、output:打包出口 输出（output）指示webpack打包后的资源bundles输出到哪里去，以及如何命名 3、loader: loader让webpack能够去处理那些非JS文件（webpack自身只能解析js/js...
本文重点介绍Vue单页面应用的优化手段：异步加载面切换时加loading特效点击延迟inline manifest逻辑代码优化依赖包体积优化cdn引用Vue代码优化异步加载所谓的异步加载组件，其实就是组件懒加载。可以理解为：当我需要使用组件的时候才进行加载。主要包含两部分：路由配置和子组件的调用。所以在router文件夹下 index.js 做如下配置组件优化由于是后台项目，所以选择element-ui框架进行后台系统搭建，所以对这个进行优化也可以减小体...
webpack创建compiler实例，如果options是数组，则创建多个compiler;初始化compiler，为compiler添加上下文context和options，初始化基本插件;compiler调用run，run内调用compile方法，开始编译;compile内创建compilation对象，并将this传入，compilation就包含了对compiler的引用;compiler调用addEntry，addEntry调用_addModuleChain();_addModuleChain查询合适的工厂函数开始创建模板，并将其加入module链当中，调用buildModule()...
问题描述：前端需要修改restful API的url，但是打包之后，配置文件找不到了，如果在npm run build 生成dist后，这个配置也被写死了，传到运行的前端服务器上后，假设某次，api服务器的ip修改了，改动只是更新下这个url，但是却需要会到前端源码，url后，在重新npm run build,然后再把整个dist再重新传到前端服务器，才可以。解决方法：用了generate-asset-webpack-plugin 这个插件，在webpack.prod.conf.js中去生成configServer.js...
Loaders是webpack中最核心的功能。通过使用不同的loader，webpack通过调用外部的脚本和工具可以对各种各样的格式文件进行处理。比如说分析JSON文件并把它转换为javascript文件，或者说把新的JS文件如ES6,ES7转换为现代浏览器可以识别的JS文件。或者说对React的开发而言，合适的Loaders可以把React的JSX文件转换为JS文件。 其实一句话就是打包编译不同的文件使用不同的loder文件就可以了。在webpack.config.js的模块modules下进行配...
现在介绍一个webpack需要下载的插件 HtmlWebpackPlugin这插件的作用是依据一个简单的模版，帮你生成最终的HTML5文件，这个文件中自动引用了你打包后的JS文件，每次编译都在文件名中插入一个不同的哈希值。安装命令：npm install --save-dev html-webpack-plugin这个插件自动完成了我买之前手动做的一些事情，在正式使用之前需要对一直依赖的项目结构做一些改变：移除public文件夹，利用此插件，HTML5文件会自动生成，此外CSS已经通...
拖了好久，终于决定系统学习一下webpack(其实是自己懒，哈哈哈)，学习任何东西都要亲自动手才行，learn by doing 才是最高效的学习方法，以下是我在学习webpack的心得和踩得的坑，希望看到的同行，可以少踩坑，文章写得烂，不要介意，哈哈哈，下面开始表演。什么是webpack就不用介绍了，我主要列举遇到的问题。使用步骤：新建一个文件夹，然后npm init初始化一下，然后非全局安装webpack1.打包时记得全局安装webpack，否则命令会报...
本文目标从零搭建出一套支持react+less+typescript+mobx的webpack配置 最简化webpack配置 首页要初始化yarn和安装webpack的依赖 yarn init -y yarn add webpack webpack-cli -D 根目录下新建webpack.config.js文件，内容如下 const path = require(‘path‘);module.exports = {mode: ‘development‘,// 入口 这里应用程序开始执行entry: path.resolve(__dirname, ‘src/index.tsx‘),// 出口 output: {// 输出文件的目标路径...
去年安装过webpack，很顺利。但是作为一个安装失败体质，今儿安装又变得复杂了，==》最近webpack更新了。。。在确保安装好node & npm后，我们开始安装webpack1. 以admin身份进入cmd2. 可以看到很多warning，感觉为以后留下了隐患，因为是最新版本，其他的依赖包还没有很好的支持，晕倒，为什么受伤的总是我。先试试吧，路加，加油！ 3. 开心了一下，vue-cli 直接可以用webpack， ps: must run in admin cmd 原文：https://www.cnbl...
WebPack使用核心概念参考文档webpack v4.44.1中文文档https://www.webpackjs.com/concepts/webpack v5.0.0-beta.24https://webpack.js.org/concepts/四个核心组成入口 Entry输出 Output加载解释 Loaders插件 Plugins加上- 模式 Mode - 浏览器兼容性Browser Compatibility 示例目录结构src|- index.js // 入口文件 引入了a.js a.less index.css|- a.js // 示例js文件|- a.less // less文件|- index.css ...
配置webpacknpm i init --y npm i webpack -D npm i webpack-cli -D npm i @types/firefox-webext-browser @types/chrome -D // 浏览器扩展API提示 支持 Typescripttsc --init npm i typescript ts-loader -D 设置tsconfig.json配置文件{"compilerOptions": {"target": "ES2016","module": "commonjs", // ts-node 不支持 commonjs 以外的任何模块语法"allowJs": true,"outDir": "./dist","rootDir": "./src","strict": true,"...
webpack在不进行任何配置的情况下，他只认识js。为什么要打包？因为一个个小文件，我们合成一个，这样请求就只请求一次。webpack除了打包之外，还具有翻译官的功能？loader把浏览器看不懂的代码翻译成浏览器看的懂的代码。 Plugin？对文件做点别的事情不管是loader 还是 plugin 都是可插拔，意思就是你什么时候想用，你就装进来，不想用，删掉。所以说webpack不仅强大，而且灵活。 为什么要模块化？模块化的好处？ 如上图，传统的...
当我们打算使用Webpack构建工具，React和ES6来开发项目的时候，构建这么一套自动化的项目的流程见下： 第一步：webpack是一个基于node的项目，我们使用命令行对webpack进行全局的安装npm install webpack –g。可以通过webpack –h来查看安装的版本信息。然后我们新建一个文件夹用来存放整个项目文件。为了可以在项目中使用webpack，我们需要将webpack安装到当前的项目依赖中，在新建的文件夹下输入：npm init（安装webpack依赖，...