使用webpack构建前端项目

浅浅的花香味﹌ 2022-07-12 09:53 315阅读 0赞

### 1. webpack配置文件 ###

首先我们需要初始化项目，还有安装相关的webpack套件

> npm init
> 
> npm install webpack --save-dev

然后在该目录下添加`webpack.config.js`这个文件，这个其实就是webpack的配置文件。它是一个js文件，我们可以在里面使用js相关的语法。

### 2. 通过加入webpack相关的loader对预编译文件进行编译 ###

这里我用sass来说，我们需要用到的加载器是 `sass-loader`, `css-loader`, `style-loader`, `node-sass`。  
分别介绍以下

*  `sass-loader`是用来加载sass相关文件的。
 *  `node-sass`是用来编译sass文件的。
 *  `style-loader`, `css-loader`是用来加载相关的样式文件的。

节省时间一步到位安装

> npm install style-loader css-loader sass-loader node-sass --save-dev

加了`--save-dev`最后这些依赖包会自动添加到package.json文件里面去的。有助于日后对依赖包进行安装。

下面我们添加几个文件， 目录结构大概如下。

![1240][]

Paste\_Image.png

`node_modules`是安装依赖包的时候依赖包存放的地方。

#### index.html ####

<!doctype html>
    <html>
      <head>
        <title></title>
        <meta charset="utf-8" />
    
      </head>
      <body>
        <script src="build/bundle.js"></script>    
      </body>
    </html>

#### test.scss ####

body { background: red; }

#### index.js ####

require('./test.scss')

#### webpack.config.js ####

const path = require('path'); // 导入路径包 module.exports = { entry: "./index.js", // 入口文件 // 输出文件 build下的bundle.js output: { path: path.resolve(__dirname, 'build'), filename: "bundle.js" }, // 使用loader模块 module: { loaders: [ { test: /\.css$/, loader: "style!css"} ], loaders: [ { test: /\.scss$/, loader: "style!css!sass"} ] }, };

其实整个流程说白了就是，在入口文件`index.js`中导入相关的依赖，然后webpack十分智能地把这些东西都打包好生成到 `build/bundle.js`这个文件里面去。我们的页面只需要通过`<script>`标签引入这个文件就足够了。

由于配置文件已经配置好了，我们只需要在项目根目录运行这个脚本

> webpack

![1240 1][]

Paste\_Image.png

里面有一个bundle.js文件

![1240 2][]

Paste\_Image.png

可以看看页面效果

![1240 3][]

Paste\_Image.png

一切都相当成功。

### 3. 通过webpack-dev-server实现页面的自动刷新。 ###

刚刚都还是手动的过程，老板，我想要自动可以吗？当然可以。

资源自动编译并且页面自动刷新还是比较简单的，直接使用webpack-dev-server这个套件就可以了。

我们需要把这个套件全局安装到自己的机子上。

> npm install webpack-dev-server -g

而只要自己在根目录运行

> webpack-dev-server

就可以了。

这边会启动一个服务。

![1240 4][]

Paste\_Image.png

按照它的指示访问对应的地址

http://localhost:8080/webpack-dev-server/

这个时候我随便改变`test.scss`文件的内容，页面已经可以自动刷新了

![1240 5][]

Paste\_Image.png

###### ***拓展问题*** ######

这里衍生出一个问题是，当我们修改`index.html`的时候其实这个页面并不会自动刷新。这里我理解为，我们的入口文件`index.js`里面导入的是`test.scss`所以这个文件被webpack监听了，然而html模板文件并没有相关导入。这个问题该如何解决？Google之后我找到如下解决方案。

我们需要采用一个叫做`html-webpack-plugin`的插件，这是它的[github地址][github]。

> npm install html-webpack-plugin --save-dev

然后我们在webpack配置文件里面加入如下语句

说白了就是引入刚刚安装的插件，然后指定模板为当前目录下的`index.html`

重新运行`web-dev-server`服务  
再次访问站点

http://localhost:8080/webpack-dev-server/

现在就可以在修改index.html后自动刷新页面了。

![1240 6][]

Paste\_Image.png

## 最后 ##

今天的内容有点啰嗦，如果您不想看大段文字的话，可以直接看代码然后慢慢理解，请参考我github上相关[项目][Link 1]。最最最后，还是很感谢你能看到这里。

[1240]: /images/20220710/70c061873efd41ed976f06c19e90df6f.png
[1240 1]: /images/20220710/c2897b9a6edf4803a7c4151a4fdf7161.png
[1240 2]: /images/20220710/896e735340264085b0594776891f9878.png
[1240 3]: /images/20220710/a2e2fc5bca2346a0bd73c239b5a0ac76.png
[1240 4]: /images/20220710/f36957e62c8248a9bf43d343401f9300.png
[1240 5]: /images/20220710/2789e47a0586434496777d4ecc1de982.png
[github]: https://github.com/ampedandwired/html-webpack-plugin
[1240 6]: /images/20220710/39d31cbdb2bf4c83ad07d54158a7d909.png
[Link 1]: https://github.com/lanzhiheng/Monkey/tree/master/component