webpack开发案例（一）

从零学习前端开发 2017-12-21

案例一（基本打包）

基本前置条件

webpack开发案例（一）

步骤一：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <body>
    <input type="text" id="v1" /> +
    <input type="text" id="v2" />
    <input type="button" id="bt" value="=" />
    <input type="text" id="res" />

    <script src="被打包的文件"></script>
  </body>
</html>

步骤二：

calc.js

// 1.0定义add方法
function add(x, y) {
  return x + y;
}

// 2.0导出add方法
module.exports = add;

步骤三：

main.js

// 1.0获取dom对象
var v1 = document.querySelector("#v1");
var v2 = document.querySelector("#v2");
var bt = document.querySelector("#bt");
var res = document.querySelector("#res");

bt.onclick = function() {
  // 2.0获取calc.js中的add方法并且调用结果
  var v1value = parseFloat(v1.value);
  var v2value = parseFloat(v2.value);

  // 3.0调用add方法
  var add = require('./calc.js');
  res.value = add(v1value, v2value);
}

步骤四：

webpack开发案例（一）

案例二（使用webpack.config.js配置）

基本前置条件

webpack开发案例（一）webpack开发案例（一）

与案例一相比，index.htm（js文件引入路径要改变）、calc.js和main.js内容不变，仅仅只是多了个webpack.config.js配置文件，并且改变相关文件的路径

webpack.config.js<br /><br />module.exports = {
  entry: './src/main.js', //指定打包的入口文件
  output: {
    path: __dirname + '/dist', //输出路径
    filename: 'build.js' //输出文件名
  }
}

这次打包方便了很多，直接输入webpack即可

webpack开发案例（一）

案例三（webpack中的loader）

步骤一：创建package.json文件

webpack开发案例（一）

步骤二：安装css-loader和style-loader到项目中，同时将其配置到package.json

webpack开发案例（一）

此时package.json文件的内容为

{
  "name": "vue",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "fengxiong",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^0.28.7",
    "style-loader": "^0.19.1"
  }
}

步骤三：创建一个静态文件，存放css

webpack开发案例（一）

步骤四：配置好webpack.config.js和main.js文件

webpack.config.js

module.exports = {
  entry: './src/main.js', //指定打包的入口文件
  output: {
    path: __dirname + '/dist', //输出路径
    filename: 'build.js' //输出文件名
  },
  module: {
    loaders: [{
      test: /\.css$/,
      loader: 'style-loader!css-loader'
    }]
  }
}
main.js

// 1.0获取dom对象
var v1 = document.querySelector("#v1");
var v2 = document.querySelector("#v2");
var bt = document.querySelector("#bt");
var res = document.querySelector("#res");

//导入css文件
require('../static/css/site.css')

bt.onclick = function() {
  // 2.0获取calc.js中的add方法并且调用结果
  var v1value = parseFloat(v1.value);
  var v2value = parseFloat(v2.value);

  // 3.0调用add方法
  var add = require('./calc.js');
  res.value = add(v1value, v2value);
}

步骤五：使用命令打包、发布文件

webpack开发案例（一）

最终目录结构

webpack开发案例（一）

案例四（打包sass）

步骤一：安装nodesass

cnpm install node-sass sass-loader style-loader --save-dev

webpack开发案例（一）

步骤二：创建一个scss文件

webpack开发案例（一）
$color:blue;
#v2 {
    border: 1px solid $color;
}

步骤三：配置好webpack.config.js和main.js文件

webpack.config.js

module.exports = {
  entry: './src/main.js', //指定打包的入口文件
  output: {
    path: __dirname + '/dist', //输出路径
    filename: 'build.js' //输出文件名
  },
  module: {
    loaders: [{
      test: /\.css$/,  //打包.css文件
      loader: 'style-loader!css-loader'
    },
    {
      test: /\.scss$/,  //打包.scss文件
      loader: 'style-loader!css-loader!sass-loader'
    }]
  }
}
main.js

// 1.0获取dom对象
var v1 = document.querySelector("#v1");
var v2 = document.querySelector("#v2");
var bt = document.querySelector("#bt");
var res = document.querySelector("#res");

