入门Webpack,看这个就行了

最新推荐文章于 2022-11-22 23:53:43 发布

weixin_65437914

最新推荐文章于 2022-11-22 23:53:43 发布

阅读量85

点赞数

文章标签： webpack 前端 npm

本文链接：https://blog.csdn.net/weixin_65437914/article/details/123531734

版权

一、Webpack的安装
1.全局安装

npm install -g webpack webpack-cli

2.安装后查看版本号

webpack -v

二、初始化项目
1.创建Webpack文件夹
进入webpack目录，执行命令

npm init -y

2.创建src文件夹
3.src下创建common.js

exports.info = function (str) {
    document.write(str);
}

4.src下创建utils.js

exports.add = function (a, b) {
    return a + b;
}

5.src下创建main.js

const common = require('./common');
const utils = require('./utils');
common.info('Hello world!' + utils.add(100, 200));

三、JS打包
1、webpack目录下创建配置文件webpack.config.js
以下配置的意思是：读取当前项目目录下src文件夹中的main.js（入口文件）内容，分析资源依赖，把相关的js文件打包，打包后的文件放入当前目录的dist文件夹下，打包后的js文件名为bundle.js

const path = require("path"); //Node.js内置模块
module.exports = {
    entry: './src/main.js', //配置入口文件
    output: {
   path: path.resolve(__dirname, './dist'), //输出路径，__dirname：当前文件所在路径
        filename: 'bundle.js' //输出文件
    }
}

2、命令行执行编译命令
webpack #有黄色警告
webpack --mode=development #没有警告
#执行后查看bundle.js 里面包含了上面两个js文件的内容并惊醒了代码压缩
也可以配置项目的npm运行命令，修改package.json文件

"scripts": {
    //...,
    "dev": "webpack --mode=development"
 }
运行npm命令执行打包

3、webpack目录下创建index.html
引用bundle.js

<body>
    <script src="dist/bundle.js"></script>
</body>

4、浏览器中查看index.html
四、什么是Webapck
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

五、为什么要使用Webpack
现今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了很多好的实践方法

模块化，让我们可以把复杂的程序细化为小的文件;
类似于TypeScript这种在JavaScript基础上拓展的开发语言：使我们能够实现目前版本的JavaScript不能直接使用的特性，并且之后还能能装换为JavaScript文件使浏览器可以识别；
Scss，less等CSS预处理器…
这些改进确实大大的提高了我们的开发效率，但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常反锁的，这就为WebPack类的工具的出现提供了需求。

六、使用Webpack的好处
1.轻松使用es6。

因为webpack可以在浏览器不支持es6的情况下让你使用es6语法，最新的webpack版本已经不需要配置也能过变异es6语法，之前的版本都需要加入babel加载器才可以打包es6.

2.可以打包文件

3.代码改变后，可是在浏览器上没有显示出改变后的效果。

4.减少界面请求数量。
许多图片图表都是放到一张图片上的，这样做的原因是因为能过减少图片体积，同样的将js，css文件打包也可以减少体积使几面加载的更快

5.顶级应用spa模式即单页面应用

七、webpack较之其他类似工具有什么不同？
1.有同步和异步两种不同的加载方式

    2.Loader,加载器可以将其他资源整合到JS文件中，通过这种方式，可以讲所有的源文件形成一个模块

    3.优秀的语法分析能力，支持 CommonJs AMD 规范

    4.有丰富的开源插件库，可以根据自己的需求自定义webpack的配置

八、webpack为什么要将所有资源放在一个文件里面？
我们知道，对于浏览器来说，加载的资源越少，响应的速度也就越快，所以有时候我们为了优化浏览器的性能，会尽可能的将资源合并到一个主文件app.js里面。但是这导致的很大的缺点：

    1.当你的项目十分庞大的时候，不同的页面不能做到按需加载，而是将所有的资源一并加载，耗费时间长，性能降低。
    2.会导致依赖库之间关系的混乱，特别是大型项目时，会变得难以维护和跟踪。比如:哪些文件是需要A模块加载完后才能执行的？哪些页面会受到多个样式表同时影响的？ 等许多问题。

            而webpack可以很好的解决以上缺点,因为它是一个十分聪明的模块打包系统，当你正确配置后，它会比你想象中的更强大，更优秀

weixin_65437914

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
入门Webpack,看这个就行了

一、Webpack的安装1.全局安装npm install -g webpack webpack-cli2.安装后查看版本号webpack -v二、初始化项目1.创建Webpack文件夹进入webpack目录，执行命令npm init -y2.创建src文件夹3.src下创建common.jsexports.info = function (str) { document.write(str);}4.src下创建utils.jsexports.add = func
复制链接

扫一扫