1、要确保node的版本是否是最新稳定版

2、接着需要packjson.js文件，全部enter掉就好了，默认值就行了

npm init

3、进行全局安装webpack

npm install -g webpack

4、cmd跳转到项目的文件夹，安装webpack

npm install --save-dev webpack

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

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

6、安装css中图片的loader和svg的依赖

npm url-loader svg-url-loader --save-dev

7、在项目文件夹新建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-loader!css-loader'},
            {test: /\.(png|jpg|gif)$/, loader: 'url-loader?limit=8192'},
            {test: /\.svg/, loader: 'svg-url-loader'}
        ]
    }
};

8、在项目文件夹下的js文件夹里新建一个entry.js，我的内容如下（测试用的）

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

9、输出的网页的内容index.html，如下

<!-- index.html -->

<html>

<head>

  <meta charset="utf-8">

</head>

<body>

  <script src="js/bundle.js"></script>

</body>

</html>

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

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

  1. http缓存策略-nginx只缓存js和css不缓存html

    使用缓存,是提升web性能最重要的方式之一. 在开发单页面应用的时候,大量的单静态资源引用都是依赖于html这个文件的.例如: <!doctype html> <html lang= ...

  2. webpack学习（六）打包压缩js和css

    打包压缩js与css 由于webpack本身集成了UglifyJS插件(webpack.optimize.UglifyJsPlugin)来完成对JS与CSS的压缩混淆,无需引用额外的插件, 其命令we ...

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

    在ASP.NET MVC4中(在WebForm中应该也有),有一个叫做Bundle的东西,它用来将js和css进行压缩(多个文件可以打包成一个文件),并且可以区分调试和非调试,在调试时不进行压缩,以原 ...

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

    转自:http://www.cnblogs.com/xwgli/p/3296809.html 在ASP.NET MVC4中(在WebForm中应该也有),有一个叫做Bundle的东西,它用来将js和c ...

  5. node作为前台的项目如何打包静态js和css并生成版本号，loader插件的使用

    一.使用场景: 1.node创建的前台项目需要输入地址展示页面 2.有设置缓存或者cdn的需要在静态文件更改时能使用新的而不是缓存的,需要版本号这里 3.可能需要压缩静态文件的 二.一些参考地址,需要 ...

  6. Webpack中hash与chunkhash的区别，以及js与css的hash指纹解耦方案

    文件的hash指纹通常作为前端静态资源实现增量更新的方案之一,Webpack是目前最流行的开源编译工具之一,其强大的功能也带来很多坑(当然,大部分麻烦其实都可以在官方文档中找到答案). 比如,在Web ...

  7. webpack学习笔记一：安装webpack、webpack-dev-server、内存加载js和html文件、loader处理非js文件

    一 .webpack学习环境准备: 1:window系统 2:安装node.js  官方网址 下载好后下一步下一步安装即可 安装步骤略过....... 3:nrm的安装 打开cmd命令控制台 输入:n ...

  8. webpack学习（一）安装和命令行、一次js/css的打包体验及不同版本错误

    一.前言 找了一个视频教程开始学习webpack,跟着视频学习,在自己的实际操作中发现,出现了很多问题.基本上都是因为版本的原因而导致,自己看的视频是基于webpack 1.x版,而自己现在早已是we ...

  9. webpack 之 一个简单的基本生产环境配置

    webpack 之 一个简单的基本生产环境配置 // 用来拼接绝对路径的方法 const {resolve} = require('path') const HtmlWebpackPlugin = r ...

随机推荐

  1. Linux下which、whereis、locate、find 命令的区别

    1.which 作用:查看可执行文件的位置(通过 PATH环境变量到该路径内查找可执行文件) 语法:which 可执行文件名称 示例: zsm@wilburUbun:/$ which passwd / ...

  2. （转）Java字符串

    转自:http://blog.sina.com.cn/s/blog_899678b90101brz0.html 创建字符串有两种方式:两种内存区域(字符串池,堆)1," " 引号创 ...

  3. Podfile升级后的影响

    之前项目里用的Podfile都是版本 0.39 后面有一天电脑格盘重装以后cocoapods装的版本是 1.0.0.beta.6 那么问题来了,在下载或者clone一下项目后,经常是需要自己安装第三方 ...

  4. UITableViewCell的separator分隔线设置失效

    // 处理separator -(void)viewDidLayoutSubviews { if ([self.tableView respondsToSelector:@selector(setSe ...

  5. sql FOR XML PATH

    FOR XML PATH 有的人可能知道有的人可能不知道,其实它就是将查询结果集以XML形式展现,有了它我们可以简化我们的查询语句实现一些以前可能需要借助函数活存储过程来完成的工作.那么以一个实例为主 ...

  6. bash: ifconfig: command not found解决方法

    1.问题: #ifconfig bash: ifconfig: command not found 2.原因:非root用户的path中没有/sbin/ifconfig ,其它的命令也可以出现这种情况 ...

  7. memcache相同主域名下的session共享

    本配置适合具有相同主域名的多台服务器进行session共享. 例如:www.lee.com , bbs.lee.com(多个子域名). 配置session保存在memcache: ini_set(&q ...

  8. C# Redis消息队列例子

    class Program { //版本2:使用Redis的客户端管理器(对象池) public static IRedisClientsManager redisClientManager = ne ...

  9. 遍历JObject

    JObject jo = JObject.Parse(jsonStr); IEnumerable<JProperty> properties = jo.Properties(); fore ...

  10. jQuery EasyUI API 中文文档 - ComboGrid 组合表格

    jQuery EasyUI API 中文文档 - ComboGrid 组合表格,需要的朋友可以参考下. 扩展自 $.fn.combo.defaults 和 $.fn.datagrid.defaults ...