初识——Webpack

最新推荐文章于 2024-03-14 20:18:11 发布

七汐爱椰枣

最新推荐文章于 2024-03-14 20:18:11 发布

阅读量169

点赞数

1、webpack介绍:

webpack是一个现代的JavaScript应用模块打包器（module bundler），它能把各种资源，例如JS（含JSX）、coffee、样式（less/sass）、图片等都作为模块来处理和使用。它可以部分代替Grunt和gulp的功能。

2、webpack的安装

常规直接使用npm的形式来安装:

npm 是Node.js的包管理工具，这个我就不作过多的解释了，这个命令就是：全局安装webpack， -g 是全局安装的意思。

我们还可以直接安装到项目的依赖里，也就是写入package.json

3、配置文件webpack.config.js

按照常规来说，每个项目下都应该配置有webpack.config.js文件，它的作用就如果gulp的gulpfile.js 和Grunt的Gruntfile.js一样，就是一个配置项，告诉webpack它需要作的所有事情和如何去做。所以说webpack.config.js的编写也是我们学习重点。

重点:什么是入口文件？模块打包的起点称之为入口起点（entry point）。入口起点告诉webpack从哪里开始，并遵循着依赖关系进行打包。可以将您的应用入口起点认为是根上下文（contextual root）或app第一个启动文件。

4、我们来作一个实例（Hello World！）

建立index.html文件
建立main.js文件
建立webpack.config.js文件
安装live-server 并预览程序

index.html

 
        <!DOCTYPE html> 
       
        <html  
        lang 
        = 
        "en" 
        > 
       
        <head> 
       
        <title> 
        </title> 
       
        <meta  
        charset 
        = 
        "UTF-8" 
        > 
       
        <meta  
        name 
        = 
        "viewport" 
          
        content 
        = 
        "width=device-width, initial-scale=1" 
        > 
       
        </head> 
       
        <body> 
       
            <script type="text/javascript" src="bundle.js"></script> 
       
        </body> 
       
        </html>

main.js

 
         1 
       
        document 
        . 
        write 
        ( 
        "<h1>Hello World</h1>" 
        ) 
        ;

webpack.config.js

 
         1 
       
         2 
       
         3 
       
         4 
       
         5 
       
         6 
       
        module 
        . 
        exports 
          
        = 
          
        { 
       
        entry 
        : 
          
        "./main.js" 
        , 
       
        output 
        : 
          
        { 
       
        filename 
        : 
          
        'bundle.js' 
       
        } 
       
        } 
        ;

安装live-server,只要用npm install就可以安装了。

七汐爱椰枣

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初识——Webpack

1、webpack介绍:webpack是一个现代的JavaScript应用模块打包器（module bundler），它能把各种资源，例如JS（含JSX）、coffee、样式（less/sass）、图片等都作为模块来处理和使用。它可以部分代替Grunt和gulp的功能。2、webpack的安装常规直接使用npm的形式来安装:1$npm install webpack -gnpm 是Node.js的...
复制链接

扫一扫