直接使用webpack进行打包

安装css loader,style loader(用来处理打包css文件)

命令行输入npm install css-loader style-loader --save-dev

新建一个js文件,里面内容随便编写一个函数即可(例:demo.js)

然后在命令行工具中输入webpack demo.js demo.bundle.js

这样就打包好了一个js文件。

相应的,准备好一个css文件(例:demo.css)

在demo.js顶部添加 require('./demo.css')

命令行中输入 webpack demo.js demo.bundle.js --module-bind "css=style-loader!css-loader'

这样css文件也就被打包进demo.js里啦...

你的人生永远不会辜负你的,那些转错的弯,那些走错的路,那些留下的泪水,那些滴下的汗水,那些留下的伤痕,全都让你成为独一无二的自己。

webpack从0开始---(二)的更多相关文章

  1. 基于Vue + Vuex + Vue-router + Webpack 2.0打造微信界面

    一.项目简介 基于Vue + Vuex + Vue-router + Webpack 2.0打造微信界面,实现了微信聊天.搜索.点赞.通讯录(快速导航).个人中心.模拟对话.朋友圈.设置等功能. 二. ...

  2. Webpack+vue2.0如何注册全局组件 (01)

    Part 1, 问题: webpack + vue2.0框架中,如何在入口js中注册组件? 就是在一个月以前,匆匆闯入vuejs这个社群,基本了解了vuejs的一些基础特性和语法.笔者兴致勃勃地开始想 ...

  3. webpack 4.0.0-beta.0 新特性介绍

    webpack 可以看做是模块打包机.它做的事情是:分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式 ...

  4. webpack 4.0 相关

    Webpack 4.0发布了!! https://www.jianshu.com/p/3a13f1b37300 webpack详解 https://juejin.im/post/5aa3d2056fb ...

  5. Webpack 2.0 的文档

    Webpack 2.0 的文档 https://webpack.js.org/get-started/

  6. webpack 4.0 版本的简单使用

    webpack 4.0 学习指南 最近前端又要变天了,vue作者推出了vue-cli 3版本,并且里面使用了webpack 4. 但是webpack 3 和webpack 4 二者的使用方式完全不一样 ...

  7. webpack 3.1 升级webpack 4.0

    webpack 3.1 升级webpack 4.0 为了提升打包速度以及跟上主流技术步伐,前段时间把项目的webpack 升级到4.0版本以上 webpack 官网:https://webpack.j ...

  8. 探索ASP.Net Core 3.0系列二:聊聊ASP.Net Core 3.0 中的Startup.cs

    原文:探索ASP.Net Core 3.0系列二:聊聊ASP.Net Core 3.0 中的Startup.cs 前言:.NET Core 3.0 SDK包含比以前版本更多的现成模板. 在本文中,我将 ...

  9. webpack 4.0尝鲜

    发布不久得webpack 4.0据说速度快了68% - 98%,然后还支持没配置文件,所以看起来很牛逼得样子 所以尝试一发 webpack和webpack-cli分离 现在执行webpack命令 必须 ...

  10. webpack 4.0 配置方法以及错误解决

    选取一个空目录来试验 全局安装webpack4.1之后 创建目录 mkdir webpacktest && cd webpacktes 初始化package.json npm init ...

随机推荐

  1. 在ASP.NET Core 2.0中使用MemoryCache

    说到内存缓存大家可能立马想到了HttpRuntime.Cache,它位于System.Web命名空间下,但是在ASP.NET Core中System.Web已经不复存在.今儿个就简单的聊聊如何在ASP ...

  2. Kotlin——从无到有系列教程(5): 你该知道的Kotlin可空类型、空安全(null)、类型转换等特性

    在我们熟知的Java中,定义一个变量可以默认不赋值,因为Java的系统会给我们默认赋一个默认值,并且Java可定义一个赋值为null的变量,这样在使用这个变量的时候都会去显示判断该变量是否为null. ...

  3. C#在与java对接时候的UrlEncode的坑

    最近与建行接口做对接和与一家短信运营商做对接时候遇到了这个坑 在java中对UrlEncode 时候哪些url非安全字符被转为%数字和大写字幕组合,比如:zhangsan/d 会被转为 zhangsa ...

  4. 超市买苹果.py

    # 定义苹果数量 price = 5 # 挑选苹果 weight = 4 # 计算金额 money = price * weight money -= 5 # 三个变量 print(type(1.5) ...

  5. 【转载】Centos7 中使用Supervisor守护进程

    配置supervisor实现进程守护 1.安装supervisor yum install Supervisor   2.启动服务 supervisord -c /etc/supervisord.co ...

  6. CSS的box-sizing属性

    box-sizing属性可以为三个值之一:content-box(default),border-box,padding-box. content-box,border和padding不计算入widt ...

  7. Codeforces Round #451 (Div. 2)-898A. Rounding 898B.Proper Nutrition 898C.Phone Numbers(大佬容器套容器) 898D.Alarm Clock(超时了,待补坑)(贪心的思想)

    A. Rounding time limit per test 1 second memory limit per test 256 megabytes input standard input ou ...

  8. hdu_1045Fire Net(二分图匹配)

    hdu_1045Fire Net(二分图匹配) 标签: 图论 二分图匹配 题目链接 Fire Net Time Limit: 2000/1000 MS (Java/Others) Memory Lim ...

  9. NYoj_20吝啬的国度

    吝啬的国度 时间限制:1000 ms  |  内存限制:65535 KB 难度:3 描述 在一个吝啬的国度里有N个城市,这N个城市间只有N-1条路把这个N个城市连接起来.现在,Tom在第S号城市,他有 ...

  10. android下载管理、理财、浏览器、商品筛选、录音源码等

    Android精选源码 android仿美拍直播的点赞动画   android视频播放器完美切换全屏.小窗口源码   android类似随手记理财类源码   android简单浏览器源码   andr ...