webpack基础

Posted 2021-05-15 xin-xinx

webpack简单点来说就就是一个配置文件，所有的都是在这一个文件中发生的。 这个配置文件主要分为三大块

entry 入口文件 让webpack用哪个文件作为项目的入口

output 出口 让webpack把处理完成的文件放在哪里

module 模块 要用什么不同的模块来处理各种类型的文件

1、安装

先装好node和npm，因为webpack是一个基于node的项目。然后

npm install -g webpack

新建一个简单的项目

2、建立项目

建一个文件夹，然后新建一个package.json的文件在项目根目录下（可以一直点回车自动填写）

mkdir webpack

cd webpack

npm init
如果使用git或者svn管理这个项目的话，建议不要让git或者svn提交一些node依赖的模块

node_modules

3、项目结构

现在项目里面就有一个package.json， 可以多加一点东西，慢慢丰富内容。

/app

index.js

sub.js

 package.json

webpack.config.js

添加了两个js文件，添加了最重要的webpack的配置文件，我们还是从非常简单的hello world开始玩起，webpack原生直接支持AMD和CommonJS两种格式，如果你想使用ES6的风格，这点以后再提。

4、JS代码 sub.js

function generateText() {

　　var element = document.createElement(\'h2\');

　　element.innerhtml = "Hello h2 world";

　　return element;

}

module.exports = generateText;

index.js

var sub = require(\'./sub\');

var app = document.createElement(\'div\');

app.innerHTML = \'<h1>Hello World</h1>\';

app.appendChild(sub());

document.body.appendChild(app);

代码写完了，新建一个单独的module，并且在另外一个module里面引用他，最后会在页面里面输出两个标题。

5、配置Webpack

现在开始配置webpack，目标是把这两个js文件合并成一个文件. 我们可以自己在build文件夹里面手动建一个index.html文件夹，然后再把合并以后的js引用在里面，但是这样有些麻烦，所以我们这里安装一个plugin，可以自动快速的帮我们生成HTML。

npm install html-webpack-plugin --save-dev

有了这个插件 开始写config文件

 

 然后在项目根目录运行

webpack

终端显示一堆信息，然后告诉你成功了。

 

 会发现多出来一个build文件夹，直接点开里面的html文件，会发现“hello world”已经插入到页面了。任务完成了，成功生成html，合并js，html引入了js，js被执行了。

6、配置webpack-dev-server

上面任务虽然完成了，但是我们要不断运行程序然后查看页面，所以最好新建一个开发服务器，可以serve我们pack以后的代码，并且当代码更新的时候自动刷新浏览器。

安装webpack-dev-server

npm install webpack-dev-server --save-dev

安装完毕后 在config中添加配置

 

 然后在package.json里面配置一下运行的命令,npm支持自定义一些命令

 

 在项目根目录下输入npm start,一堆信息后server已经起来了，在浏览器里面输入自己的运行地址发现hello world出现了，在js里面随便修改一些输出然后保存, 浏览器自动刷新，新的结果就出现了