//导入css文件
require('../static/css/site.css');
//导入scss文件
require('../static/scss/site1.scss');

bt.onclick = function() {
  // 2.0获取calc.js中的add方法并且调用结果
  var v1value = parseFloat(v1.value);
  var v2value = parseFloat(v2.value);

  // 3.0调用add方法
  var add = require('./calc.js');
  res.value = add(v1value, v2value);
}

步骤四：使用命令打包、发布文件

webpack开发案例（一）

package.json文件内容为

{
  "name": "vue",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "fengxiong",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^0.28.7",
    "node-sass": "^4.7.2",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.19.1"
  }
}

案例五（打包less）

步骤一：安装less-loader

webpack开发案例（一）

步骤二：创建一个less文件

webpack开发案例（一）
@color: green;
#res {
    border: 2px solid @color;
}

步骤三：配置好webpack.config.js和main.js文件

webpack.config.js<br /><br />module.exports = {
  entry: './src/main.js', //指定打包的入口文件
  output: {
    path: __dirname + '/dist', //输出路径
    filename: 'build.js' //输出文件名
  },
  module: {
    loaders: [{
      test: /\.css$/,  //打包.css文件
      loader: 'style-loader!css-loader'
    },
    {
      test: /\.scss$/,  //打包.scss文件
      loader: 'style-loader!css-loader!sass-loader'
    },
    {
      test: /\.less$/,  //打包.less文件
      loader: 'style-loader!css-loader!less-loader'
    }]
  }
}
main.js

// 1.0获取dom对象
var v1 = document.querySelector("#v1");
var v2 = document.querySelector("#v2");
var bt = document.querySelector("#bt");
var res = document.querySelector("#res");

//导入css文件
require('../static/css/site.css');
//导入scss文件
require('../static/scss/site1.scss');
//导入less文件
require('../static/less/site2.less');

bt.onclick = function() {
  // 2.0获取calc.js中的add方法并且调用结果
  var v1value = parseFloat(v1.value);
  var v2value = parseFloat(v2.value);

  // 3.0调用add方法
  var add = require('./calc.js');
  res.value = add(v1value, v2value);
}

步骤四：使用命令打包、发布

webpack开发案例（一）

package.json文件内容

{
  "name": "vue",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "fengxiong",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^0.28.7",
    "less": "^2.7.3",
    "less-loader": "^4.0.5",
    "node-sass": "^4.7.2",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.19.1"
  }
}

案例六（打包其他资源）

步骤一：安装url-loader和file-loader

cnpm install url-loader file-loader --save-dev（需要在管理员权限下安装）

webpack开发案例（一）

步骤二：配置webpack.config.js文件

module.exports = {
  entry: './src/main.js', //指定打包的入口文件
  output: {
    path: __dirname + '/dist', //输出路径
    filename: 'build.js' //输出文件名
  },
  module: {
    loaders: [{
        test: /\.css$/, //打包.css文件
        loader: 'style-loader!css-loader'
      },
      {
        test: /\.scss$/, //打包.scss文件
        loader: 'style-loader!css-loader!sass-loader'
      },
      {
        test: /\.less$/, //打包.less文件
        loader: 'style-loader!css-loader!less-loader'
      },
      {
        //注意url可能请求多个资源，所以将来在项目中通过url导入的
        //资源必须配置在这里
        test: /\.(png|jpg|gif|ttf)$/, //打包url()请求的资源文件
        //如果图片很大的话，那么会造成build.js也比较大，加载的时候
        //导致效率低下。因此使用limit限制图片大小，当图片大小<40k，
        //则把它当做base64字符串存储到build.js中
        //否则单独将图片存放到磁盘上，将路径打包仅build.js中
        loader: 'url-loader?limit=40000'
      }
    ]
  }
}

步骤三：在html文件创建一个区域，在css、less或者scss中为那个区域添加一张图片

#v1 {
  border: 1px solid red;
}

#bg {
  width: 300px;
  height: 100px;
  background: url(../../img/bg.jpg);
}

