webpack
webpack的运行需要依赖node.js的运行环境。
安装webpack
cnpm install -g webpack@1.13.2
在project目录下创建a.js文件
document.write("hello webpack");
在项目目录下运行命令,会将a.js打包到bundle.js文件中
webpack a.js bundle.js
创建index.html，运行使用bundle.js文件
<html>
<head>
<script src="bundle.js"></script>
</head>
</html>
上面的例子中使用的是命令行的方式进行打包。
也可以通过配置文件的方式进行打包
例如：
文件webpack.config.js
module.exports = {
entry:'./a.js',
output:{
filename:'bundle.js'
}
};
在命令行中直接运行webpack命令就可以了。因为参数已经放在了webpack.config.js文件中。
webpack-dev-server：前面的例子是直接通过浏览器打开index.html页面，这种情况与实际的项目是有区别的，因为实际的项目通常会是在一个服务器上打开index.html，那么webpack-dev-server就是一个微服务器，运行它就是启动了一个web服务器，可以很方便的从服务器上打开这个index.html。
安装webpack-dev-server
cnpm install -g webpack-dev-server@1.15.0
运行webpack-dev-server
webpack-dev-server --open 就会自动打开与http协议关联的服务器，并显示默认的index.html页面。
会显示如下地址的访问：
http://localhost:8080/webpack-dev-server/
默认访问你的是8080端口，如果这个端口被占用了，那么可以自定义其他端口。
修改webpack.config.js如下：
module.exports = {
entry:'./a.js',
output:{
filename:'bundle.js'
},
devServer:{
port:8088
}
};
webpack-dev-server支持热更新，所谓的热更新，即在webpack.config.js中的entry文件（a.js）发生了改变之后，会自动运行webpack，并自动刷新页面，可以立即看到修改后的结果。
在webpack.config.js文件中导入webpack模块
即：
var webpack = require('webpack')
注意：
因为webpack模块是全局模块，在一些情况下，通过上面的方式导入不能够被识别，需要进行一次链接，即：npm link webpack
重新启动webpack-dev-server --open ，随便修改一下a.js文件，会看到不需要刷新html页面，自动更新的效果。（没有实验成功）
热更新是基于entry入口的文件。所以也可以见识html和css的更新。
虽然前面提到的是使用webpack-dev-server的方式，但是大多数的项目都会通关过npm的方式运行。
进行package.json文件的初始化
npm init -y -y表示所有操作都同意
修改package.json文件
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "a.js",
"scripts":{
"dev":"webpack-dev-server"
},
"dependencies": {
"webpack": "^1.13.2"
},
"devDependencies": {},
"scripts": {
"dev":"webpack-dev-server"
},
"keywords": [],
"author": "",
"license": "ISC"
}
运行npm run dev
测试：在浏览器中输入地址http://localhost:8088/
webpack多个入口文件
新增b.js文件：
document.write("hello webpack from b.js");
修改webpack.config.js文件如下：
var webpack = require('webpack')
module.exports = {
entry: {
bundle1:'./a.js',
bundle2:'./b.js'
},
output: {
filename: '[name].js'
},
plugins:[
new webpack.HotModuleReplacementPlugin()
],
devServer: {
port:8088,
inline:true,
hot:true
}
}
修改index.html文件：
<html>
<head>
<script src="bundle1.js"></script>
<script src="bundle2.js"></script>
</head>
</html>
运行npm run dev
浏览器中输入http://localhost:8088/webpack-dev-server/
ES6的全称为ECMAScript 6.0，是下一代javaScript语言的标准。
因为ES6标准推出的时间还不够久，所以并不是所有的浏览器都支持ES6的运行，因此需要把ES6的javaScript代码，转码成ES5的标准代码，以便能够在当下的浏览器中兼容运行。
转码工具有很多种，babel就是其中一种。
安装babel
运行如下的安装命令：
npm install --save-dev babel-loader@6.2.7 babel-core@6.18.0 babel-preset-latest@6.24.1
在a.js中写入：
const name = 'ES6'
document.write(`hello ${name}`)
修改webpack.config.js文件如下：
var webpack = require('webpack')
module.exports = {
entry: './a.js',
output: {
filename: 'bundle.js'
},
module:{
loaders:[
{
test:/\.js$/, //表示仅仅转换.js文件
loader:'babel', //使用babel进行转换
query:{
presets:['latest'] //表示使用最新的语法规则进行
}
}
]
},
devServer: {
port:8088
}
}
修改index.html文件如下：
<html>
<head>
<script src="bundle.js"></script>
</head>
</html>
运行webpack命令进行打包：
可以看到bundle.js文件中将
const name = 'ES6'
document.write(`hello ${name}`)
转码为：
/***/ function(module, exports) {
'use strict';
var name = 'ES6';
document.write('hello ' + name);
/***/ }
/******/ ]);
运行npm run dev命令
在浏览器中输入http://localhost:8088/webpack-dev-server/
CSS模块
在webpack中所有文件都是模块，所以一个css文件也是模块
可以使用css-loader和style-loader将css文件作为一个模块打包到bundle.js文件中。
安装css-loader和style-loader
npm install style-loader@0.13.1 css-loader@0.25.0 --save-dev
准备style.css文件
body{
background-color:blue;
}
修改package.config.js,增加style-loader和css-loader.要使css起作用，需要同时使用这两个loader
var webpack = require('webpack')
module.exports = {
entry: './a.js',
output: {
filename: 'bundle.js'
},
module:{
loaders:[
{
test:/\.js$/, //表示仅仅转换.js文件
loader:'babel', //使用babel进行转换
query:{
presets:['latest'] //表示使用最新的语法规则进行
}
},
{
test:/\.css/,
loader:'style-loader!css-loader'
}
]
},
devServer: {
port:8088
}
}
修改a.js文件，将style.css文件当作一个模块加进去
require('./style.css')
const name = 'ES6'
document.write(`hello ${name}`)
运行npm run dev可以在浏览器中看到背景变成了蓝色。
