【webpack系列】webpack4.x入门配置基础（一） (2)

webpack.config.js中

const path = require("path"); module.exports = { mode: 'development', /*入口文件配置*/ entry: { main: './src/index.js' }, /*出口文件配置*/ output: { /*打包路径*/ path: path.resolve(__dirname, '../dist'), /*打包文件名称*/ filename: "main.js" }, /*模块：例如加载css，图片转换，压缩*/ module: { rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] } ] }, /*插件，用于生产的各种功能*/ plugins: [ ], /*配置webpack开发服务的功能*/ devServer: { } }

webpack 根据正则表达式，来确定应该查找哪些文件，并将其提供给指定的 loader。在这个示例中，所有以 .css 结尾的文件，都将被提供给 style-loader 和 css-loader。

通过在项目中添加一个新的 style.css 文件，并将其 import 到我们的 index.js中：

在src/index.js

import _ from 'lodash' import './css/index.css' function component() { let ele = document.createElement('div'); ele.innerHTML = _.join(['你好,2019,saucxs','webpack']); return ele } document.body.appendChild(component());

现在运行 build 命令：

查看后发现：

注意：在多数情况下，你也可以进行 ，以便在生产环境中节省加载时间。最重要的是，现有的 loader 可以支持任何你可以想到的 CSS 风格 - postcss, sass 和 less 等。

 

3.2 加载image图像

假想，现在我们正在下载 CSS，但是像 background 和 icon 这样的图像，要如何处理呢？使用 file-loader，我们可以轻松地将这些内容混合到 CSS 中：

npm install file-loader --save-dev

webpack.config.js

const path = require("path"); module.exports = { mode: 'development', /*入口文件配置*/ entry: { main: './src/index.js' }, /*出口文件配置*/ output: { /*打包路径*/ path: path.resolve(__dirname, '../dist'), /*打包文件名称*/ filename: "main.js" }, /*模块：例如加载css，图片转换，压缩*/ module: { rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] }, { test: /\.(png|svg|jpg|jpeg|gif|webp)$/, use: [ 'file-loader' ] } ] }, /*插件，用于生产的各种功能*/ plugins: [ ], /*配置webpack开发服务的功能*/ devServer: { } }

在使用 css-loader 时，如前所示，会使用类似过程处理你的 CSS 中的 url('http://www.likecs.com/my-image.png')。loader 会识别这是一个本地文件，并将 'http://www.likecs.com/my-image.png' 路径，替换为 output 目录中图像的最终路径。而 html-loader 以相同的方式处理 <img src="http://www.likecs.com/my-image.png" />。

我们向项目添加一个图像，然后看它是如何工作的，你可以使用任何你喜欢的图像：

src/index.js

import _ from 'lodash' import './css/index.css' import sau from './img/sau.jpg' function component() { let ele = document.createElement('div'); ele.innerHTML = _.join(['你好,2019,saucxs','webpack']); var image = new Image(); image.src = sau; ele.appendChild(image) return ele } document.body.appendChild(component());

src/css/index.css

body{ color: pink; background: url('../img/sau.jpg'); }

重新构建并再次打开 index.html 文件