步骤四：步骤四：使用命令打包、发布

webpack开发案例（一）

案例七（实现实时更新热操作）

步骤一：安装服务cnpm install webpack webpack-dev-server html-webpack-plugin --save-dev

webpack开发案例（一）

步骤二：配置package.json

{
  "name": "vue",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
        "dev":"webpack-dev-server --inline --hot --open --port 5008"
  },
  "author": "fengxiong",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^0.28.7",
    "file-loader": "^1.1.6",
    "html-webpack-plugin": "^2.30.1",
    "less": "^2.7.3",
    "less-loader": "^4.0.5",
    "node-sass": "^4.7.2",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.19.1",
    "url-loader": "^0.6.2",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.9.7"
  }
}

参数说明：
--inline 自动刷新
--hot 热加载
--port 指定监听端口
--open 自动在默认浏览器中打开
--host 可以指定服务器的if

步骤三：配置webpack.config.js文件

var htmlwp = require('html-webpack-plugin');

module.exports = {
  entry: './src/main.js', //指定打包的入口文件
  output: {
    path: __dirname + '/dist', //输出路径
    filename: 'build.js' //输出文件名
  },
  module: {
    loaders: [{
        test: /\.css$/, //打包.css文件
        loader: 'style-loader!css-loader'
      },
      {
        test: /\.scss$/, //打包.scss文件
        loader: 'style-loader!css-loader!sass-loader'
      },
      {
        test: /\.less$/, //打包.less文件
        loader: 'style-loader!css-loader!less-loader'
      },
      {
        //注意url可能请求多个资源，所以将来在项目中通过url导入的
        //资源必须配置在这里
        test: /\.(png|jpg|gif|ttf)$/, //打包url()请求的资源文件
        //如果图片很大的话，那么会造成build.js也比较大，加载的时候
        //导致效率低下。因此使用limit限制图片大小，当图片大小<40k，
        //则把它当做base64字符串存储到build.js中
        //否则单独将图片存放到磁盘上，将路径打包仅build.js中
        loader: 'url-loader?limit=40000'
      }
    ]
  },
  plugins: [
    new htmlwp({
      title: '首页', //生成页面标题
      filename: 'index.html',
      template: 'index.html'
    })
  ]
}

步骤四：使用npm run dev运行项目

webpack开发案例（一）

案例八（实现es6转es5）

步骤一：安装四个包

babel-core

babel-loader

babel-preset-es2015

babel-plugin-transform-runtime：这个包主要是打包.vue组件页面中的es6语法需要

webpack开发案例（一）

步骤二：配置webpack.config.js文件

var htmlwp = require('html-webpack-plugin');

module.exports = {
  entry: './src/main.js', //指定打包的入口文件
  output: {
    path: __dirname + '/dist', //输出路径
    filename: 'build.js' //输出文件名
  },
  module: {
    loaders: [{
        test: /\.css$/, //打包.css文件
        loader: 'style-loader!css-loader'
      },
      {
        test: /\.scss$/, //打包.scss文件
        loader: 'style-loader!css-loader!sass-loader'
      },
      {
        test: /\.less$/, //打包.less文件
        loader: 'style-loader!css-loader!less-loader'
      },
      {
        //注意url可能请求多个资源，所以将来在项目中通过url导入的
        //资源必须配置在这里
        test: /\.(png|jpg|gif|ttf)$/, //打包url()请求的资源文件
        //如果图片很大的话，那么会造成build.js也比较大，加载的时候
        //导致效率低下。因此使用limit限制图片大小，当图片大小<40k，
        //则把它当做base64字符串存储到build.js中
        //否则单独将图片存放到磁盘上，将路径打包仅build.js中
        loader: 'url-loader?limit=40000'
      },
      {
        //将当前项目中所有的.js文件都要进行es6转es操作
        //node_modules除外
        test: /\.js$/, //打包.js文件
        loader: 'babel-loader?presets[]=es2015',
        //node_modules中的所有.js文件不去转换，提高打包性能
        exclude: /node_modules/
      }
    ]
  },
  //babel: {
  //presets: ['es2015'], //配置将es6语法转换成es5语法
  //plugins: ['transform-runtime'] //为了解决打包.vue文件不报错
  //},
  plugins: [
    new htmlwp({
      title: '首页', //生成页面标题
      filename: 'index.html',
      template: 'index.html'
    })
  ]
}

