了解Webpack什么是webpackWebpack是一个模块打包器（bundler）。从Webpack的角度来看，所有的前端资源文件（js/css/img/less/...）都会被当作模块来处理。它会根据模块依赖进行静态分析，生成相应的静态资源。了解LoaderWebpack本身只能加载JSModule，如果要加载其他类型的文件（模块），需要使用相应的loader进行转换/加载Loader本身也是运行在node.js环境下的JavaScript模块。它本身是一个接受源文件作为参数并返回转换结果的函数。结果加载器一般以xxx-loader的形式命名，其中xxx表示这个加载器要执行的转换函数，比如json-loader。配置文件（默认）webpack.config.js：是一个node模块，返回一个json格式的配置信息对象。插件可以完成一些加载器无法完成的功能。插件的使用一般在webpack的配置信息的plugins选项中指定。Webpack本身内置了一些常用的插件，也可以通过npm安装第三方插件。学习文档：Webpack官方介绍：http://webpack.github.io/docs...Webpack中文指南：http://zhaoda.net/webpack-han...您将学习：如何安装webpack如何使用webpack如何使用使用loaders如何使用开发服务器如何使用image初始化项目：package.json{"name":"webpack_test","version":"1.0.0"}Installwebpacknpminstallwebpack@1-g//全局安装npminstallwebpack@1--save-dev//部分安装开始编译并创建entrysrc/js/:entry.jsdocument.write("entry.jsiswork");创建主页面build/:index.htmlcompilejswebpacksrc/js/entry.jsbuild/js/build.js视图页面效果第二个js创建第二个js：src/js/content.jsmodule.exports="
Itworksfromcontent.js";更新条目js：entry.js*document.write("entry.jsisworks.");*document.write(require("./content.js"));编译js：webpacksrc/js/entry.jsbuild/js/build.js查看页面效果先加载器(loader)installstyleloadernpminstallcss-loaderstyle-loader--save-dev创建样式文件：src/css/test.cssbody{背景：红色;}更多新入口js:entry.js+require("style-loader!css-loader!../css/test.css");*document.write("entry.jsisworks.");*document.write(require("./content.js"));编译js，查看页面效果webpacksrc/js/entry.jsbuild/js/bundle.jsbindingloader更新入口js:entry.js-require("style-loader!css-loader!./test.css");+要求("./test.css");编译：webpacksrc/js/entry.jsbuild/js/bundle.js--module-bindcss=style-loader!css-loader查看页面效果使用webpack配置文件创建webpack.config.jsmodule.exports={entry:"./src/js/entry.js",//入口路径配置输出：{//导出配置路径：__dirname+'/build/js',//输出路径文件名："bundle.js"//输出filename},module:{loaders:[//模块加载器配置{test:/\.css$/,loader:"style!css"}//所有css文件声明使用css-loader和style-loader加载器]}};编译webpackwebpack--progress//编译显示进度问题---每次修改模块文件内容手动重新打包，刷新自动编译webpack--watch//编译并开始监控（但需要刷新浏览器)浏览器自动刷新（热加载）----解决手动刷新浏览器的问题npminstallwebpack-dev-server@1-gwebpack-dev-server访问：http://localhost:8080/webpack-dev-服务器/;http://本地主机：8080！发现问题----访问的是文件夹路径而不是页面devServer:{contentBase:'./build',//内置服务器动态加载页面的目录historyApiFallback:true,//不要跳转toinline:true}contentBase:默认情况下，webpack-dev-server为根文件夹提供内置服务。如果其他目录下的文件提供服务，需要在这里设置目录（我们设置为构建文件夹）historyApiFallback:开发单页时非常有用，依赖于H5的historyAPI。设置为true时，所有跳转指向index.html；port:可以设置端口号，如果不设置，默认为8080inline:设置为true时，会自动刷新（with版本需要与hot:true一起使用）webpack-dev-serveraccess:http://localhost:8080问题：页面没有热加载自动刷新，是因为index的src导入的硬盘里的build文件不是webpack-dev-buildinserver服务器内存的特点：自动编译刷新界面不生成编译文件，直接在内存中编译处理，启动服务器运行项目加载图片安装依赖loadernpminstallurl-loaderfile-loader--save-devurl-loader比file-loader更完整，是file-loader的上层封装，但两者需要配合使用，在config中添加loader的配置{test:/\.(png|jpg)$/,loader:"url-loader?limit=8192"}//如果图片小于限制，则进行Base64编码复制2张图片tures:小图:img/logo.png大图:img/big.jpg定义参考图片的样式:test.css#box1{background-image:url(../img/logo.jpg);高度：200px；宽度：200px;}#box2{背景图片：url(../img/big.jpg);高度：200px；width:200px;}页面上的引用样式或图片：index.html
