在 webpack 出现之前,前端开发人员会使用 grunt 和 gulp 等工具来处理资源,并将它们从 /src
文件夹移动到 /dist
或 /build
目录中。
同样方式也被用于 JavaScript 模块,
但是,像 webpack 这样的工具,将动态打包(dynamically bundle)所有依赖项(创建所谓的依赖图(dependency graph))。
这是极好的创举,因为现在每个模块都可以明确表述它自身的依赖,我们将避免打包未使用的模块。
webpack 最出色的功能之一就是,除了 JavaScript,还可以通过 loader 引入任何其他类型的文件。
加载 CSS
为了从 JavaScript 模块中 import
一个 CSS 文件,你需要在 module
配置中 安装并添加 style-loader 和 css-loader:
npm install --save-dev style-loader css-loader
webpack.config.js
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' + ] + } + ] + } };
这使你可以在依赖于此样式的文件中 import './style.css'(放在index.js上面)
现在,当该模块运行时,含有 CSS 字符串的 <style>
标签,将被插入到 html 文件的 <head>
中。
请注意,在多数情况下,你也可以进行 CSS 分离,以便在生产环境中节省加载时间。
最重要的是,现有的 loader 可以支持任何你可以想到的 CSS 处理器风格 - postcss, sass 和 less 等。
加载图片:
现在我们正在下载 CSS,但是我们的背景和图标这些图片,要如何处理呢?使用 file-loader,我们可以轻松地将这些内容混合到 CSS 中:
npm install --save-dev file-loader
npm install image-webpack-loader --save-dev //进一步可以进行图片的压缩
{ + test: /\.(png|svg|jpg|gif)$/, + use: [ + 'file-loader' + ] + }
加载字体:
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' + ] + } ] } };
+ @font-face { + font-family: 'MyFont'; + src: url('./my-font.woff2'), + url('./my-font.woff'); + font-weight: 600; + font-style: normal; + } .hello { color: red; + font-family: 'MyFont'; background: url('./icon.png'); }
加载数据:
JSON 文件,CSV、TSV 和 XML,JSON是内置的;要导入 CSV、TSV 和 XML,你可以使用 csv-loader 和 xml-loader。让我们处理这三类文件
npm install --save-dev csv-loader xml-loader
+ { + test: /\.(csv|tsv)$/, + use: [ + 'csv-loader' + ] + }, + { + test: /\.xml$/, + use: [ + 'xml-loader' + ] + }
全局资源:
上述所有内容中最出色之处是,你可以以更直观的方式将模块和资源组合在一起,便于移植!