webpackt入门1：webpack介绍&webpack安装&使用webpack打包

Posted 2020-10-11 西门吹牛

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了webpackt入门1：webpack介绍&webpack安装&使用webpack打包相关的知识，希望对你有一定的参考价值。

本篇博客不是原创，简书的zhangwang写的，原文太长，我这里只是提取了一部分。

一、Webpack解决了什么问题

问题1.javascript这个脚本化语言在互联网的前端大行其道，但其一直被当作玩具语言，与Java、C#等后端语言相比，除了语法混乱、写法随意之外，无法模块化也是被诟病的一点。CommonJS标准中提出了模块化标准，而模块化标准带来的一个新的问题——项目文件增多，依赖复杂。如果工具能帮助我们自动分析文件的依赖关系，那感情是最好的。

问题2.ECMAScript有很多实现，JavaScript、TypeScript、CoffeeScript等，如果TypeScript这样的语言能转换成JavaScript，这样既能利用TypeScript的语法优点，又能利用JavaScript的场景利用的优势，那感情是最好的。

问题3.同理，Scss、Less这些CSS的预处理器，如果能使用Scss开发，并转换成CSS，那感情是最好的。

问题4.还有很多问题。。。。。。。

Webpack能帮你处理上面这些问题，简而言之：Webpack帮助你分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。

二、webpack工作方式

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

三、webpack安装

1.新建一个文件夹进行测试，如test

2.执行命令

$ npm install webpack -g //全局安装

$ npm install webpack -save-dev //本项目安装

3.查看webpack版本

四、打包方法1：使用命令行来打包

1.新建文件夹hellopack2

2.初始化项目：在项目的根目录下使用npm init命令，根据提示输入一系列的信息，会生成一个package.json文件

3.生成依赖：在项目的根目录下使用npm install命令，会生成node_modules文件夹，里面是各种依赖的包

4.建立如下的文件结构

5.输入相应的内容

//index.html,脚本引用了bundle.js，我们的webpack最终就是要生成这个文件
<!DOCTYPE html>
<html>
  <head>
    <title>hellowebpack2</title>
  </head>
  <body>
    <div id=\'root\'>
    </div>
    <script src="bundle.js"></script>
  </body>
</html>

//main.js
var greet=require(\'./greet\')
document.querySelector("#root").appendChild(greet());
document.querySelector("#root").append(\'Hi there and greetings!\');

//greet.js
module.exports = function(){
  var greet = document.createElement(\'div\');
  greet.textContent = "Hi there and greetings!";
  return greet;
};

6.命令行打包

项目根目录下执行命令：