目录结构copy-webpack-plugin工作中会有一些已经存在但在项目中没有引用的图片资源或者其他静态资源（比如设计图、开发文档），这些静态资源有可能是文档，也有可能是一些额外的图片。打包时保留这些静态资源，直接打包到制定文件夹 安装依赖cnpm install copy-webpack-plugin --save-dev webpack.config.js from:要打包的静态资源目录地址，这里的__dirname是指项目目录下，是node的一种语法，可以直接定位到本机的项目目录中。to...
先看下webpack官方文档中对模块的描述： 在模块化编程中，开发者将程序分解成离散功能块(discrete chunks of functionality)，并称之为模块。每个模块具有比完整程序更小的接触面，使得校验、调试、测试轻而易举。 精心编写的模块提供了可靠的抽象和封装界限，使得应用程序中每个模块都具有条理清楚的设计和明确的目的。webpack 的核心概念之一就是一切皆模块，webpack 在项目中的作用就是，分析项目的结构，找到 JavaScript 模块以...
webpack.config.js在配置devtool时，webpack给我们提供了四种选项 source-map:在一个单独文件中产生一个完整且功能完全的文件。这个文件具有最好的source map,但是它会减慢打包速度；cheap-module-source-map:在一个单独的文件中产生一个不带列映射的map，不带列映射提高了打包速度，但是也使得浏览器开发者工具只能对应到具体的行，不能对应到具体的列（符号）,会对调试造成不便。eval-source-map:使用eval打包源文件模块，在同一...
在讲解之前，我们先来看看效果如下所示： 1）整个页面的效果如下：2) 新增数据效果如下：3) 新增成功如下：4) 编辑数据效果如下：5) 编辑成功效果如下：6) 删除数据效果如下：7) 删除成功效果如下：8) 查询效果如下：如上的效果，下面我们还是和之前一样，先看看我们整个项目的架构如下所示： ### 目录结构如下： demo1 # 工程名 | |--- dist # 打包后生成的目录文件 | |--- node_modules # 所有的依赖包...
简介 安装 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...
一、ESLint协同开发过程中，经常感受到来自代码检视的恶意。代码习惯不一致，看半天；居然提交低级错误，我的天(╯‵□′)╯︵┻━┻！...研究了一番，决定使用ESLint来做代码规范检查。 二、配置方式JavaScript注释：通过JavaScript注释把配置信息嵌入代码中。package.json：在package.json文件中的eslintConfig字段中指定配置。配置文件：通过.eslintrc.(js/json/yaml/yml)的独立文件来为整个目录或者子目录指定配置信息，ESlint...
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 模块解析器。 代码很少，github地址：手写webpack模块解析器 整体流程分析1、读取入口文件。 2、将内容转换成 ast 语法树。 3、深度遍历语法树，找到所有的依赖，并加入到一个数组中。 4、将 ast 代码转换回可执行的 js 代码。 5、编写 require 函数，根据入口文件，自动执行完所有的依赖。 6、输出运行结果。 cr...
本文主要记录了非模块化js如何使用webpack打包 模块化打包实现方式 webpack是模块打包工具，通过入口文件递归遍历其依赖图谱，绝对是打包神器。 bar.jsexport default function bar() {// }foo.jsimport bar from ./bar;bar();通过如下，webpack配置很快实现打包。通过插件我们还可以实现文件压缩，开发态我们还可以配置sourceMap进行代码调试(chrome浏览器支持sourcemap调试)。module.exports = {entry: ./foo.js,output: {filena...
webpack在单页面打包上应用广泛，以create-react-app为首的脚手架众多，单页面打包通常是将业务js，css打包到同一个html文件中，整个项目只有一个html文件入口,但也有许多业务需要多个页面不同的入口，比如不同的h5活动，或者需要支持seo的官方网站，都需要多个不同的html，webpack-react-multi-page架构让你可以实现多页面架构，在项目开发中保证每个页面都可以热更新并且打包后有清晰的文件层次结构。 Github地址 项目架构技术使...
我们知道使用webpack打包vue项目后会生成一个dist文件夹，dist文件夹下有html文件和其他css、js以及图片等，那么打包后的文件该如何正确运行呢？倘若直接打开html文件，会报如下错误：那么该如何运行呢？其实可以将生成的dist文件部署到express服务器上运行。（1）、安装express-generator生成器。 npm install express-generator -g // 也可使用cnpm比较快 （2）、创建一个express项目。express expressName // expr...
当我使用angular-cli构建项目时,它会将所有项目文件捆绑到一个主要的主包中. 我在应用程序中使用了懒惰路由,一旦应用程序加载,我就可以导航. 有没有一种方法可以将主包分为多个基于懒惰加载的路由模块的文件？ 下面是角度-cli.json中的配置 {"project": {"version": "1.0.0-beta.15","name": "maddy-test-project"},"apps": [{"root": "src","outDir": "dist","assets": "styles/content","index": "default.htm","main": "main.ts...
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:...