前端小白想问,jsp?后面是什么意思,怎么用?求大神解答

发布网友 发布时间：2022-04-23 07:56

我来回答

共4个回答

懂视网 时间：2022-04-07 18:39

webpack管理的项目，我们希望用sass定义样式，为了正常编译，需要做如下配置。这里不讲webpack的入门，入门的文章，我推荐这篇《webpack入门》。

为了使用sass，我们需要安装sass的依赖包

//在项目下，运行下列命令行
npm install --save-dev sass-loader
//因为sass-loader依赖于node-sass，所以还要安装node-sass
npm install --save-dev node-sass

当然了，使用样式的话，css-loader和style-loader也是必须的依赖包，如果没有安装，可以类似上述的方法安装

二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中。

下面是webpack.config.js文件的部分配置：

var ExtractTextPlugin = require('extract-text-webpack-plugin');//css样式从js文件中分离出来,需要通过命令行安装 extract-text-webpack-plugin依赖包
module.exports = {
 ....
 module: {
 loaders: [
  //解析.css文件
  {
  test: /.css$/,
  loader: ExtractTextPlugin.extract("style", 'css')
  },
  //解析.vue文件
  {
  test: /.vue$/,
  loader: 'vue'
  }, 
  //解析.scss文件,对于用 import 或 require 引入的sass文件进行加载，以及<style lang="sass">...</style>声明的内部样式进行加载
  {
  test: /.scss$/,
  loader: ExtractTextPlugin.extract("style", 'css!sass') //这里用了样式分离出来的插件，如果不想分离出来，可以直接这样写 loader:'style!css!sass'
  }
 ]
 },
 //.vue文件的配置，以下是为了在.vue文件中使用ES6语法（必须安装babel相关的依赖包），以及把使用css或sass语法的样式提取出来，如果不需要可以忽略
 vue: {
 loaders: {
  js: 'babel', 
  css: ExtractTextPlugin.extract("css"),
  sass: ExtractTextPlugin.extract("css!sass")  
 },
 },
 plugins: [
 new ExtractTextPlugin("style.css") //提取出来的样式放在style.css文件中
 ]
 ....
}

sass的使用如下，例如：

import '../../css/test.scss'
require('../../css/test2.scss');

<style lang="sass">
 //sass语法样式
</style>

热心网友 时间：2022-04-07 15:47

