Webpack

本文介绍如何使用npm安装Webpack及Angular,并配置相关加载器,包括style-loader、css-loader等,以实现HTML、CSS和SCSS文件的有效处理。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

安装Webpack之前建议先安装Node.js,然后采用npm的方式来安装Webpack:

npm install webpack -g

因为要用到angular,所以要安装angular:

npm install angular

还要安装一系列加载器(loader):

npm install style-loader css-loader url-loader sass-loader raw-loader

注意:除了webpack是全局安装之外,其他组件都是安装在app文件夹下面,会自动生成node_modules文件夹。

配置文件webpack.config.js

module.exports = {
  context: __dirname + '/app',//上下文
  entry: './index.js',//入口文件
  output: {//输出文件
    path: __dirname + '/app',
    filename: './bundle.js'
  },
  module: {
    loaders: [//加载器
      {test: /\.html$/, loader: 'raw'},
      {test: /\.css$/, loader: 'style!css'},
      {test: /\.scss$/, loader: 'style!css!sass'},
      {test: /\.(png|jpg|ttf)$/, loader: 'url?limit=8192'}
    ]
  }
};

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值