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. Quartz.NET总结（三）Quartz 配置

    前两篇文章,已经介绍了Quartz.NET的使用和Cron表达式表达式的写法,今天说一说Quartz的配置,Quartz相关的配置有三个quartz.config.quartz_jobs.xml.lo ...

  2. createStatement()的用法

    createStatement()的用法 标签: 数据库concurrencyscrollsql 2012-02-24 19:58 2508人阅读 评论(0) 收藏 举报  分类: JavaEE服务器 ...

  3. Jquery中$.load(),$.get(),$.post(),$.ajax(),$.getJSON()的作用与不同

    这个五个都是获取页面或者数据的方法.. 都是基于Ajax协议的..   $.get(url,[data],[callback])     //描述: 从服务器加载数据,请求方式为GET.  url   ...

  4. 边框(border)边距(margin)和间隙(padding)属性的区别

    边框属性(border):用来设定一个元素的边线.边距属性(margin):用来设置一个元素所占空间的边缘到相邻元素之间的距离.间隙属性(padding):用来设置元素内容到元素边界的距离.这三个属性 ...

  5. vim 配置，我本机的配置[windows]

    set nocompatible source $VIMRUNTIME/vimrc_example.vim source $VIMRUNTIME/mswin.vim behave mswin set ...

  6. codeforces Diagrams & Tableaux1 （状压DP）

    http://codeforces.com/gym/100405 D题 题在pdf里 codeforces.com/gym/100405/attachments/download/2331/20132 ...

  7. Linux运维初级教程（一）Shell脚本

    序,掌握shell脚本是linux运维工程师的最基础技能. 一.脚本语言 与高级语言不通,脚本语言运行时需要调用相应的解释器来翻译脚本中的内容. 常见的脚本语言有Shell脚本.Python脚本.ph ...

  8. 如何催促Apple进行App审核

    为什么提交给 App Store 的应用进入"审核(In Review)"状态后, 仍然可能会等待好多天的时间 ? 不过你也可以通过催促Apple进行App审核来缩短这个时间.以下 ...

  9. 增值税——基础知识

    一.增值税的概念 增值税是对从事销售货物或者提供加工.修理修配劳务以及从事进出口货物的单位和个人取得的增值额为课税对象征收的一种税. 增值额是指纳税人在生产.经营或劳务活动中所创造的新增价值,即纳税人 ...

  10. maven 向本地私库导入jar

    mvn install:install-file -DgroupId=<your_group_name> -DartifactId=<your_artifact_name> - ...