ThinkChat2.0新版上线,更智能更精彩,支持会话、画图、阅读、搜索等,送10W Token,即刻开启你的AI之旅 广告
**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.