webpack配置项目加载静态资源

在上篇文章中,我分享了vue-loader与webpack项目配置,链接
http://blog.csdn.net/zzy123654321/article/details/79250644
这篇文章中,我将分享如何加载页面所需的各类静态资源
1.配置loader
打开webpack.config.js文件,在module下添加rules

//css相关配置
            {
                test: /\.css$/,//css文件格式
                use: [
                    'style-loader',
                    'css-loader'
                ]
            }
 //css预处理器stylus相关配置
            {
                test: /\.styl$/,//styl文件格式
                use: [
                    
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Webpack是一个前端资源加载/打包工具,它可以根据模块的依赖关系进行静态分析,并根据指定的规则生成对应的静态文件。在实战项目中,你可以使用Webpack来进行以下操作: 1. 将多个JavaScript文件合并为一个或多个bundle文件,从而减少网络请求次数。 2. 使用loaders来处理其他类型的文件,例如CSS、Less、Sass、图片等,并将它们转换为模块化的格式。 3. 使用插件来优化打包结果,例如压缩代码、提取公共模块、生成HTML文件等。 4. 使用Webpack的开发服务器(webpack-dev-server)来实现热更新,提高开发效率。 5. 配置不同的环境(开发环境、生产环境等)的不同配置文件,以满足不同环境下的需求。 你可以通过以下步骤来创建一个Webpack实战项目: 1. 首先,安装Node.js和npm(如果还没有安装的话)。 2. 创建一个新的项目目录,并在该目录下运行以下命令来初始化项目:npm init -y(这将生成一个默认的package.json文件)。 3. 在项目目录下,安装Webpack及其相关的开发依赖包,例如:npm install --save-dev webpack webpack-cli webpack-dev-server。 4. 创建一个Webpack配置文件(一般命名为webpack.config.js),并在其中配置entry、output、module、plugins等相关选项。 5. 在package.json文件中的scripts字段中,添加一些命令,例如:使用webpack-dev-server来启动开发服务器,使用webpack来进行打包等。 6. 在项目根目录下创建源代码文件,并根据需要创建不同的模块文件。 7. 运行npm run dev(或者根据你在package.json文件中配置的命令)来启动开发服务器,并在浏览器中查看运行结果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值