Webpack

最新推荐文章于 2023-04-18 08:40:53 发布

打酱油的小胖

最新推荐文章于 2023-04-18 08:40:53 发布

阅读量211

点赞数

Webpack安装前，本地环境需要支持node.js。

由于npm安装速度慢，使用淘宝镜像及其命令cnpm。

使用cnpm 安装webpack: cnpm install webpack -g

创建一个目录app: mkdir app

在app目录下添加runoob1.js：document.write("It works.")

在 app 目录下添加 index.html 文件，代码如下：

使用 webpack 命令来打包：

webpack runoob1.js bundle.js

创建第二个 JS 文件

接下来我们创建另外一个 js 文件 runoob2.js，代码如下所示：

app/runoob2.js 文件

 
   module 
   . 
   exports 
    =  
   " 
   It works from runoob2.js. 
   " 
   ; 
  

更新 runoob1.js 文件，代码如下：

app/runoob1.js 文件

 
   document 
   . 
   write 
   ( 
   require 
   ( 
   " 
   ./runoob2.js 
   " 
   ) 
   ) 
   ; 
  
 
   
 
  

使用webpack命令打包：

webpack runoob1.js bundle.js

LOADER

Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。

所以如果我们需要在应用中添加 css 文件，就需要使用到 css-loader 和 style-loader，他们做两件不同的事情，css-loader 会遍历 CSS 文件，然后找到 url() 表达式然后处理他们，style-loader 会把原来的 CSS 代码插入页面中的一个 style 标签中。

接下来我们使用以下命令来安装 css-loader 和 style-loader(全局安装需要参数 -g)。

 
   cnpm 
     
   install 
     
   css-loader 
     
   style-loader

执行以上命令后，会再当前目录生成 node_modules 目录，它就是 css-loader 和 style-loader 的安装目录。

接下来创建一个 style.css 文件，代码如下：

app/style.css 文件

 
   body 
     
   { 
     
   background: 
     
   yellow 
    
   ; 
   }

修改 runoob1.js 文件，代码如下：

app/runoob1.js 文件

 
   require 
   ("! 
   style-loader 
   ! 
   css-loader 
   !./ 
   style 
   .css 
   "); 
   document 
   .write 
   ( 
   require 
   ("./ 
   runoob2 
   .js 
   ")); 
  

接下来我们使用 webpack 命令来打包：

 
   webpack 
     
   runoob1 
   . 
   js 
     
   bundle 
   . 
   js 
  

require CSS 文件的时候都要写 loader 前缀 !style-loader!css-loader!，当然我们可以根据模块类型（扩展名）来自动绑定需要的 loader。将 runoob1.js 中的 require("!style-loader!css-loader!./style.css") 修改为 require("./style.css") ：

app/runoob1.js 文件

 
   require 
   ( 
   " 
   ./style.css 
   " 
   ) 
   ; 
   document 
   . 
   write 
   ( 
   require 
   ( 
   " 
   ./runoob2.js 
   " 
   ) 
   ) 
   ; 
  

然后执行：

 
   webpack 
     
   runoob1 
   . 
   js 
     
   bundle 
   . 
   js 
    -- 
   module 
   - 
   bind 
     
   ' 
   css=style-loader!css-loader 
   ' 
  

配置文件

我们可以将一些编译选项放在配置文件中，以便于统一管理：

创建 webpack.config.js 文件，代码如下所示：

app/webpack.config.js 文件

 
   module 
   . 
   exports 
    =  
   { 
     
   entry 
   :  
   " 
   ./runoob1.js 
   " 
   ,  
   output 
   :  
   { 
     
   path 
   :  
   __dirname 
   ,  
   filename 
   :  
   " 
   bundle.js 
   " 
     
   } 
   ,  
   module 
   :  
   { 
     
   loaders 
   :  
   [ 
     
   { 
     
   test 
   : /\. 
   css 
   $/,  
   loader 
   :  
   " 
   style-loader!css-loader 
   " 
     
   } 
     
   ] 
     
   } 
    
   } 
   ; 
  

接下来我们只需要执行 webpack 命令即可生成 bundle.js 文件：

 
   webpack 
  

打酱油的小胖

关注

0
点赞
踩
2

收藏

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

Webpack安装前，本地环境需要支持node.js。由于npm安装速度慢，使用淘宝镜像及其命令cnpm。使用cnpm 安装webpack: cnpm install webpack -g创建一个目录app: mkdir app在app目录下添加runoob1.js：document.write("It works.")在 app 目录下添加 index.html 文件，代码如下：&lt;html...
复制链接

扫一扫