webpack初认知1

1.什么是WebPack，为什么要使用它？

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

2.什么是Webpack

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。

3.Webpack的工作方式

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

image.png

4.开始使用Webpack

• nodejs环境

• 全局安装webpack

npm install webpack -g

• 新建个webpackTest目录，cmd到当前目录
• 初始化个package,json文件 会提示输入一堆brief enter跳过就行

npm init

image.png

• 当前目录下安装webpack

npm install --save-dev webpack
//--save-dev会在packjosn中注入webpack  devDependencies

image.png

何用？

//直接在新文件夹下拉入一个配置好的package,json
npm install
------会把devDependencies所有的依赖模块给你安装好。

5.来个简单的demo展示下

• 自行新建文件目录如下

  
  
  

  image.png

• index.html

• mian.js

var greeter = require('./greet.js');
document.getElementById('test').appendChild(greeter());

• greet.js

module.exports = function () {
    var greet = document.createElement('div');
    greet.innerHTML = "Hi greetings!";
    return greet;
};

• 执行打包命令行

node webapp/main.js public/build.js

image.png

image.png

下文--webpack初认知2