Webpack

  • 自从接触到 Webpack 之后我就爱上了它。

    #27 开始,我就在我的项目里全面使用 Webpack 了,无论是写一个小的工具库(如 selection-widget、connect.io)还是一个完整的“产品”(划词翻译)。

    说起来,一开始关注 Webpack 是因为我很喜欢 Vue.js,而它就是使用 Webpack 进行开发的,但我一直以来都有一个疑惑:为什么 Vue.js 生成出来的代码如此干净?你可以对比一下我的 connect.io 项目用 Webpack 生成的代码。

    然后我发现,Vue.js 在开发时用的是 Webpack,但是最后将文件打包在一起的时候用的是 Rollu

  • 当我们开发一个单页应用时,常见的优化做法是生成两个文件:

    • vendor.js:包含一些第三方依赖,例如 jQueryVue
    • app.js:包含项目代码

    然后给这两个文件根据文件内容计算出一个 hash 加在文件名中,并配置一个长达一年的 Cache Control,这样能大大加快应用的访问速度。

    因为 vendor.js 的内容基本上很少更新,所以下一次我们更改了 app.js 的内容时,vendor.js 仍然在浏览器的缓存中,那么用户就只需要重新下载 app.js 了。

    但为了在 Webpack 中做到这一点,真是费了不少功夫。

    为了将项目中的第三方依赖代码抽离出来,官方文档上推

  • 在这篇文章中我们开始利用我们之前所学搭建一个简易的React开发环境,用以巩固我们之前学习的Webpack知识。首先我们需要明确这次开发环境需要达到的效果:1、能够编译JSX语言 2、css样式使用Sass开发 3.能够将基础的ES6转化为ES5 4.能够使用ESLint在开发的时候为我们做代码风格审查

    首先,安装基本使用的webpack、webpack-dev-server

    npm i webpack webpack-dev-server -D

    基本页面的生成

    为了可以生成一个基本的页面我们使用html-webpack-plugin,为了方便我们定制,我们自己在src定义一个html文件,使

  • 我们都知道webpack-dev-server为我们在开发的时候提供了一个服务器以便于我们的开发,我们在使用之前当然需要安装:

    npm i webpack webpack-dev-server -D

    安装完成之后我们只需要在webpack配置中配置devServer选项即可,以下是一个简单的配置:

    const path = require('path');
    const webpack = require('webpack');
    
    const config = {
      entry: './src/main.js',
      output: {
        filename: 'bundle.js',
     
  • Webpack系列——快速入门

    入口

    单文件入口
    指定entry键值

    const config = {
      entry: './yourpath/file.js'
    };
    module.exports = config

    上面的是以下的简写:

    const config = {
      entry: {
        main: './yourpath/file.js'
      }
    };
    module.exports = config

    多文件入口
    对entry采用对象写法,指定对应的键值对,为了输出这多个文件可以使用占位符

    const path = require('path');
    const config =