webpack学习打包工具（基本操作）

一.webpack是一个前端资源加载 （打包工具）
1，webpack可以将多种静态资源，js,css,less,转成静态文件，减少页面的请求
2，webpack以来于node.js
二.安装 执行npm install webpack -g
三.新建项目
1,在自己选定的目录下npm init 文件名(注意，文件名不可以为webpack) 或者执行npm init -y
2,安装webpack依赖 npm install webpack --save -dev
四.使用
1,创建静态页面index.html文件,并在其中引入<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="bundle.js">文件名为webpack打包的这个文件，也可以自己起名</script>
2,创建入口文件entry.js,并写入document.write（"任意文字"）<注意此处代码为测试代码>
3,然后编译entry.js文件，并打包到bundle.js，执行webpack entry.js（自己创建的） bundle.js（html引入的文件）
完成之后会在文件夹里面多一个bundel.js文件(于你在heml里面引入的文件同名文件)
4,打开index看打包后的效果
5,再建一个module.js并写入module.exports="任意文字"
在入口文件entry.js中，写入document.write（require(‘./module.js’)）
然后重新打包到bundel.js 执行webpack entry.js bundel.js
五.loader 将css文件进行转换（webpack能直接打包js文件css需转换）
1.新建css.css，正常写样式表
在entry.js中引入require("!style-loader!css-loader!./css.css")
2.这需要loader，安装 npm install css-loader style-loader
3.再重新打包到bundle.js 执行webpack entry.js bundle.js就可以看到样式了。
4.修改不足之处，每次requir css文件时，都要写loader前缀
六.配置（简化css.css引入, 除去冗长前缀，为了只执行webpack命令，简化操作。）
文件名命名为webpack.cofing.js（默认情况下，会搜索当前目录下的webpack.cofing.js文件）
代码如下：
var webpack=require(‘webpack’）;
module.exports = {
entry: './entry.js', //最初的入口文件，用于加载模块
output: {
path: __dirname,
filename: 'bundle.js' //打包后生成的文件
},
module: {
loaders: [
{test: /.css$/, loader: 'style-loader!css-loader'} //所解析的文件
]
}
}
完成webpack.cofing.js文件后打包的话只执行webpack就ok了。