webpack----loader

1、Loaders

Loaders是webpack中最强大的功能之一了。通过使用不同的loader，webpack通过调用外部的脚本或工具可以对各种各样的格式的文件进行处理，如分析JSON文件并把它转换为JavaScript文件；或把下一代的JS文件（ES6，ES7)转换为现代浏览器可以识别的JS文件；或对React的开发而言，合适的Loaders可以把React的JSX文件转换为JS文件。

Loaders需要单独安装并且需要在webpack.config.js下的modules关键字下进行配置。安装命令为npm install --save-dev json-loader，Loaders的配置选项包括以下几方面：

modules配置选项	功能描述
test	一个匹配loaders所处理的文件的拓展名的正则表达式（必须）
loader	loader的名称（必须）
include/exclude	手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）
query	为loaders提供额外的设置选项（可选）

继续上面的例子，把Greeter.js里的问候消息放在一个单独的JSON文件里，并通过合适的配置使Greeter.js可以读取该JSON文件的值，配置方法如下

module.exports = {  devtool: 'eval-source-map', // 配置生成Source Maps，选择合适的选项  entry:  __dirname + "/app/main.js", // 已多次提及的唯一入口文件  output: {  path: __dirname + "/public", // 打包后的文件存放的地方  filename: "bundle.js" // 打包后输出文件的文件名  },  module: { // 在配置文件里添加JSON loader  loaders: [  {  test: /\.json$/,  loader: "json-loader"  }  ]  },  devServer: {  contentBase: "./public", // 本地服务器所加载的页面所在的目录  colors: true, // 终端中输出结果为彩色  historyApiFallback: true, // 不跳转  inline: true // 实时刷新  }
}

2、Babel

Loaders很好，不过有的Loaders使用起来比较复杂，如Babel。

Babel其实是一个编译JavaScript的平台，它的强大之处表现在可以通过编译达到以下目的：

1) 下一代的JavaScript标准（ES6，ES7），这些标准目前并未被当前的浏览器完全的支持；

2) 使用基于JavaScript进行了拓展的语言，如React的JSX。

Babel其实是几个模块化的包，其核心功能位于称为babel-core的npm包中，不过webpack把它们整合在一起使用，但是对于每一个需要的功能或拓展，都需要安装单独的包（用得最多的是解析Es6的babel-preset-es2015包和解析JSX的babel-preset-react包）。

一次性安装这些依赖包（npm一次性安装多个依赖模块，模块之间用空格隔开）：

npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react

在webpack中配置Babel的方法如下（在webpack.config.js的module部分的loaders里进行配置即可）：

module.exports = {  devtool: 'eval-source-map',//配置生成Source Maps，选择合适的选项  entry:  __dirname + "/app/main.js",//已多次提及的唯一入口文件  output: {  path: __dirname + "/public",//打包后的文件存放的地方  filename: "bundle.js"//打包后输出文件的文件名  },  module: {  loaders: [  {  test: /\.json$/,  loader: "json-loader"  },  {  test: /\.js$/,  exclude: /node_modules/,  loader: 'babel',  query: {  presets: ['es2015','react']  }  }  ]  }
}

Babel的配置选项：

Babel其实可以完全在webpack.config.js中进行配置，但考虑到babel具有非常多的配置选项，在单一的webpack.config.js文件中进行配置往往使得这个文件显得太复杂，因此一些开发者支持把babel的配置选项放在一个单独的名为 ".babelrc" 的配置文件中。现在的babel的配置并不算复杂，不过之后会再加一些东西，因此现在就提取出相关部分，分两个配置文件进行配置（webpack会自动调用.babelrc里的babel配置选项），如下：

module.exports = {  devtool: 'eval-source-map',//配置生成Source Maps，选择合适的选项  entry:  __dirname + "/app/main.js",//已多次提及的唯一入口文件  output: {  path: __dirname + "/public",//打包后的文件存放的地方  filename: "bundle.js"//打包后输出文件的文件名  },  module: {  loaders: [  {  test: /\.json$/,  loader: "json-loader"  },  {  test: /\.js$/,  exclude: /node_modules/,  loader: 'babel'  }  ]  }
}

