webpack的基础使用

今天我准备总结的就是最近看的webpack4.17.1版本

一、为什么要用webpack

现今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了很多好的实践方法
1.模块化，让我们可以把复杂的程序细化为小的文件;
2.类似于TypeScript这种在JavaScript基础上拓展的开发语言：使我们能够实现目前版本的JavaScript不能直接使用的特性，并且之后还能转换为JavaScript文件使浏览器可以识别；
3.Scss，less等CSS预处理器

二、webpack的工作方式

把我们的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到我们的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。

三、怎么使用webpack

1、首先安装webpack之前需要先安装node：
- 在官网中下载node，然后安装。
- 使用npm 安装webpack

//全局安装webpack
npm install -g webpack
//安装到我们的项目目录下
npm install --save-dev  webpack

2、创建package.json文件
(在创建文件的过程中，会需要我们输入项目各种信息，如果没有要求严格，可以直接回车)

npm init

3、在当前目录下安装webpack

npm install --save-dev webpack

4、创建html页面、js文件（我是创建了两个，一个用来集合所有的js文件）

webpack打包的优势：将所有文件都加载成为静态资源，放在一个文件中。（webpack有多文件打包入口）

现在我来介绍一下我的目录：
str.js主要提供一些静态的变量、方法等，
index.js主要将使用的js全部集合起来。

index.html就是展示页面，index.html里面需要引入我们的打包好的文件，现在还未打包，是没有的，但是我们可以假装引入

那么现在我们的准备工作已经完成
5、打包文件

webpack index.js -o bundle.js

命令非常简单，bundle.js就是我们打包好的文件，bundle是打包的意思，所以可以使用这个命名。
下面是我打包好的bundle.js文件

当我们需要引入CSS样式文件的时候，我们需要
创建style.css文件
使用npm安装style-loader和css-loader
“`stylus
npm install –save-dev style-loader css-loader

在index.js文件中引入css文件，
```stylus
require("!style-loader!css-loader!./style.css")




<div class="se-preview-section-delimiter"></div>

但是每次引入一个css样式文件都写!style-loader!css-loader!太过于繁琐，所以，我们可以在webpack.config.js中配置

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

以上就是我看的简单的webpack的使用