现在前端用Webpack打包JS和其它文件已经是主流了，加上Node的流行，使得前端的工程方式和后端越来越像。所有的东西都模块化，最后统一编译。Webpack因为版本的不断更新以及各种各样纷繁复杂的配置选项，在使用中出现一些迷之错误常常让人无所适从。所以了解一下Webpack究竟是怎么组织编译模块的，生成的代码到底是怎么执行的，还是很有好处的，否则它就永远是个黑箱。当然了我是前端小白，最近也是刚开始研究Webpack的原理，在这里做一点记录。
编译模块
编译两个字听起来就很黑科技，加上生成的代码往往是一大坨不知所云的东西，所以常常会让人却步，但其实里面的核心原理并没有什么难。所谓的Webpack的编译，其实只是Webpack在分析了你的源代码后，对其作出一定的修改，然后把所有源代码统一组织在一个文件里而已。最后生成一个大的bundle JS文件，被浏览器或者其它Javascript引擎执行并返回结果。
在这里用一个简单的案例来说明Webpack打包模块的原理。例如我们有一个模块mA.js
var aa = 1; function getDate() { return new Date(); } mole.exports = { aa: aa, getDate: getDate }
我随便定义了一个变量aa和一个函数getDate，然后export出来，这里是用CommonJS的写法。
然后再定义一个app.js，作为main文件，仍然是CommonJS风格：
var mA = require('./mA.js'); console.log('mA.aa =' + mA.aa); mA.getDate();
现在我们有了两个模块，使用Webpack来打包，入口文件是app.js，依赖于模块mA.js，Webpack要做几件事情：
从入口模块app.js开始，分析所有模块的依赖关系，把所有用到的模块都读取进来。 每一个模块的源代码都会被组织在一个立即执行的函数里。 改写模块代码中和require和export相关的语法，以及它们对应的引用变量。 在最后生成的bundle文件里建立一套模块管理系统，能够在runtime动态加载用到的模块。
我们可以看一下上面这个例子，Webpack打包出来的结果。最后的bundle文件总的来说是一个大的立即执行的函数，组织层次比较复杂，大量的命名也比较晦涩，所以我在这里做了一定改写和修饰，把它整理得尽量简单易懂。
首先是把所有用到的模块都罗列出来，以它们的文件名（一般是完整路径）为ID，建立一张表：
var moles = { './mA.js': generated_mA, './app.js': generated_app }
关键是上面的generated_xxx是什么？它是一个函数，它把每个模块的源代码包裹在里面，使之成为一个局部的作用域，从而不会暴露内部的变量，实际上就把每个模块都变成一个执行函数。它的定义一般是这样：
function generated_mole(mole, exports, webpack_require) { // 模块的具体代码。 // ... }
在这里模块的具体代码是指生成代码，Webpack称之为generated code。例如mA，经过改写得到这样的结果：
function generated_mA(mole, exports, webpack_require) { var aa = 1; function getDate() { return new Date(); } mole.exports = { aa: aa, getDate: getDate } }
乍一看似乎和源代码一模一样。的确，mA没有require或者import其它模块，export用的也是传统的CommonJS风格，所以生成代码没有任何改动。不过值得注意的是最后的mole.exports = ...，这里的mole就是外面传进来的参数mole，这实际上是在告诉我们，运行这个函数，模块mA的源代码就会被执行，并且最后需要export的内容就会被保存到外部，到这里就标志着mA加载完成，而那个外部的东西实际上就后面要说的模块管理系统。
接下来看app.js的生成代码：
function generated_app(mole, exports, webpack_require) { var mA_imported_mole = webpack_require('./mA.js'); console.log('mA.aa =' + mA_imported_mole['aa']); mA_imported_mole['getDate'](); }
可以看到，app.js的源代码中关于引入的模块mA的部分做了修改，因为无论是require/exports，或是ES6风格的import/export，都无法被JavaScript解释器直接执行，它需要依赖模块管理系统，把这些抽象的关键词具体化。也就是说，webpack_require就是require的具体实现，它能够动态地载入模块mA，并且将结果返回给app。
到这里你脑海里可能已经初步逐渐构建出了一个模块管理系统的想法，我们来看一下webpack_require的实现：
// 加载完毕的所有模块。 var installedMoles = {}; function webpack_require(moleId) { // 如果模块已经加载过了，直接从Cache中读取。 if (installedMoles[moleId]) { return installedMoles[moleId].exports; } // 创建新模块并添加到installedMoles。 var mole = installedMoles[moleId] = { id: moleId, exports: {} }; // 加载模块，即运行模块的生成代码， moles[moleId].call( mole.exports, mole, mole.exports, webpack_require); return mole.exports; }
注意倒数第二句里的moles就是我们之前定义过的所有模块的generated code：
var moles = { './mA.js': generated_mA, './app.js': generated_app }
webpack_require的逻辑写得很清楚，首先检查模块是否已经加载，如果是则直接从Cache中返回模块的exports结果。如果是全新的模块，那么就建立相应的数据结构mole，并且运行这个模块的generated code，这个函数传入的正是我们建立的mole对象，以及它的exports域，这实际上就是CommonJS里exports和mole的由来。当运行完这个函数，模块就被加载完成了，需要export的结果保存到了mole对象中。
所以我们看到所谓的模块管理系统，原理其实非常简单，只要耐心将它们抽丝剥茧理清楚了，根本没有什么深奥的东西，就是由这三个部分组成：
// 所有模块的生成代码 var moles； // 所有已经加载的模块，作为缓存表 var installedMoles； // 加载模块的函数 function webpack_require(moleId);
当然以上一切代码，在整个编译后的bundle文件中，都被包在一个大的立即执行的匿名函数中，最后返回的就是这么一句话：
return webpack_require(‘./app.js');
即加载入口模块app.js，后面所有的依赖都会动态地、递归地在runtime加载。当然Webpack真正生成的代码略有不同，它在结构上大致是这样：
(function(moles) { var installedMoles = {}; function webpack_require(moleId) { // ... } return webpack_require('./app.js'); }) ({ './mA.js': generated_mA, './app.js': generated_app });
可以看到它是直接把moles作为立即执行函数的参数传进去的而不是另外定义的，当然这和上面的写法没什么本质不同，我做这样的改写是为了解释起来更清楚。
ES6的import和export
以上的例子里都是用传统的CommonJS的写法，现在更通用的ES6风格是用import和export关键词，在使用上也略有一些不同。不过对于Webpack或者其它模块管理系统而言，这些新特性应该只被视为语法糖，它们本质上还是和require/exports一样的，例如export：
export aa // 等价于: mole.exports['aa'] = aa export default bb // 等价于: mole.exports['default'] = bb
而对于import：
import {aa} from './mA.js' // 等价于 var aa = require('./mA.js')['aa']
比较特殊的是这样的：
import m from './m.js'
情况会稍微复杂一点，它需要载入模块m的default export，而模块m可能并非是由ES6的export来写的，也可能根本没有export default，所以Webpack在为模块生成generated code的时候，会判断它是不是ES6风格的export，例如我们定义模块mB.js:
let x = 3; let printX = () => { console.log('x = ' + x); } export {printX} export default x
它使用了ES6的export，那么Webpack在mB的generated code就会加上一句话：
function generated_mB(mole, exports, webpack_require) { Object.defineProperty(mole.exports, '__esMole', {value: true}); // mB的具体代码 // .... }
也就是说，它给mB的export标注了一个__esMole，说明它是ES6风格的export。这样在其它模块中，当一个依赖模块以类似import m from './m.js'这样的方式加载时，会首先判断得到的是不是一个ES6 export出来的模块。如果是，则返回它的default，如果不是，则返回整个export对象。例如上面的mA是传统CommonJS的，mB是ES6风格的：
// mA is CommonJS mole import mA from './mA.js' console.log(mA); // mB is ES6 mole import mB from './mB.js' console.log(mB);
我们定义get_export_default函数：
function get_export_default(mole) { return mole && mole.__esMole? mole['default'] : mole; }
这样generated code运行后在mA和mB上会得到不同的结果：
var mA_imported_mole = webpack_require('./mA.js'); // 打印完整的 mA_imported_mole console.log(get_export_default(mA_imported_mole)); var mB_imported_mole = webpack_require('./mB.js'); // 打印 mB_imported_mole['default'] console.log(get_export_default(mB_imported_mole));
这就是在ES6的import上，Webpack需要做一些特殊处理的地方。不过总体而言，ES6的import/export在本质上和CommonJS没有区别，而且Webpack最后生成的generated code也还是基于CommonJS的mole/exports这一套机制来实现模块的加载的。
模块管理系统
以上就是Webpack如何打包组织模块，实现runtime模块加载的解读，其实它的原理并不难，核心的思想就是建立模块的管理系统，而这样的做法也是具有普遍性的，如果你读过Node.js的Mole部分的源代码，就会发现其实用的是类似的方法。这里有一篇文章可以参考。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:探索webpack模块及webpack3新特性关于webpack2和模块打包的新手指南（小结）详解react-webpack2-热模块替换[HMR]webpack配置sass模块的加载的方法详解用webpack把我们的业务模块分开打包的方法Webpack常见静态资源处理-模块加载器（Loaders）+ExtractTextPlugin插件详解webpack异步加载业务模块jQuery 移动端拖拽（模块化开发，触摸事件，webpack）

热心网友 时间：2022-04-07 17:05

地址查询部分不同，浏览器会认为这是两个资源，放弃使用本地缓存、重新下载。
所以，开发者改动了这个js文件内容，自然希望用户的浏览器能重新下载这个文件、而不是继续使用缓存文件。这是版本控制的方法之一。
这个 key_cache 也许是文件的哈希值，也许是文件的改动时间，只要和上一次的不同就行了。
换句话，如果文件没有变动，这个 key_cache 值就不应该变动，这样下次访问，直接使用本地缓存文件，加快浏览速度。
（看来我得尝试多回答一些问题，练练思路，怎么越来越墨迹了呢）

热心网友 时间：2022-04-07 18:40

你好，这个？ 后面带的是参数和参数值，是用来传参的，如果有多个参数，中间用 & 分割哈