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. Android学习笔记——Button

    该工程的功能是实现在activity中显示一个TextView和一个Button 以下代码是MainActivity中的代码 package com.example.button; import an ...

  2. Python基本运算符

    Python基本运算符 什么是操作符? 简单的回答可以使用表达式4 + 5等于9,在这里4和5被称为操作数,+被称为操符. Python语言支持操作者有以下几种类型. 算术运算符 比较(即关系)运算符 ...

  3. Hash Table in C

    http://www.sparknotes.com/cs/searching/hashtables/section3.rhtml http://en.literateprograms.org/Spec ...

  4. js 字符串分割成字符串数组 遍历数组插入指定DOM里 原生JS效果

    使用的TP3.2 JS字符串分割成字符串数组 var images='{$content.pictureurl} ' ;结构是这样 attachment/picture/uploadify/20141 ...

  5. 求1到n的阶乘

    #include<stdio.h> int main() { int data; ; scanf("%d",&data); ){ int j; ;j<=d ...

  6. Wordpress文章图片不居中与开头缩进问题

    //段落开头缩进 .Mid2L_con p {text-indent:2em;} //文章内图片不居中(设置居中后) .Mid2L_con .aligncenter { display: block; ...

  7. axure新手入门教程

    首先做个声明:此次教程里为了快速完成,借用了一些网上已有教程的图文,不是剽窃,只图方便.另外,因为汉化版本可能功能名称等略有差别,请自行理解. 名词解释: 线框图:一般就是指产品原型,比如:把线框图尽 ...

  8. MD5 (摘要加密)

    MD5 约定 同样的密码,同样的加密算法,每次加密的结果是不一样 密码方案 方案一:直接 MD5 pwd = pwd.md5String; 非常不安全 方案二 MD5 + 盐 pwd = [pwd s ...

  9. [c#]params可变参数

    摘要 在项目中多多少少会用到params这个关键字,来修饰参数,它的作用,让该参数的个数是可变的,并且可变参数必须是方法的最后一个参数.但如何判断到底有没有为该参数传递值,怎么判断? 一个例子 sta ...

  10. javascript 时间处理

    <script language="JavaScript" type="text/JavaScript"> var myDate = new Dat ...