步骤三：改变main.js和calc.js的语法

main.js

// 1.0获取dom对象
var v1 = document.querySelector("#v1");
var v2 = document.querySelector("#v2");
var bt = document.querySelector("#bt");
var res = document.querySelector("#res");

//导入css文件
//require('../static/css/site.css');
//导入scss文件
//require('../static/scss/site1.scss');
//导入less文件
//require('../static/less/site2.less');

import '../static/css/site.css'; //es6语法
import addObj from './calc.js'; //es6语法

bt.onclick = function() {
  // 2.0获取calc.js中的add方法并且调用结果
  var v1value = parseFloat(v1.value);
  var v2value = parseFloat(v2.value);

  // 3.0调用add方法
  //var add = require('./calc.js');
  res.value = addObj.add(v1value, v2value);
}
calc.js

// 1.0定义add方法
function add(x, y) {
  return x + y;
}

// 2.0导出add方法
//module.exports = add;

//es6语法
export default {
  add //es6语法，当属性名称和属性值变量同名的时候可以只写一个
}

步骤四：使用命令npm run dev运行项目

webpack开发案例（一）
从零学习前端开发

从零学习前端开发

相关推荐

带你使用webpack快速构建web项目的方法

使用webpack构建web项目以及热部署插件的使用，按以下步骤，能帮助你快速构建和理解~详细学习还得靠官方文档！你得先安装了Node.js此处不赘述。使用此插件我们将会自动在打包的时候创建index.html，且无须关心bundle.js的文件路径。打包

不知道该写啥QAQ / 0评论 2020-11-12

Webpack的Loader和Plugin的区别

用于对模块源码的转换，loader描述了webpack如何处理非javascript模块，并且在buld中引入这些依赖。loader可以将文件从不同的语言转换为JavaScript，或者将内联图像转换为data URL。module.rules可以指定多个

webfullStack / 0评论 2020-11-09

vscode 调试 node.js的方法步骤

作为前端工程师经常打交道的开发工具无非 IDE 编辑器 和 Chrome，在 Chrome 中调试是非常方便的，直接在 开发者工具的 source 栏打断点就可以了。那么，如果遇到需要写 node 相关的代码，比如 webpack 配置项，应该怎么调试来实

Yvettre / 0评论 2020-09-15

如何用5分钟开发一个 Webpack Loader？

今天分享的内容是如何开发一个简单的Webpack Loader，希望通过这个过程能够让你 Get 到 Webpack Loader 的工作原理与机制。这里我的需求是开发一个可以加载 markdown 文件的加载器，以便可以在代码中直接导入 md 文件。我们

想做大牛的蜗牛 / 0评论 2020-10-30

为 Vue 的惰性加载加一个进度条

通常用 Vue.js 编写单页应用时，当加载页面时，所有必需的资源都会被一起加载。在处理大文件时，这可能会导致用户体验不佳。借助 Webpack，可以用 import() 函数而不是 import 关键字在 Vue.js 中按需加载页面。Vue.js 中

gloria0 / 0评论 2020-10-26

详解webpack的文件监听实现(热更新)

文件监听是在源码发生变化时，自动重新构建出新的输出文件。"test": "echo \"Error: no test specified\" && exit 1",

gaojie0 / 0评论 2020-09-11

Runoob-ES6：ES6 环境搭建

目前各大浏览器基本上都支持 ES6 的新特性，其中 Chrome 和 Firefox 浏览器对 ES6 新特性最友好，IE7~11 基本不支持 ES6。Node.js 是运行在服务端的 JavaScript，它对 ES6 的支持度更高。如果你还不了解 No

SelinaChan / 0评论 2020-08-14

配置webpack

在全局安装webpack: npm install webpack -g. 在项目的根目录创建一个 webpack.config.js. // entry: 打包的入口文件，一个字符串或者一个对象。// output: 配置打包的结果，一个对象。// f

