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. Mono

    mono (Novell公司开发的跨平台·NET运行环境) http://baike.baidu.com/link?url=iGl5T4-pmpJwB01mQxHq95bJcrCvR_JMNNfP0u ...

  2. Ubuntu terminal 不见了

    Python出问题了,卸载Python后,terminal竟然消失了.. Ctrl + Alt + T出现的是XTerm 解决办法: 在XTerm中输入命令: # sudo apt-get insta ...

  3. chain.doFilter(request,response)含义

    过滤器的生命周期一般都要经过下面三个阶段: 初始化 当容器第一次加载该过滤器时,init() 方法将被调用.该类在这个方法中包含了一个指向 Filter Config 对象的引用.我们的过滤器实际上并 ...

  4. 随笔 JS 字符串 分割成字符串数组 并动态添加到指定ID的DOM 里

    JS /* * 字符串 分割成字符串数组 并动态添加到指定ID的DOM 里 * @id 要插入到DOM元素的ID * * 输入值为图片URL 字符串 * */ function addImages(i ...

  5. Python之迭代器和生成器

    Python 迭代器和生成器 迭代器 Python中的迭代器为类序列对象(sequence-like objects)提供了一个类序列的接口,迭代器不仅可以对序列对象(string.list.tupl ...

  6. 判断QQ是否在线

    <html> <body> ggygygygy<br> <td><a href="http://wpa.qq.com/msgrd?V=1 ...

  7. Yii2框架与MongoDB拓展、Redis拓展的安装流程

    @author 周煦辰 2016-03-21 这段时间新上了一个项目,使用的是Yii2框架.这里记录一下Yii2框架.Yii2-Mongo拓展.Yii2-Redis拓展等的安装流程.因为使用的系统是W ...

  8. Zepto.js touch模块深入分析

    目的:记录 Zepto.js touch模块 源码阅读 源码: // Zepto.js // (c) 2010-2015 Thomas Fuchs // Zepto.js may be freely ...

  9. 密码学初级教程(六）数字签名 Digital Signature

    密码学家工具箱中的6个重要的工具: 对称密码 公钥密码 单向散列函数 消息认证码 数字签名 伪随机数生成器 提问: 有了消息认证码为什么还要有数字签名? 因为消息认证码无法防止否认.消息认证码可以识别 ...

  10. sql移除换行回车符号 \r\n

    --移除回车符 update master_location SET street_number = REPLACE(street_number, CHAR(13), '') --移除换行符 upda ...