webpack的使用

最新推荐文章于 2024-07-12 13:09:35 发布

ryan_Ccchan

最新推荐文章于 2024-07-12 13:09:35 发布

阅读量376

点赞数

分类专栏： webpack 文章标签： webpack javascript

本文链接：https://blog.csdn.net/ryan_Ccchan/article/details/72560693

版权

webpack 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

什么是Webpack

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

首先我们来安装webpack，webpack可以用终端在npm上来安装，

//全局安装
npm install -g webpack
//安装到你的项目目录
npm install --save-dev webpack

回到你所在的文件夹看到是否多了这个文件夹，如果有那就证明安装成功了。

在文件夹里面创建两个空的文件夹准备做联系，并创建两个文件做下例子，再创建另外一个index.html来检验下效果。

index.html文件只有最基础的html代码，它唯一的目的就是加载打包后的js文件（bundle.js）<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Webpack Sample Project</title>
  </head>
  <body>
    <div id='root'>
    </div>
    <script src="bundle.js"></script>
  </body>
</html>


Greeter.js只包括一个用来返回包含问候信息的html元素的函数。
//main.js 
var greeter = require('./Greeter.js');
document.getElementById('root').appendChild(greeter());

main.js用来把Greeter模块返回的节点插入页面。
// Greeter.js
module.exports = function() {
  var greet = document.createElement('div');
  greet.textContent = "Hi there and greetings!";
  return greet;
};
然后正式开始使用webpack了，在终端里面输入node_modules/.bin/webpack app/main.js public/bundle.js 运行之后你会发现在public文件夹里面会多了个bundle.js文件。

 这句命令的意思就是将app文件夹里面的greeter.js和main.js打包生成bundle.js文件放在public文件夹里。
然后打开index.html来检验下效果。

通过配置文件来使用Webpack
Webpack拥有很多其它的比较高级的功能（比如说本文后面会介绍的loaders和plugins），这些功能其实都可以通过命令行模式实现，但是正如已经提到的，这样不太方便且容易出错的，一个更好的办法是定义一个配置文件，这个配置文件其实也是一个简单的JavaScript模块，可以把所有的与构建相关的信息放在里面。
还是继续上面的例子来说明如何写这个配置文件，在当前练习文件夹的根目录下新建一个名为webpack.config.js的文件，并在其中进行最最简单的配置，如下所示，它包含入口文件路径和存放打包后文件的地方的路径。
module.exports = {
  entry:  __dirname + "/app/main.js",//已多次提及的唯一入口文件
  output: {
    path: __dirname + "/public",//打包后的文件存放的地方
    filename: "bundle.js"//打包后输出文件的文件名
  }
}

   
   

    
    
注：“__dirname”是Node.js中的一个全局变量，它指向当前执行脚本所在的目录。

ryan_Ccchan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack的使用

什么是WebpackWebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。首先我们来安装webpack，webpack可以用终端在npm上来安装，//全局安装npm install -g webpack//安
复制链接

扫一扫