不知道该写啥QAQ / 0评论 2020-08-09

vue—cli脚手架

使用npm全局安装webpack，打开命令行工具输入：npm install webpack -g或者，安装完成之后输入 webpack -v，如下图，如果出现相应的版本号，则说明安装成功。注意：webpack 4.X 开始，需要安装 webpack-cl

gloria0 / 0评论 2020-08-09

Webpack 原理浅析

Webpack迭代到4.x版本后，其源码已经十分庞大，对各种开发场景进行了高度抽象，阅读成本也愈发昂贵。但是为了了解其内部的工作原理，让我们尝试从一个最简单的 webpack 配置入手，从工具设计者的角度开发一款低配版的Webpack。假设某一天，我们接到

不知道该写啥QAQ / 0评论 2020-08-02

第一个Vue页面

安装完后，打开cmd命令行界面。安装yarn(fackbook依赖管理工具与Npm功能一样，推荐使用！！！--- 是否安装vue路由 -->. --- 是否启动ESLint代码检测 -->. --- 是否设置单元测试 -->. --- 是

hline / 0评论 2020-07-29

webpack之常用plugin的配置和使用

html-webpack-plugin插件默认会创建一个HTML模板，并自动引入打包生成的几个主要的chunk包

SelinaChan / 0评论 2020-07-28

【webpack】webpack打包之后调试源码

注释掉的UglifyJsPlugin用于js打包、压缩、混淆

yqoxygen / 0评论 2020-07-28

ABAP, UI5和webpack的处理入口

如果一个UI5应用配置到portal的Fiori Launchpad里,那么应用的入口是Component.js. 另一种方式不需要launchpad，只需要在一个standalone的html里自己新建一个component的运行环境:. 那么只需要关注

wangdianyong / 0评论 2020-07-23

ABAP, Maven, CF App和Webpack的build

命令行mvn clean install后，生成的jar文件默认位于target folder下。在包含了这个yaml文件的folder里使用cf push，因为里面指定了java_buildpack作为buildpack，应用upload到cloud f

webpackvuees / 0评论 2020-07-23

vue.js 安装

由于 npm 安装速度慢，本教程使用了淘宝的镜像及其命令 cnpm，安装使用介绍参照：使用淘宝 NPM 镜像。Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。This will install Vue 2.x version of the

yqoxygen / 0评论 2020-07-20

基于vue-cli搭建vue项目开发环境

vue-cli是vue的脚手架工具，用于快速搭建vue项目。让开发者只关心项目本身，而不去关注项目的开发环境。在安装vue-cli之前，我们先安装webpack，在命令行工具输入下面代码。，这里就默认你安装node.js. webpack-simple

不知道该写啥QAQ / 0评论 2020-07-18

06、Webpack使用loader配置css文件、图片文件、

loader 让 webpack 能够去处理那些非 JavaScript 文件。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。本质上，webpack loader

waterv / 0评论 2020-07-18

Ant-design中使用jQuery

‘window.jQuery‘: ‘jquery‘,上面代码使用了 webpack 的 ProvidePlugin 插件，这个插件在加载某个模块时，如果遇到了未定义的并且在配置文件中配置了的变量，比如上面代码看到的 $、jquery、jQuery、wind

81463166 / 0评论 2020-07-17

如何科学修改node_modules里的文件

有时候使用npm上的包，发现有bug，我们知道如何修改，但是别人可能一时半会没法更新，或者是我们特殊需求，别人不愿意修改，这时候我们只能自己动手丰衣足食。那么我们应该如何修改别人的源码呢？首先，直接修改node_modules里面的文件是不太行的，重新安装

yqoxygen / 0评论 2020-07-16

webpack4 面试题

而如果摒弃了这些开发框架，那么开发的效率将大幅下降。在众多前端工程化工具中，webpack脱颖而出成为了当今最流行的前端构建工具。然而大多数的使用者都只是单纯的会使用，而并不知道其深层的原理。希望通过以下的面试题总结可以帮助大家温故知新、查缺补漏，知其然而

SHINESUNNY / 0评论 2020-07-08

webpack 学习记录 开发环境

const HtmlWebpackPlugin = require; // html打包。// 从所有 JavaScript 条目中提取现有源映射。// 这包括内联源映射以及通过 URL 链接的地图。所有源地图数据都传递给 Webpack 进行处理

yezitoo / 0评论 2020-07-08

ES6环境下webpack配置devServer

在终端输入npm -v ，会显示版本号。如果没显示，要先安装node环境 下载地址http://nodejs.cn/

helloxiaoliang / 0评论 2020-06-22

Vue2全家桶之一：vue-cli（vue脚手架）超详细教程

都说Vue2简单上手容易，的确，看了官方文档确实觉得上手很快，除了ES6语法和webpack的配置让你感到陌生，重要的是思路的变换，以前用jq随便拿全局变量和修改dom的锤子不能用了，vue只用关心数据本身，不用再频繁繁琐的操作dom，注册事件、监听事件、

helloxiaoliang / 0评论 2020-06-21

脚手架3.x版本的说明

如果想自己改动，那么要自己创建配置文件，另外进行配置、改动。

webfullStack / 0评论 2020-06-16

详解如何修改 node_modules 里的文件

有时候使用npm上的包，发现有bug，我们知道如何修改，但是别人可能一时半会没法更新，或者是我们特殊需求，别人不愿意修改，这时候我们只能自己动手丰衣足食。那么我们应该如何修改别人的源码呢？首先，直接修改node_modules里面的文件是不太行的，重新安装

江木 / 0评论 2020-06-14

使用脚手架搭建vue项目

全局搜索vue.cmd，将此目录配入环境变量即可。

SelinaChan / 0评论 2020-06-14

ES 之 模块

注意:webpack 4x以上，webpack将命令相关的内容都放到了webpack-cli，所以还需要安装webpack-cli. import { uniq } from ‘lodash‘;

HeliumLau / 0评论 2020-06-13

webpack4.43 - 创建项目,打包第一个js文件

webpack 用于编译 JavaScript 模块。一旦完成安装，你就可以通过 webpack 的CLI或API与其配合交互。如果你还不熟悉 webpack，请阅读webpack4.x - 初始webpack，了解为什么你要使用 webpack，而不是社

yezitoo / 0评论 2020-06-13

webpack详解----resolve

正常情况下在入口 index.js引入 其他的 文件。导入的时候可以用 $. 导入的时候可以省略后缀

helloxiaoliang / 0评论 2020-06-10

从零开始搭建一个 React + Mobx + React Router 脚手架

本文详细介绍了如何从零开始搭建一个 React 开发的脚手架，包含如何添加 Redux 以及 React Router 的环境。建议将代码拉下来之后，配合本文一起查看，效果更佳。最近将脚手架中的 babel 配置更新到了 7.0.0 版本，所以部分地方作出

不知道该写啥QAQ / 0评论 2020-06-10

truffle init问题解决

首先Truffle是针对基于以太坊的Solidity语言的一套开发框架。在Mac OS执行truffle init报错：。上网查了很多资料说法不一，有的说修改hosts文件的映射，有的也说可能是防火墙没关闭，都尝试了下还是不能解决。最终在原文找到了解决方法

gloria0 / 0评论 2020-06-09

webpack打包原理

//分析-哪些是源码-哪些是依赖,我们借助babel插件：安装：npm i @babel/parser --save. 安装babel/parser：npm i @babel/parser --save 分析文件中哪些是源码哪些是依赖。安装babel

PANH / 0评论 2020-06-07

webpack性能优化

　　html文件:默认不能使用HMR功能,同时会导致问题:html文件不能热更新了~css样式文件:可以使用HMR功能:因为style-loader内部实现了 使用方法:hot:true

webfullStack / 0评论 2020-06-07

webpack性能优化2

Dll动态链接库 其实就是做缓存：一个项目中我们经常会用到第三方类库，比如React、lodash等，没特别的需求一般这些类库我们不会去动他的代码，但是在打包的过程中这些库会非常占用打包时间，打包的时候我们分开来打包来提升打包速度，而DllPlugin动态

不知道该写啥QAQ / 0评论 2020-06-06

web前端工程化/构建自动化

前端工程化的概念在近些年来逐渐成为主流构建大型web应用不可或缺的一部分，在此我通过以下这三方面总结一下自己的理解。前端工程化的演化。　　这套流程，尤其是刷新浏览器这个过程，无疑是相当低效繁琐枯燥的。面向接口编程，尽可能减少前后端沟通成本。目前较为流行的U

starzhangkiss / 0评论 2020-06-06

webpack 生产环境配置（无注释）

const HtmlWebpackPlugin = require(‘html-webpack-plugin‘). ‘css-loader‘,loader:‘postcss-loader‘,},entry:‘./src/js/index.js‘,filen

