**Loader**
One of the coolest webpack features is that you can also*include any other type of file*, besides JavaScript, for which there is a loader. This means that the same benefits listed above for JavaScript (e.g. explicit dependencies) can be applied to everything(`.css`, `img`, `.vue`, `fonts`, etc) used in building a website or web app.
webpack uses a regular expression to determine which files it should look for and serve to a specific loader.
[[官方网站 loaders]](https://webpack.js.org/loaders/)
[TOC]
## Loading CSS
In order to`import`a CSS file from within a JavaScript module, you need to install and add the `style-loade` and `css-loader` to your `module`configuration:
~~~bash
npm install --save-dev style-loader css-loader
~~~
**webpack.config.js**
~~~diff
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
+ module: {
+ rules: [
+ {
+ test: /\.css$/,
+ use: [
+ 'style-loader',
+ 'css-loader'
+ ]
+ }
+ ]
+ }
};
~~~
>[info] webpack uses a regular expression to determine which files it should look for and serve to a specific loader. In this case any file that ends with`.css`will be served to the`style-loader`and the`css-loader`.
## Loading Images
What about our images like backgrounds and icons? Using the `file-loader` we can easily incorporate those in our system as well:
~~~bash
npm install --save-dev file-loader
~~~
**webpack.config.js**
~~~diff
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
+ {
+ test: /\.(png|svg|jpg|gif)$/,
+ use: [
+ 'file-loader'
+ ]
+ }
]
}
~~~
## Loading Fonts
The file and url loaders will take any file you load through them and output it to your build directory. This means we can use them for any kind of file, including fonts. Let's update our`webpack.config.js`to handle font files:
**webpack.config.js**
~~~diff
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
},
+ {
+ test: /\.(woff|woff2|eot|ttf|otf)$/,
+ use: [
+ 'file-loader'
+ ]
+ }
]
}
};
~~~
## Loading Data
Another useful asset that can be loaded is data, like JSON files, CSVs, TSVs, and XML. Support for JSON is actually built-in, similar to NodeJS, meaning `import Data from './data.json'` will work by default.
To import CSVs, TSVs, and XML you could use the `csv-loade` and `xml-loader`. Let's handle loading all three:
~~~bash
npm install --save-dev csv-loader xml-loader
~~~
**webpack.config.js**
~~~javascript
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [
'file-loader'
]
},
+ {
+ test: /\.(csv|tsv)$/,
+ use: [
+ 'csv-loader'
+ ]
+ },
+ {
+ test: /\.xml$/,
+ use: [
+ 'xml-loader'
+ ]
+ }
]
}
};
~~~
Add some data files to your project:
**project**
~~~diff
webpack-demo
|- package.json
|- webpack.config.js
|- /dist
|- bundle.js
|- index.html
|- /src
+ |- data.xml
|- my-font.woff
|- my-font.woff2
|- icon.png
|- style.css
|- index.js
|- /node_modules
~~~
**src/data.xml**
~~~xml
<?xml version="1.0" encoding="UTF-8"?>
<note>
<to>Mary</to>
<from>John</from>
<heading>Reminder</heading>
<body>Call Cindy on Tuesday</body>
</note>
~~~
Now you can`import`any one of those four types of data (JSON, CSV, TSV, XML) and the`Data`variable you import it to will contain parsed JSON for easy consumption:
**src/index.js**
~~~diff
import _ from 'lodash';
import './style.css';
import Icon from './icon.png';
+ import Data from './data.xml';
function component() {
const element = document.createElement('div');
// Lodash, now imported by this script
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
element.classList.add('hello');
// Add the image to our existing div.
const myIcon = new Image();
myIcon.src = Icon;
element.appendChild(myIcon);
+ console.log(Data);
return element;
}
document.body.appendChild(component());
~~~
Re-run the `npm run build` command and open `index.html`. If you look at the console in your developer tools, you should be able to see your imported data being logged to the console!
> This can be especially helpful when implementing some sort of data visualization using a tool like [d3](https://github.com/d3). Instead of making an ajax request and parsing the data at runtime you can load it into your module during the build process so that the parsed data is ready to go as soon as the module hits the browser.
## expose-loader
expose loader module for webpack
**Requirements**
This module requires a minimum of `Node v6.9.0` and `Webpack v4.0.0`.
**Getting Started**
To begin, you'll need to install`expose-loader`:
~~~console
$ npm install expose-loader --save-dev
~~~
Then add the loader to your `webpack` config.
**webpack.config.js**
~~~js
module.exports = {
module: {
rules: [
{
test: /.js/,
use: [
{
loader: `expose-loader`,
options: {...options}
}
]
}
]
}
}
~~~
And then require the target file in your bundle's code:
~~~js
// src/entry.js
require("expose-loader?libraryName!./thing.js");
~~~
And run `webpack` via your preferred method.
For example, let's say you want to expose `jQuery` as a global called`$`:
~~~js
require("expose-loader?$!jquery");
~~~
Thus,`window.$`is then available in the browser console.
Alternately, you can set this in your config file:
**webpack.config.js**
~~~js
module: {
rules: [{
test: require.resolve('jquery'),
use: [{
loader: 'expose-loader',
options: '$'
}]
}]
}
~~~
Let's say you also want to expose it as `window.jQuery` in addition to `window.$`. For multiple expose you can use`!`in loader string:
**webpack.config.js**
~~~js
module: {
rules: [{
test: require.resolve('jquery'),
use: [{
loader: 'expose-loader',
options: 'jQuery'
},{
loader: 'expose-loader',
options: '$'
}]
}]
}
~~~
The [`require.resolve`](https://nodejs.org/api/modules.html#modules_require_resolve_request_options) call is a Node.js function (unrelated to`require.resolve`in webpack processing). `require.resolve` gives you the absolute path to the module (`"/.../app/node_modules/react/react.js"`). So the expose only applies to the react module. And it's only exposed when used in the bundle.
- WebAPP
- Linux Command
- 入门
- 处理文件
- 查找文件单词
- 环境
- 联网
- Linux
- Linux目录配置标准：FHS
- Linux文件与目录管理
- Linux账号管理与ACL权限设置
- Linux系统资源查看
- 软件包管理
- Bash
- Daemon/Systemd
- ftp
- Apache
- MySQL
- Command
- Replication
- mysqld
- remote access
- remark
- 限制
- PHP
- String
- Array
- Function
- Class
- File
- JAVA
- Protocals
- http
- mqtt
- IDE
- phpDesigner
- eclipse
- vscode
- Notepad++
- WebAPI
- Javasript
- DOM
- BOM
- Event
- Class
- Module
- Ajax
- Fetch
- Promise
- async/await
- Statements and declarations
- Function
- Framwork
- jQurey
- Types
- Promise
- BootStrap
- v4
- ThinkPHP5
- install
- 定时任务
- CodeIgniter
- React.js
- node.js
- npm
- npm-commands
- npm-folder
- package.json
- Docker and private modules
- module
- webpack.js
- install
- configuration
- package.json
- entry
- modules
- plugins
- Code Splitting
- loaders
- libs
- API
- webpack-cli
- Vue.js
- install
- Compile
- VueAPI
- vuex
- vue-router
- vue-devtools
- vue-cli
- vue-loader
- VDOM
- vue-instance
- components
- template
- Single-File Components
- props
- data
- methods
- computed
- watch
- Event-handling
- Render Func
- remark
- 案例学习
- bootstrap-vue
- modal
- fontAwesome
- Hosting Font Awesome Yourself
- using with jquery
- using with Vue.js
- HTML
- CSS
- plugins
- Chart.js
- D3.js
- phpSpreadSheet
- Guzzle
- Cmder
- Git
- git命令
- git流程
- Postman
- Markdown
- Regular Expressions
- PowerDesigner
- 附录1-学习资源