【大前端】webpack初体验（1）

最新推荐文章于 2025-03-04 17:17:39 发布

伯nulee

最新推荐文章于 2025-03-04 17:17:39 发布

阅读量535

点赞数

分类专栏：日常文章标签： webpack 前端 javascript

本文链接：https://blog.youkuaiyun.com/liyunfu233/article/details/122235114

版权

日常专栏收录该内容

21 篇文章

订阅专栏

Webpack安装&使用

安装

npm install webpack webpack-cli -D

使用方式

方式一

./node_modules/.bin/webpack --version

方式二

npx webpack --version

入口(entry)

**入口起点(entry point)**指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。

出口(output)

output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist

const config = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.join(__dirname, './dist')
    }
}

loader

loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。

让webpack处理CSS文件

webpack 根据正则表达式，来确定应该查找哪些文件，并将其提供给指定的 loader。在这种情况下，以 .css 结尾的全部文件，都将被提供给 style-loader 和 css-loader。

引入对应loader

npm install --save-dev css-loader
npm install --save-dev style-loader

编写规则，匹配哪些后缀使用哪些loader webpack.config.js

module:{
    rules:[
        {
            test:/\.css$/,
            use:['style-loader','css-loader']
        }
    ]
}

loader链式传递，先从后面的loader开始

让webpack处理scss文件

引入对应loader
```
npm install sass-loader node-sass -D
```

编写规则

module:{
    rules:[
        {
            test:/\.(scss|sass)$/,
            use:['style-loader','css-loader','sass-loader']
        }
    ]
},

file-loader 和 url-loader 可以接收并加载任何文件，然后将其输出到构建目录。

让webpack处理图片

引入对应loader
```
npm install file-loader -D
```

编写规则

{
    test: /\.(png|jpg|svg|gif)$/,
    use:['file-loader']
}

可以在index.js中引入

import Icon from './icon.jpg';

//将图像添加到我们现有的div
const myIcon = new Image();
myIcon.src = Icon;
element.appendChild(myIcon);

也可在index.scss中引入

.hello{
  color: red;
  background: url("./icon.jpg");
}

让webpack处理字体

引入对应loader
```
npm install file-loader -D
```

编写规则

{
    test:/\.(woff|woff2|eot|ttf|otf)$/,
    use:['file-loader']
}

在index.scss中引入

@font-face {
  font-family: 'Myfont';
  src: url("./myfont.TTF") format('ttf');
  font-weight: 600;
  font-style: normal;
}
.hello{
  color: red;
  font-family: Myfont;
}

让webpack处理`CSV`、`TSV` 、`XML`

引入对应loader
```
npm install csv-loader xml-loader -D
```

编写规则

{
    test:/\.(csv|tsv)$/,
    use:['csv-loader']
},
{
    test:/\.xml$/,
    use:['xml-loader']
}

在src下创建data.xml并在index.js中引入

data.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>

index.js

import Data from './data.xml';

console.log(Data);

插件(plugins)

loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。

使用plugins处理html

引入对应plugins
```
npm install html-webpack-plugin -D
```
由于插件可以携带参数/选项，所以必须在webpack配置中，向plugins属性传入new实例

//处理src下的html文件
plugins: [
        new HtmlWebpackPlugin({template: "./src/index.html"})
],

模式(mode)

通过选择 development 或 production 之中的一个，来设置 mode 参数，你可以启用相应模式下的 webpack 内置的优化

module.exports = {
  mode: 'production'
};

模块热替换

过程

在应用程序中置换模块

应用程序代码要求HMR runtime检查更新
HMR runtime(异步)下载更新，然后通知应用程序代码
应用程序代码要求HMR runtime应用更新
HMR runtime(同步)应用更新

在编译器中

除了普通资源，编译器需要发出update，以允许更新之前的版本到新的版本，update由两部分组成：

更新后的manifest(JSON)
一个或多个更新后的chunk(JavaScript)

【大前端】webpack初体验（1）

Webpack安装&使用

安装

使用方式

方式一

方式二

入口(entry)

出口(output)

loader

让webpack处理CSS文件

让webpack处理scss文件

让webpack处理图片

让webpack处理字体

让webpack处理CSV、TSV 、XML

插件(plugins)

使用plugins处理html

模式(mode)

模块热替换

过程

在应用程序中置换模块

在编译器中

让webpack处理`CSV`、`TSV` 、`XML`