好多人在刚开始学习了webpack之后,可能对于webpack是什么?怎么用多少会有些迷茫,下面是我的学习心得,希望能帮助到大家,有不足之处,也欢迎提出共同来讨论。

webpack的特点

  1. 模块化

webpack会把一切视为模块,而模块化的文件会十分灵活,且容易调试以及升级,webpack会让人有种工程化的意识。

  1. 压缩和打包

有人会说webpack就是为js打包而生的,其他的功能也是后来才加上去的,所以webpack更注重打包,也就是说文件打包功能更加强大。此外,现在的webpack不仅能给js文件打包,css文件等等都可以,至于如何实现我们后面会提到。它还可以预编译文件等等。

webpack的安装

  1. npm 形式安装
$npm install webpack -g
  1. 也可以直接安装到项目的依赖里
npm init
npm install webpack -save-dev

配置webpack.config.js

what is entry point (入口文件)

模块打包的起点称之为入口文件。入口文件会告诉webpack从哪里开始打包和遵循着什么依赖关系进行打包。是你app第一个启动的文件。

实例

  1. 建立index.html
  2. 建立main.js
  3. 建立webpack.config.js文件
  4. 安装live-server并预览程序

index.html

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
</head>
 
<body>
    <script type="text/javascript" src="bundle.js"></script>
</body>
 
</html>

main.js

module.exports = {
    entry: "./main.js",
    output: {
        filename: 'bundle.js'
    }
};

安装live-server,
npm install live-server -g

感受一下吧。

当然这里是基本的东西。


本人
23 声望1 粉丝

« 上一篇
myn的git使用