yezitoo / 0评论 2020-06-06

webpack 之压缩js代码 和html文件

2.压缩html文件，html文件不需要处理兼容问题，压缩文件只需要在plugins中的HtmlWebpackPlugin中配置minify即可

gufudhn / 0评论 2020-06-06

生产环境 webpack 配置

enforce:‘pre‘, //优先执行，正常的，一个文件只能被一个loader处理，当一个文件要被多个loader处理，一定要指定loader执行的先后顺序，先执行eslint再执行babel

HeliumLau / 0评论 2020-06-05

webpack 提取css成单独文件 css兼容性处理 压缩css

//css兼容性处理：postcss --> postcss-loader postcss-preset-env. //帮postcss找到package.json中browserslist里面的配置，通过配置加载指定的css兼容性样式

dazhifu / 0评论 2020-06-05

webpack 开发环境配置

use: [‘style-loader‘, ‘css-loader‘, ‘less-loader‘]

HeliumLau / 0评论 2020-06-05

多条命令同时执行的包concurrently

"all": "concurrent \"npm run client:build" \"npm run server:build" "

不知道该写啥QAQ / 0评论 2020-06-05

webpack学习记录

安装webpack-cli对应安装全局的。

gloria0 / 0评论 2020-06-04

webpack

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言，并将其转换和打包为合适的格式供浏览器使用。在3.0出现后，Webpack还肩负起了优化项目的责任。看了这么久，一定着

