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. 第1章 JavaScript简介

    概述:Javascript是一种依赖于网页浏览器的脚本语言.是一种脚本语言.由Netscape和Sun共同开发.与Java没有什么关系.作为一种语言标准,而被称为ECMACcript.一个JS的实现包 ...

  2. js数字、字符串、数组之间的转化

    1.数组转字符串 var a, b; a = ,,,,); b = a.join("-"); 2.字符串转数组 var s = "abc,abcd,aaa"; ...

  3. EF事务

    var db = this.UnitOfWork as CodeFirstDbContext; using (var tan = db.Database.BeginTransaction()) { t ...

  4. maven pom.xml加载不同properties配置[转]

    可以参考http://www.openwebx.org/docs/autoconfig.html 1.pom.xml =========================== <!-- 不同的打包 ...

  5. git在windows命令行下使用

    “不是内部或外部命令,也不是可运行的程序”,通常要将程序的exe路径配置环境变量. 将git的bin目录的路径添加到环境变量path中即可.

  6. ASP.NET MVC5 Filter重定向问题

    ASP.NET MVC5 Filter重定向问题 一.问题描述 1.在Filter中使用直接filterContext.RequestContext.HttpContext.Response.Redi ...

  7. Ubuntu终端常用的快捷键

    Ubuntu终端常用的快捷键 Ubuntu中的许多操作在终端(Terminal)中十分的快捷,记住一些快捷键的操作更得心应手.在Ubuntu中打开终端的快捷键是Ctrl+Alt+T.其他的一些常用的快 ...

  8. jQuery EasyUI API 中文文档 - ValidateBox验证框

    jQuery EasyUI API 中文文档 - ValidateBox验证框,使用jQuery EasyUI的朋友可以参考下.   用 $.fn.validatebox.defaults 重写了 d ...

  9. c# 多线程 --Mutex（互斥锁）

    互斥锁(Mutex) 互斥锁是一个互斥的同步对象,意味着同一时间有且仅有一个线程可以获取它. 互斥锁可适用于一个共享资源每次只能被一个线程访问的情况 函数: //创建一个处于未获取状态的互斥锁 Pub ...

  10. 查看mysql数据库的数据引擎

    1, SHOW VARIABLES LIKE 'storage_engine'; 2,show table status from 数据库库名 where name='表名',例: mysql> ...