什么是Webpack

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。

Webpack安装

全局安装

npm install webpack -g
npm install webpack‐cli -g

安装后查看版本号

webpack -v

快速入门

js打包

（1）创建src文件夹，创建bar.js

exports.info=function(str){document.write(str);
}

（2）src下创建logic.js

exports.add=function(a,b){return a+b;
}

（3）src下创建main.js

var bar = require('./bar');
var logic = require('./logic');
bar.info('hello world!' + logic.add(100, 300));

（4）创建配置文件webpack.config.js ，该文件与src处于同级目录

var path = require('path');
module.exports = {entry: './src/main.js',output: {path:path.resolve(__dirname,'./dist'),filename:'bundle.js'}
}

以上代码的意思是：读取当前目录下src文件夹中的main.js（入口文件）内容，把对应的js文件打包，打包后的文件放入当前目录的dist文件夹下，打包后的js文件名为bundle.js。
（5）执行编译命令

webpack

（6）执行后查看bundle.js 会发现里面包含了上面两个js文件的内容。
（7）创建index.html ,引用bundle.js

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body><script src="./dist/bundle.js"></script>
</body>
</html>

测试调用index.html，会发现有内容输出。

css打包

（1）安装style-loader和 css-loader
Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用loader 进行转换。
Loader 可以理解为是模块和资源的转换器，它本身是一个函数，接受源文件作为参数，返回转换的结果。这样，我们就可以通过 require 来加载任何类型的模块或文件，比如CoffeeScript、 JSX、 LESS 或图片。首先我们需要安装相关Loader插件，css-loader 是将 css 装载到 javascript；style-loader 是让 javascript 认识css。

npm install style-loader css-loader --save-dev
#使用cnpm会报错
cnpm install style-loader css-loader --save-dev

（2）修改webpack.config.js

var path = require('path');
module.exports = {entry: './src/main.js',output: {path: path.resolve(__dirname, './dist'),filename: 'bundle.js'},module: {rules: [{test: /\.css$/,use: ['style-loader', 'css-loader']}]}
}

（3）在src文件夹创建css文件夹,css文件夹下创建css1.css

body{background: red;
}

（4）修改main.js ，引入css1.css

require('./css/css1.css')//新增内容
var bar = require('./bar');
var logic = require('./logic');
bar.info('hello world!' + logic.add(100, 300));

（5）重新运行webpack。
（6）运行index.html看看背景是不是变成红色啦？

Webpack安装及打包js、css文件示例相关推荐

webpack 中的加载器简介||webpack 中加载器的基本使用——1. 打包处理 css 文件 2. 打包处理 less 文件 3.打包处理 scss 文件
webpack 中的加载器 1. 通过 loader 打包非 js 模块在实际开发过程中,webpack 默认只能打包处理以 .js 后缀名结尾的模块,其他非 .js 后缀名结尾的模块, webpa ...
webpack打包js/css/scss/less/styl等（可以打包图片）
Webpack 1. 什么是webpack? 打包,压缩各种静态资源的工具(css,js,图片,图标等) 2.目的性能优化减少浏览器向服务端请求的次数节约服务器的的带宽资源 3.如何使用介绍 ...
gulp实现打包js/css/img/html文件，并对js/css/img文件加上版本号
参考打包教程: http://www.cnblogs.com/tugenhua0707/p/4069769.html http://www.cnblogs.com/tugenhua0707/p/498 ...
YUI Compressor插件压缩后war中的js/css文件未压缩的解决方法（被maven打包顶替了）
YUI Compressor Maven插件可以压缩/合并js或css文件,经常用在Maven项目中,但最近发现在wabapp中执行了 mvn install 命令进行发布之后,终端中显示插件已经执行 ...
vue html引入资源dev下404,webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)...
最近在使用webpack + vue做个人娱乐项目时,发现npm run build后,css js img静态资源文件均找不到路径,报404错误...网上查找了一堆解决办法,总结如下一.首先修改c ...
yii2 asset.php,Yii2中使用asset压缩js,css文件的方法_php实例
官网文档 http://www.yiiframework.com/doc-2.0/guide-structure-assets.html yii目录下运行 asset/template assets. ...
合并多个js,css文件的方法：在服务端合并js和css文件
合并所有的js和css文件可以减少HTTP请求,这样能提升访问速度. 通常为了开发的方便,我们会把js按用途分类,这样就会有很多js文件,比如sablog的jscript文件夹里就有10几个文件,这样 ...
Nginx相关解决nginx反向代理后页面上的js/css文件无法加载
解决nginx反向代理后页面上的js/css文件无法加载 location ~ \.php$ {proxy_pass http://127.0.0.1:8000;include naproxy.con ...
Nginx 环境下php web服务解决多接口和找不到js,css文件问题
nginx 下搭建多个服务区分端口查找nginx服务进程pid ps -ef | grep nginx root 4572 9396 0 18:53 pts/40 00:00:00 grep ng ...

Webpack安装及打包js、css文件示例