helloxiaoliang / 0评论 2020-06-03

webpack中的 chunk,module,bundle的区别

通过CommonsChunkPlugin创建出来的文件 也是chunk 可以理解为commons chunk. bundle文件： webpack打包出来的代码文件 也可以理解为对chunk编译/压缩打包等处理后的产出

yezitoo / 0评论 2020-06-03

ts项目初始化

npm i typescript npm i webpack webpack-cli webpack-dev-server -D. "test": "echo \"Error: no test specified\&

yqoxygen / 0评论 2020-06-02

也许这才是你想要的微前端方案

微前端是当下的前端热词，稍具规模的团队都会去做技术探索，作为一个不甘落后的团队，我们也去做了。系统从接手时差不多30个页面，一年多时间，发展到目前150多个页面，并还在持续增长;小贷系统开发量占整个web组50%的人力，每个迭代都有两三个需求在这一个系统上

liduote / 0评论 2020-06-02

如何发布一个 npm 包

在工作时，突然接到经理的一个要求，需要将一个react的高阶组件函数封装成一个npm包。之前从没弄过，当场还是有些懵逼的，但是这毕竟是工作，不能推脱。于是开始了学习、汤坑之旅。最终包发布，线上项目成功使用，虽然导致了一次线上故障，但还是快速地fix掉。吃一

gloria0 / 0评论 2020-05-31

webpack之tapable

webpack本质上是一种事件流的机制，它的工作流程就是将各个插件串联起来，而实现这一切的核心就是tapable，核心原理是依赖于发布订阅模式;tapable注册函数的方法有三种：tap、tapAsync、tapPromise. 相对应的执行方法也有三种：

不知道该写啥QAQ / 0评论 2020-05-31

webpack使用vue的配置过程

因为没有配置compiler，配置一下就好了

yezitoo / 0评论 2020-05-31