相识Webpack相干
什么是webpack
Webpack是一个模块打包器(bundler)。
在Webpack看来, 前端的一切资本文件(js/css/img/less/…)都邑作为模块处置惩罚
它将依据模块的依靠关联举行静态剖析，天生对应的静态资本
明白Loader
Webpack 自身只能加载JS模块，假如要加载其他范例的文件(模块)，就须要运用对应的loader 举行转换/加载
Loader 自身也是运转在 node.js 环境中的 JavaScript 模块
它自身是一个函数，接收源文件作为参数，返回转换的结果
loader 平常以 xxx-loader 的体式格局定名，xxx 代表了这个 loader 要做的转换功用，比方 json-loader。
设置文件(默许)
webpack.config.js : 是一个node模块，返回一个 json 花样的设置信息对象
插件
插件件能够完成一些loader不能完成的功用。
插件的运用平常是在 webpack 的设置信息 plugins 选项中指定。
Webpack 自身内置了一些经常使用的插件，还能够经由过程 npm 装置第三方插件
进修文档 :
webpack官方入门: http://webpack.github.io/docs…
Webpack中文指南: http://zhaoda.net/webpack-han…
你将学到:
How to install webpack
How to use webpack
How to use loaders
How to use the development server
How to use image
初始化项目: package.json
{ "name": "webpack_test", "version": "1.0.0" }装置webpack
npm install webpack@1 -g //全局装置 npm install webpack@1 --save-dev //部分装置最先编译
建立进口src/js/ : entry.js
document.write("entry.js is work");建立主页面 build/: index.html
<script type="text/javascript" src="js/build.js"></script>编译js
webpack src/js/entry.js build/js/build.js检察页面结果
第二个js
建立第二个js: src/js/content.js
module.exports = " <br> It works from content.js";更新进口js : entry.js
* document.write("entry.js is works."); * document.write(require("./content.js"));编译js:
webpack src/js/entry.js build/js/build.js检察页面结果
第一个加载器(loader)
装置款式的loader
npm install css-loader style-loader --save-dev建立款式文件: src/css/test.css
body { background: red; }更新进口js : entry.js
+ require("style-loader!css-loader!../css/test.css"); * document.write("entry.js is works."); * document.write(require("./content.js"));编译js, 并检察页面结果
webpack src/js/entry.js build/js/bundle.js
绑定加载器
更新进口js : entry.js
- require("style-loader!css-loader!./test.css"); + require("./test.css");编译:
webpack src/js/entry.js build/js/bundle.js --module-bind css=style-loader!css-loader检察页面结果
运用webpack设置文件
建立webpack.config.js
module.exports = { entry: "./src/js/entry.js",//进口途径设置 output: {//出口设置 path: __dirname + '/build/js',//输出途径 filename: "bundle.js"//输出文件名 }, module: { loaders: [//模块加载器设置 { test: /\.css$/, loader: "style!css"} //一切css文件声明运用css-loader和style-loader加载器 ] } };编译
webpack webpack --progress //编译显现进度题目—每次修正模块文件内容的从新手动打包，革新
自动编译
webpack --watch //编译并启动看管(但须要革新阅读器)阅读器自动革新(热加载)—-处理手动革新阅读器题目
npm install webpack-dev-server@1 -g webpack-dev-server 接见: http://localhost:8080/webpack-dev-server/ ; http://localhost:8080 !!!发明题目----接见的是文件夹途径而不是页面 devServer:{ contentBase: './build',//内置效劳器动态加载页面地点的目次 historyApiFallback:true,//不跳转 inline:true } contentBase : 默许webpack-dev-server为根文件夹供应内置的效劳，假如其他目次下的文件 供应效劳须要在此设置目次(我们设置为build文件夹) historyApiFallback : 开发单页面的时刻异常有效，它依靠于H5的 history API，当 设置为true的时刻一切的跳转都指向index.html； port：能够设置端口号，不设置时刻默许为 8080 inline ： 设置为true的时刻回自动革新(有的版本须要合营hot : true运用) webpack-dev-server 接见: http://localhost:8080 题目：页面没有热加载，自动革新，由于index的src引入的硬盘中的build文件而不是webpack-dev-server效劳器内存中的build 特性: 自动编译并革新界面 不天生编译后的文件, 直接在内存中编译处置惩罚, 并启动效劳器运转项目
加载图片
装置依靠的loader
npm install url-loader file-loader --save-dev url-loader比file-loader功用越发完美是对file-loader的上层封装,但两者需合营运用增加config中loader的设置
{ test: /\.(png|jpg)$/, loader: "url-loader?limit=8192" } //假如图片小于limit就会举行Base64编码拷入2张图片:
小图: img/logo.png
大图: img/big.jpg
定义援用图片的款式: test.css
#box1{ background-image: url(../img/logo.jpg); height: 200px; width: 200px; } #box2{ background-image: url(../img/big.jpg); height: 200px; width: 200px; }在页面援用款式或图片: index.html
<div id="box1"></div> <div id="box2"></div>编译并阅读
webpack-dev-server图片打包题目
1、图片大于8kb的时刻没法打包到js文件中， 2、index.html引入js的时刻发明没有打包进去的图片途径不对 3、处理方法： * //publicPath : './js/',//webpack的绝对途径,设置效劳index.html资本的途径
设置npm script敕令
"scripts": { "start": "webpack-dev-server", "build": "webpack" } npm start: 编译运转项目 npm build: 编译打包
