Webpack打包方式及各场景下模块化语法总结

   2023-03-08 学习力0
核心提示:1.nodejs的方式:commonjs  var xx =require()   modules.exports=xxxx       注意:这种方式引入模块,路径会遵循node的规则,和js的src路径规则不同。  规则参考:http://www.ruanyifeng.com/blog/2015/05/require.html2.ES6的import和export关键字

1.nodejs的方式:commonjs  var xx =require()   modules.exports=xxxx

       注意:这种方式引入模块,路径会遵循node的规则,和js的src路径规则不同。

  规则参考:http://www.ruanyifeng.com/blog/2015/05/require.html

2.ES6的import和export关键字 和commonjs等价,会被babel转换成方式1

3.AMD方式: require([依赖],function(注入){   })

4.CMD 和commonjs差不多

 

webpack可以识别以上所有模块载入方式,同时还有自带的require.ensure()  以及webpack2又有import( ) 方法

总之,这都是为了打包文件的。使用commonjs的1方式,这些文件被打包在一个总的js文件里,如果想单独打包,要使用AMD方式或者commonjs异步的方式或者自带的方式。

babel仅仅将es6的import语法转译成commonjs的require语法,真正对语句操作的是webpack,如果不安装webpack,会报错method require is undefined.

 

其次,webpack可以识别并转换尾缀为vue的文件。vue文件又叫单文件组件,优点是可以把js和html和css放在一个文件中,并且html可以直接以html的形式书写,而不是在组件的js中拼接字符串。需要webpack+vue-loader进行处理。

 

vue-cli干了什么:既然vue需要搭配webpack打包干活,于是就有了vue-cli,是一个带有配置webpack(或者相似功能的browserify)的vue脚手架(完整的项目目录,以及package.json脚本配置等)

 

vuex是干什么的:和上面没有关系,vuex是让组件更好通信的,管理共用的状态。

 

vue组件:两种创建方式分别是全局和局部。注意传入vue.extend()返回的构造器,或直接传入options对象都是可以的,后者会默认调用vue.extend()

注意组件的data必须是一个函数(为了避免data被共用)

 

关于package.json  npm start = npm run start的缩写  其实npm run后面跟的字段主要取决于package.json文件中scripts下的配置,它是一个命令的快捷运行方式,必须配置"start" : node ./app.js 才可以使用npm run启动。同样也可以配置dev然后用npm run dev启动

 

在package.json的脚本中的命令是自带环境变量的,比如webpack命令会自动去找项目目录下node_modules下本地安装的webpack,而如果在命令行中调用又如果没有全局安装webpack,必须要带上webpack在项目文件夹中的路径,才能调用webpack。

 
反对 0举报 0 评论 0
 

免责声明:本文仅代表作者个人观点,与乐学笔记(本网)无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
    本网站有部分内容均转载自其它媒体,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责,若因作品内容、知识产权、版权和其他问题,请及时提供相关证明等材料并与我们留言联系,本网站将在规定时间内给予删除等相关处理.

  • webpack命令局部运行的几种方法 webpack用法
    webpack命令局部运行的几种方法 1. 第一种,先全局安装webpack命令:npm install -g webpack然后再在项目内安装命令:npm install webpack --save-dev这样在项目内就可以直接使用webpack命令了,运行的却是局部的webpack 2.第二种,直接在局部安装webpack,
    03-08
  • 扩大编译内存 webpack-dev-server --inline --p
     verbose stack Error: choreographer@1.0.0 rundev: `webpack-dev-server --inline --progress --config build/webpack.dev.conf.js`扩大编译内存 地址  D:\park\node_modules\.bin\webpack-dev-server.cmd@ECHO offSETLOCALCALL :find_dp0IF EXIST "%dp0
    03-08
  • Webpack的安装与使用 webpack安装配置
    Webpack的安装与使用 webpack安装配置
    webpack 常用安装命令webpack 安装及删除命令:npm/cnpm install webpack -g (全局安装)npm/cnpm uninstall webpack -g (全局卸载)npm/cnpm install webpack -s (局部安装)npm/cnpm uninstall webpack -s (局部卸载)安装时,加上 '--save' 安装写在 package.j
    03-08
  • html-webpack-plugin不输出script标签的方法 ht
    约550行:if (!this.options.disableScript) {if (this.options.inject === 'head') {head = head.concat(scripts);} else {body = body.concat(scripts);}}然后这样使用:new HtmlWebpackPlugin({disableScript: true,//...})
    03-08
  • gulp与webpack-stream集成配置 grunt gulp webp
    webpack非常强大,但是也有不足的地方,批量式处理依然是gulp更胜一筹.我们是否可以将两者的优点结合起来呢? 这篇文章就是讲述如何集成gulp和webpack1.安装webpack-stream很重要的插件,当然也可以直接使用官方的webpack,集成方式可以看webpack官网. 但webpack-s
    03-08
  • 【原创】从零开始搭建Electron+Vue+Webpack项目框架(三)Electron+vue+webpack联合调试
    【原创】从零开始搭建Electron+Vue+Webpack项目
    导航:(一)Electron跑起来(二)从零搭建Vue全家桶+webpack项目框架(三)Electron+Vue+Webpack,联合调试整个项目(四)Electron配置润色(五)预加载及自动更新(六)构建、发布整个项目(包括client和web)摘要:前面两篇介绍了如何启动Electron和Vue项
    03-08
  • 【Vue】WebPack 忽略指定文件或目录
    前端Vue项目使用 WebPack 打包时,有时候我们需要忽略掉一些文件。比如一些说明文档、ReadMe之类的,我们只希望它存在于源码中,而不是被打包给用户。通过修改 webpack.base.conf.js 配置文件,有以下方式可以达到目的。方法1:使用 null-loadermodule: {rule
    03-08
  • Karma 4 - Karma 集成 Webpack 进行单元测试
     可以将 karma 与 webpack 结合起来,自动化整个单元测试过程。1. 首先根据 1 完成基本的 karma 测试环境。2. 安装 webpack 和 webpack 使用的 loader在最简单的情况下,我们只需要 webpack 和 webpack 的 karma 插件 karma-webpacknpm i -D webpack karma-w
    03-08
  • 前端工具之webpack webapp前端
    前端工具之webpack webapp前端
    1webpack简介:2webpack的使用步骤  1全局安装:webpack和webpack-cli      2创建一个文件夹命名webpack01,项目初始化:(一路enter键即可)      3本地项目安装webpack     4 
    03-08
  • 手把手教你webpack、react和node.js环境配置(上篇)
    手把手教你webpack、react和node.js环境配置(
    很多人刚学习react的时候,往往因为繁琐的配置而头疼,这里我将手把手教大家怎么用webpack配置react和redux的环境,这篇教程包括前端react和后台node整个网站的环境配置,对node没兴趣的可以只看这篇。这里是下篇链接:手把手教你webpack、react和node.js环境
    03-08
点击排行