webpack的最简单应用,只使用js与css的打包

cmd跳转到项目的文件夹,安装webpack

npm install --save-dev webpack

接着需要packjson.sj文件,全部enter掉就好了,默认值就行了

npm init

接着在项目文件夹接着安装,css-loader 和 style-loader处理样式表

npm install --save-dev style-loader css-loader

在项目文件夹新建webpack.config.js,我的内容如下

var webpack = require(‘webpack‘)

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

在项目文件夹下的js文件夹里新建一个entry.js,我的内容如下

require(‘./style.css‘); // 载入 style.css
require(‘./index.js‘);//载入自身想要用的js

输出的网页的内容index.html,如下

<!-- index.html -->
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <script src="js/bundle.js"></script>
</body>
</html>

最后在命令行cmd中输入webpack就可以自动打包了(但是要记得始终要在原始目录下)

时间: 2024-12-09 19:35:06

webpack的最简单应用,只使用js与css的打包的相关文章

webpack学习(六)打包压缩js和css

打包压缩js与css 由于webpack本身集成了UglifyJS插件(webpack.optimize.UglifyJsPlugin)来完成对JS与CSS的压缩混淆,无需引用额外的插件, 其命令webpack -p即表示调用UglifyJS来压缩代码,还有不少webpack插件如html-webpack-plugin也会默认使用UglifyJS. uglify-js的发行版本只支持ES5,如果你要压缩ES6+代码请使用兼容开发分支. UglifyJS可用的选项有: parse       解释

【转】在ASP.NET MVC中,使用Bundle来打包压缩js和css

在ASP.NET MVC4中(在WebForm中应该也有),有一个叫做Bundle的东西,它用来将js和css进行压缩(多个文件可以打包成一个文件),并且可以区分调试和非调试,在调试时不进行压缩,以原始方式显示出来,以方便查找问题. 具体优势可自行百度或参看官方介绍:http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification 这里仅简单记录下如何使用. 首先,如果是使用的ASP.NET MVC4基本或者其他内容更丰富的模板,B

在ASP.NET MVC中,使用Bundle来打包压缩js和css(转)

转自:http://www.cnblogs.com/xwgli/p/3296809.html 在ASP.NET MVC4中(在WebForm中应该也有),有一个叫做Bundle的东西,它用来将js和css进行压缩(多个文件可以打包成一个文件),并且可以区分调试和非调试,在调试时不进行压缩,以原始方式显示出来,以方便查找问题. 具体优势可自行百度或参看官方介绍:http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification 这里仅简

[转载]在ASP.NET MVC中,使用Bundle来打包压缩js和css

在ASP.NET MVC4中(在WebForm中应该也有),有一个叫做Bundle的东西,它用来将js和css进行压缩(多个文件可以打包成一个文件),并且可以区分调试和非调试,在调试时不进行压缩,以原始方式显示出来,以方便查找问题. 具体优势可自行百度或参看官方介绍:http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification 这里仅简单记录下如何使用. 首先,如果是使用的ASP.NET MVC4基本或者其他内容更丰富的模板,B

在ASP.NET MVC中,使用Bundle来打包压缩js和css

在ASP.NET MVC4中(在WebForm中应该也有),有一个叫做Bundle的东西,它用来将js和css进行压缩(多个文件可以打包成一个文件),并且可以区分调试和非调试,在调试时不进行压缩,以原始方式显示出来,以方便查找问题. 具体优势可自行百度或参看官方介绍:http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification 这里仅简单记录下如何使用. 首先,如果是使用的ASP.NET MVC4基本或者其他内容更丰富的模板,B

简单粗暴地理解js原型链--js面向对象编程

简单粗暴地理解js原型链--js面向对象编程 原型链理解起来有点绕了,网上资料也是很多,每次晚上睡不着的时候总喜欢在网上找点原型链和闭包的文章看,效果极好. 不要纠结于那一堆术语了,那除了让你脑筋拧成麻花,真的不能帮你什么.简单粗暴点看原型链吧,想点与代码无关的事,比如人.妖以及人妖. 1)人是人他妈生的,妖是妖他妈生的.人和妖都是对象实例,而人他妈和妖他妈就是原型.原型也是对象,叫原型对象. 2)人他妈和人他爸啪啪啪能生出一堆人宝宝.妖他妈和妖他爸啪啪啪能生出一堆妖宝宝,啪啪啪就是构造函数,俗

从一个简单例子来理解js引用类型指针的工作方式

? 1 2 3 4 5 6 7 <script> var a = {n:1};  var b = a;   a.x = a = {n:2};  console.log(a.x);// --> undefined  console.log(b.x);// --> [object Object]  </script> 上面的例子看似简单,但结果并不好了解,很容易把人们给想绕了--"a.x不是指向对象a了么?为啥log(a.x)是undefined?".&

简单操作只需10秒破解PDF加密文件

简单操作只需10秒破解PDF加密文件 [尊重原创,转载请注明出处]http://blog.csdn.net/guyuealian/article/details/51345950 如何破解PDF加密文件,如何破解PDF密码呢,破解加密的PDF文件? 从网上下载的PDF文件,由于版权的问题,作者经常会加密禁止读者复制修改等权限,如下面的PDF文档,用Adobe pdf Reader打开时,会显示"已加密"的字样,虽然可以阅读,但不能修改和标记. 为了解决这个问题,可以采用绕过破解密码这一

一个简单且丑陋的js切换背景图片基础示例

不多说,直接上代码,非常基础的一个原生js切换元素背景图片范例 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>原生JS范例</title> <script type="text/javascript"> function changeBg()