　　.babelrc：

{  "presets": ["react", "es2015"]
}

3、模块

webpack的优点：把所有的文件都可以当做模块处理，包括JavaScript代码，也包括CSS和fonts以及图片等，通过合适的loaders，它们都可以被当做模块被处理。

1）CSS

webpack提供两个工具处理样式表，css-loader 和 style-loader，二者处理的任务不同，css-loader使得能够使用类似@import 和 url(...)的方法实现 require()的功能，style-loader将所有的计算后的样式加入页面中，二者组合在一起能够把样式表嵌入webpack打包后的JS文件中。

安装命令：npm install --save-dev style-loader css-loader

module.exports = {  devtool: 'eval-source-map',//配置生成Source Maps，选择合适的选项  entry:  __dirname + "/app/main.js",//已多次提及的唯一入口文件  output: {  path: __dirname + "/public",//打包后的文件存放的地方  filename: "bundle.js"//打包后输出文件的文件名  },  module: {  loaders: [  {  test: /\.json$/,  loader: "json-loader"  },  {  test: /\.js$/,  exclude: /node_modules/,  loader: 'babel',  query: {  presets: ['es2015','react']  }  },  {  test: /\.css$/,  loader: 'style!css'  }  ]  }
}

转载于:https://www.cnblogs.com/maomao93/p/7908160.html

webpack----loader相关推荐

webpack loader的套路
学习webpack loader,最后模拟style-loader.less-loader 什么是loader loader是一个函数,用来把文件转换成webpack识别的模块. loader API ...
Webpack: Loader 开发分享
Webpack: Loader 开发分享文章目录 Webpack: Loader 开发分享正文 1. Concept 概念 2. Configuration 配置实例 3. Custom 自定义 ...
一次搞懂Webpack Loader
50 亿观众的 "云上奥运",顶级媒体背后的数智化力量东京 2020 奥运会即将闭幕,本届奥运会由于疫情限制,东京地区赛事以无观众的空场形式举行,在无法亲临现场的情况下,全球观众 ...
如何编写一个 Webpack Loader
前言在平时自己由零搭建项目时,虽然基础配置都比较熟悉,比如配置 file-loader, url-loader, css-loader 等,配置不难,但究竟是怎么起作用的呢,今天就来说说如何编写一个 ...
webpack 复习（四）webpack loader
loader webpack 只是一个打包工具,它只负责分析各个模块的依赖关系,然后形成资源清单,最终打包生成到指定的文件中. 其他的功能需要借助 webpack loader 和 webpack p ...
webpack loader解析及自定义loader
自定义实现webpack loader加载模块,解析指定的类型文件 loader loader是一个导出为函数的node模块,可通过this访问上下文. 特点: loader单一职责,只负责解决单一的 ...
webpack + loader 使用笔记
先睹为快 demo 地址点这里 1. 准备一个 webpack_demo 创建 src 和 dist 文件夹在 src 目录下创建 js 文件夹在 js 文件夹下创建 module-1.js,m ...
webpack入门（四）——webpack loader 和plugin
什么是loader loaders是你用在app源码上的转换元件.他们是用node.js运行的,把源文件作为参数,返回新的资源的函数. 例如,你可以用loaders告诉webpack加载 coffe ...
实现一个 webpack loader
官网上的定义:loader 是一个转换器,用于对源代码进行转换. 例如 babel-loader 可以将 ES6 代码转换为 ES5 代码.sass-loader 将 sass 代码转换为 css 代 ...
Webpack:Loader学习—— Pitching Loader
Pitching 方法先执行(针对normal loader先前到后执行Pitching 再后到前执行normal loader) {test: /\.js$/,//处理js文件// use: [ ...

webpack----loader

webpack----loader相关推荐

最新文章

热门文章