webpack 包含bable 打包_webpack4 bable - CSDN
精华内容
参与话题
  • 使用了babel转码,使用import和export的时候,在浏览器运行代码的时候,提示Uncaught ReferenceError: require is not definedbabel只是个翻译,假设a.js 里 import 了 b....包含 a.js,b.js 的代码,那就需要用到打包

    使用了babel转码,使用import和export的时候,在浏览器运行代码的时候,提示

    Uncaught ReferenceError: require is not defined

    babel只是个翻译,假设a.js 里 import 了 b.js

    对a.js进行转码,只是翻译了a.js,并不会把b.js的内容给读取合并进来

    如果想在最终的某一个js里,包含 a.js,b.js 的代码,那就需要用到打包工具

    也就是webpack等工具了

    展开全文
  • webpack学习笔记 (上)前言这几天晚上在跟着阮一峰的Webpack教程复习Webpack,发现Webpack确实是一个非常优秀的前端工具,能做的事真是超级多。当然能做的事情越多,他的配置文件可能就越复杂。像我记性这么差的人...

    webpack学习笔记 (上)

    前言

    这几天晚上在跟着阮一峰的Webpack教程复习Webpack,发现Webpack确实是一个非常优秀的前端工具,能做的事真是超级多。当然能做的事情越多,他的配置文件可能就越复杂。像我记性这么差的人。还是写个博客记录一下吧!毕竟好记性不如烂笔头!

    关于webpack

    webpack的配置文件是 webpack.config.jswebpack.config.js 通过 module.exports 输出配置文件。

    有了 webpack.config.js 之后,我们就可以通过在命令行执行如下命令使用webpack打包我们的代码了。

    • $ webpack => 基本操作,为开发环境打包代码
    • $ webpack -p => 为生产环境打包代码(压缩代码)
    • $ webpack --watch => 增量打包代码 (每次修改文件即会自动重新打包文件)
    • $ webpack -d => 打包同时生成source maps位置文件
    • $ webpack --colors => 让打包信息使用不同的颜色,易于观察

    我们可以使用 npm 配置文件 package.jsonscripts 命令简化我们的操作,示例如下所示:

    // package.json
    {
        // ...
        "script": {
            "dev" : "webpack --watch --colors"
        },
        // ...
    }

    关于webpack Dev Server

    关于 webpack Dev Serverwebpack的GitHub是这么介绍它的:

    Serves a webpack app. Updates the browser on changes.

    webpack Dev Server是一个小型的服务器,为我们的webpack应用服务。与 webpack 类似,我们在命令行中通过执行如下指令打开服务器、打包代码。

    $ webpack-dev-server

    我们打开了服务器,就可以在浏览器中通过http://loaclhost:8080访问网页,查看我们打包的代码。

    同时, webpack-dev-server 还支持热重载,即我们更新了我们代码,页面将自动刷新并打包我们的代码。

    正式开始

    入口文件

    入口文件是 webpack 运行并打包文件的入口文件。Webpack 会分析入口文件,解析包含依赖关系的各个文件。将这些文件(模块)都打包到 bundle.js 。我们通过 entry 属性来指定它。如下示例:

    // webpack.config.js
    module.exports = {
        entry: './main.js',
        output: {
            filename: 'bundles.js'
        }
    }

    此时入口文件是 main.jswebpack 会将 main.js 打包到 bundles.js 文件中。

    入口文件也可以是多个文件,这对一个多页应用来说很有帮助。如下示例:

    module.exports = {
        entry: {
            bundle1: './main1.js',
            bundle2: './main2.js'
        },
        output: '[name].js]'
    }

    此时入口文件有两个,分别是 main1.jsmain2.jswebpack 会将这两个文件分别打包到 bundle1.jsbundle2.js 中。

    加载器(loader)

    加载器是需要用webpack打包的资源文件的预处理器。我在这里将介绍 Bable-loaderCSS-loaderImage-loader 这三个加载器。

    加载器需要在配置文件中的 module.loaders中定义,如下示例:

    module.explorts = {
        // ..
        module: {
            loaders: {
                test: /\.js[x]?$/,  // 正则匹配需要用加载器预处理的文件
                exclude: /node_modules/,  // 正则匹配排除的文件或文件夹, 忽略则匹配所有涉及的文件
                include: /src/,  // 正则匹配包含的文件或文件,忽略则匹配所有涉及的文件
                loader: 'babel-loader'  // 加载器
            }
        }
    }

    bable-loader

    Bable-loader 可以将 JSX/ES6 文件转化为 ES5 规范下的 JS 文件。如下示例:

    module.exports = {
      // ...
      module: {
        loaders:[
          {
            test: /\.js[x]?$/,
            exclude: /node_modules/,
            loader: 'babel-loader?presets[]=es2015'
          },
        ]
      }
    };

    这里 babel-loader 需要用到 babel-preset-es2015 插件,将 ES2015 语法转化为 ES5 语法,如上示例是一种写法,还有另一种写法,如下所示:

    module: {
      loaders: [
        {
          test: /\.jsx?$/,
          exclude: /node_modules/,
          loader: 'babel',
          query: {
            presets: ['es2015']
          }
        }
      ]
    }

    css-loader

    如果我们在被 Webpack 处理的文件中引入了 CSS 文件,我们就需要使用 CSS-loader 来处理这些 CSS 文件,如下示例:

    module.exports = {
      // ..
      module: {
        loaders:[
          { 
              test: /\.css$/, 
              loader: 'style-loader!css-loader' },
        ]
      }
    };

    注意,我们这里使用两个加载器来转换 CSS 文件, 一个是 css-loader 来编译CSS文件, 另一个是 style-loader 将 CSS 代码引入 HTML 文件中。

    两个不同的加载器需要用 ! 来连接。

    image-loader

    Webpack 也可以打包图片到JS中,如下示例:

    module.exports = {
      // ...
      module: {
        loaders:[
          { 
              test: /\.(png|jpg)$/, 
              loader: 'url-loader?limit=8192' }
        ]
      }
    };

    看这里 url-loader?limit=8192 ,我们之前在 bable-loader 里见过, 这次的查询关键词是 limit ,意义是最大限制,即 如果小于 8192B 的图片文件将会被转换,小于8192B 的图片文件将不会被转换。

    插件(plugin)

    Webpack有一套插件系统来扩展他的功能,我们之前说了加载器是在配置文件中的 modules.loaders 中声明,而插件就是在 plugins 中声明。

    我们在这里介绍三个插件 uglifyJsPluginhtml-webpack-pluginopen-browser-webpack-plugin

    如它的名字, uglifyJsPlugin 作用是压缩JS代码,是 Webpack 自带的插件。

    html-webpack-pluginopen-browser-webpack-plugin 都是 Webpack 的第三方插件。 html-webpack-plugin 的作用是自动生成一个 HTML 文件。 open-browser-webpack-plugin 的作用是可以在 Webpack 加载时自动打开一个浏览器页面,这个可就厉害了,配合 webpack-dev-server 我们可以在 Webpack 执行后,不用动手就看到效果。

    如下示例展示了这三个插件的声明方法。

    var webpack = require('webpack');
    var uglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
    module.exports = {
      // ..
      plugins: [
        new uglifyJsPlugin({
          compress: {
            warnings: false
          }
        }),
        new HtmlwebpackPlugin({
          title: 'Webpack-demos',
          filename: 'index.html'
        }),
        new OpenBrowserPlugin({
          url: 'http://localhost:8080'
        })
      ]
    };

    这样,我们不需要写 HTML 文件,运行 webpack-dev-server , Webpack就自动为我们打包代码、压缩代码、创建 HTML 文件、打开浏览器。帅!

    环境标识

    Webpack 允许我们使用环境标识来区分开发环境和生产环境,从而让我们在开发环境中执行一些额外的代码。

    比如,如果我们只想在开发环境中执行 document.write(new Date()) 我们可以这样写我们的入口文件

    document.write('<h1>Hello World</h1>');
    
    if (devEnvironment) {
      document.write(new Date());
    }

    然后在配置文件中使用 DefinePlugin 插件:

    var webpack = require('webpack');
    
    var devFlagPlugin = new webpack.DefinePlugin({
      devEnvironment: JSON.stringify(JSON.parse(process.env.DEBUG || 'false'))
    });
    
    module.exports = {
      entry: './main.js',
      output: {
        filename: 'bundle.js'
      },
      plugins: [devFlagPlugin]
    };

    最后,我们只需要在执行 Webpack 命令时传入环境标识,Webpack就会为我们将环境标识设为我们需要的值,从而确定执不执行一些代码。

    $ env DEBUG=true webpack  // 此时为开发环境,执行额外代码
    $ webpack  // 此时为生产环境,不执行额外代码

    (未完待续)

    展开全文
  • Vue中关于Babel的作用和用法解释

    千次阅读 2019-08-21 09:23:28
    这时候,就需要 借助于第三方的 loader,来帮助webpack 处理这些高级的语法,当第三方loader 把 高级语法转为 低级的语法之后,会把结果交给 webpack打包到 bundle.js 中 // 通过 Babel ,可以帮我们将 高级的...
     在webpack 中,默认只能处理 一部分 ES6 的新语法,一些更高级的ES6语法或者 ES7 语法,webpack 是处理不了的;
     这时候就需要 借助于第三方的 loader,来帮助webpack 处理这些高级的语法,当第三方loader 把 高级语法转为 低级的
     语法之后,会把结果交给 webpack 去打包到 bundle.js 中
     通过 Babel ,可以帮我们将 高级的语法转换为 低级的语法
     1. 在 webpack 中,可以运行如下两套 命令,安装两套包,去安装 Babel 相关的loader功能:
     1.1 第一套包: cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
     1.2 第二套包: cnpm i babel-preset-env babel-preset-stage-0 -D
     2. 打开 webpack 的配置文件,在 module 节点下的 rules 数组中,添加一个 新的 匹配规则:
     2.1 { test:/\.js$/, use: 'babel-loader', exclude:/node_modules/ }
     2.2 注意: 在配置 babel 的 loader规则的时候,必须 把 node_modules 目录,通过 exclude 选项排除掉:原因有俩:
     2.2.1 如果 不排除 node_modules, 则Babel 会把 node_modules 中所有的 第三方 JS 文件,都打包编译,这样,会
     非常消耗CPU,同时,打包速度非常慢;
     2.2.2 哪怕,最终,Babel 把 所有 node_modules 中的JS转换完毕了,但是,项目也无法正常运行!
     3. 在项目的 根目录中,新建一个 叫做 .babelrc  的Babel 配置文件,这个配置文件,属于JSON格式,所以,在写 .babelrc 
      配置的时候,必须符合JSON语法规范: 不能写注释,字符串必须用双引号
     3.1 在 .babelrc 写如下的配置:  大家可以把 preset 翻译成 【语法】 的意思
            {
              "presets": ["env", "stage-0"],
              "plugins": ["transform-runtime"]
            }
     4. 了解: 目前,我们安装的 babel-preset-env, 是比较新的ES语法, 之前, 我们安装的是 babel-preset-es2015, 现在,
     出了一个更新的 语法插件,叫做 babel-preset-env ,它包含了 所有的 和 es***相关的语法
    
    展开全文
  • 应用了babel转码,应用import和export的时刻,在浏览器运转代码的时刻,提醒 Uncaught ReferenceError: require is not defined babel只是个翻译,假定a.js 里 ...假如想在终极的某一个js里,包括 a.js,b.js 的代

    应用了babel转码,应用import和export的时刻,在浏览器运转代码的时刻,提醒

    Uncaught ReferenceError: require is not defined

    babel只是个翻译,假定a.js 里 import 了 b.js

    对a.js停止转码,只是翻译了a.js,其实不会把b.js的内容给读取归并出去

    假如想在终极的某一个js里,包括 a.js,b.js 的代码,那就必要用到打包对象

    也就是webpack等对象了

    展开全文
  • Webpack打包工具学习笔记

    千次阅读 2018-01-17 11:18:48
    前言:Webpack是一款基于node的前端打包工具,它可以将很多静态文件打包起来,自动处理依赖关系后,生成一个.js文件,然后让html来引用,不仅可以做到按需加载,而且可以减少HTTP请求,节约带宽。1.配置与安装在node...
  • 一、介绍 在Webpack中 默认只能转换一部分ES6的新语法 部分更高级的ES6语法或ES7语法 Webpack无法转换 比如: ES6中类的静态属性 ...此时 Webpack默认打包的时候会报错 需要借助第三方loader来处理这些高级的语法...
  • webpack总结 & 个人理解

    千次阅读 2017-08-14 09:20:43
    学习资源————阮一峰 ...根据webpack.config.js文件打包 webpack – for building once for development webpack -p – for building once for production (minification) webpack --watch – for continuous
  • webpack 安装及使用详解步骤

    千次阅读 2019-02-25 01:41:42
    webpack 安装及使用详解步骤 一、起步 &amp;nbsp; &amp;nbsp;&amp;nbsp;1、安装&amp;nbsp; &amp;nbsp;&amp;nbsp;2、基本使用&amp;nbsp; &amp;nbsp;&amp;nbsp;3、创建bundle文件...
  • 配置React的Babel 6和Webpack 2环境

    千次阅读 2017-02-11 07:30:36
    虽然学React比起来其他的前端框架要容易不少,但是其生态的各种工具(Babel, Webpack)却着实让人费一番功夫。事实上,这些工具不只适用于React。但是为了发挥ES2015和JSX的威力需要它们。这里,我们主要讨论如
  • babel是什么? 官方解释 Babel 是一个 JavaScript 编译器 Babel 是一个工具链,主要用于在旧的浏览器或环境中将 ECMAScript 2015+ 代码转换为向后兼容版本的 JavaScript 代码 小栗子: class Person { ...
  • 返回章节目录 ...6.webpack-babel(ES6的东西转换成ES5) 7.webpack-ES6-Module(ES6的模块化) 单个导出 一起导出 8.webpack-配置生产环境 1.关于开发环境 面试官想通过开发环境了...
  • webpack填坑之路

    千次阅读 2017-04-04 20:44:10
    昨天今天一直在捣腾react和webpack结合,巨坑。。。心累。。。昨天差点就要放弃了,可是晚上想想又不甘心。。。今天又来苦逼地看文档。。。总算有个初步的结果!(具体坑就不详细写了,又多又细又杂@-@)。 因为电脑...
  • webpack中配置babel

    千次阅读 2019-01-17 23:18:11
    这篇文章主要介绍了如何使用webpack4.x配置babel,以及如何解决babel-loader和babel-core的兼容性问题。 1. 使用webpack来配置babel 在webpack中默认只能处理一部分ES6新语法,一些更高级的ES6语法或者ES7z语法...
  • webpack4打包配置教程看这篇就够了

    千次阅读 2019-03-08 17:35:37
    本文将从0开始配置一个webpack打包一个项目的完整流程。 准备工作 打开终端 新建一个文件夹 用于管理项目 mkdir webpack4-demo 创建项目 在项目内部打开集成终端 npm init 生成 一个package.json { &quot;...
  • webpack 4.x项目快速启动

    千次阅读 2018-10-24 11:29:14
    webpack至少要是4.1.0以上版本。 win10系统运行cmd窗口,需要选择“以管理员身份运行” 下面贴出所有的demo代码 package.json { "name": "runxadmin", "version": "...
  • 初识webpack

    2017-01-13 16:22:39
    webpack的学习(webpack是单一入口, 其它的模块需要通过 import, require, url等导入相关位置) nodjs语法说明 module.exports = MATH; // MATH.js文件下 如何调用这个模块? var a = require("./MATH.js")...
  • 我们继续介绍几个常用的loader的使用以及作用; Babel介绍使用 babel 是一个javascript编辑器。可以看下bable官网介绍:...我们使用webpack打包的时候,webpack也不能帮助我们直接做兼容转化,此时,我们就...
  • webpack详细使用方法

    千次阅读 2018-05-24 11:43:37
    一、安装node 二、创建package.json文件 npm init 三、安装webpack npm install webpack -g ...四、把webpack依赖写入package.json中 ...此时已经可以使用webpack命令打包js文件,打包命令 webpack app.js output
  • webpack4出了已经有一段时间了,我本来是在webpack中文文档学习,后来发现国内的中文文档 指南中有很多坑,与英文文档比对后,发现中文文档其实还没有更新到目前最新的版本,有很多地方都是根据老版本的webpack进行...
  • webpack4+加vue2+从零开始搭设vue项目

    千次阅读 2019-06-24 18:06:11
    webpack4+加vue2+从零开始搭设vue项目起步1.初始化项目2.安装依赖3.目录文件配置4.配置index.html及webpack.config.js5.vue的起步解决方案 一解决方案 二(常规操作)解决方案 三引入css和scss 本地环境 node -v // v...
1 2 3 4 5 ... 19
收藏数 375
精华内容 150
关键字:

webpack 包含bable 打包