干啥的
分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。
工作方式
把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个浏览器可识别的JavaScript文件。
Webpack工作原理
使用
-
安装
//将webpack安装到你的项目目录
npm install --save-dev webpack
-
写配置文件
在终端中使用npm init命令可以自动创建一个package.json文件
-
创建目录
在主文件夹里创建两个文件夹,page文件夹和public文件夹，src文件夹用来存放原始数据和我们将写的JavaScript模块，page文件夹用来存放准备给浏览器读取的数据（包括使用webpack生成的打包后的js文件以及一个index.html文件）。在这里还需要创建三个文件，index.html 文件放在page文件夹中，两个js文件（index.js和main.js）放在page文件夹中，此时项目结构如下图所示
index.html文件只有最基础的html代码，它唯一的目的就是加载打包后的js文件（bundle.js）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>insBaby</title>
</head>
<body>
<div id='page'>
</div>
<script src="bundle.js"></script>
</body>
</html>
index.js只包括一个用来返回包含问候信息的html元素的函数。
// index.js
module.exports = function() {
var app = document.createElement('div');
app.textContent = "可以啊";
return app;
};
main.js用来把index模块返回的节点插入页面。
//main.js
var index = require('./index.js');
document.getElementById('page').appendChild(index());
运行
一、命令行
//webpack {entry file/入口文件} {bundled file/存放bundle.js的地方}
webpack src/main.js page/bundle.js
二、通过配置文件来使用Webpack
Webpack拥有很多功能，这些功能其实都可以通过命令行模式实现，这样不太方便且容易出错的，一个更好的办法是定义一个配置文件，这个配置文件其实也是一个简单的JavaScript模块，可以把所有的与构建相关的信息放在里面。
在当前文件夹的根目录下新建一个名为webpack.config.js的文件
//“__dirname”是node.js中的一个全局变量，它指向当前执行脚本所在的目录。
var path = require("path");
module.exports = {
entry: {
app: ["./src/main.js"]//已多次提及的唯一入口文件
},
output: {
path: path.resolve(__dirname, "page"),
publicPath: "/page/",//打包后的文件存放的地方
filename: "bundle.js"//打包后输出文件的文件名
},
}
现在如果你需要打包文件只需要在终端里你运行webpack命令就可以了，这条命令会自动参考webpack.config.js文件中的配置选项打包你的项目
三、更快捷的执行打包任务
npm可以引导任务执行，对其进行配置后可以使用简单的npm start命令来代替这些繁琐的命令。在package.json中对npm的脚本部分进行相关设置即可，设置方法如下。
{
"name": "insbaby",
"version": "1.0.0",
"description": "就是框架再搭建一遍，不告诉你为了啥，咋地",
"main": "index.js",
"dependencies": {},
"devDependencies": {},
"scripts": {
"start": "webpack"
},
"repository": {
"type": "git",
"url": "git+https://github.com/daisymark/insBaby.git"
},
"keywords": [
"gaojing&hongling"
],
"author": "gaojing",
"license": "ISC",
"bugs": {
"url": "https://github.com/daisymark/insBaby/issues"
},
"homepage": "https://github.com/daisymark/insBaby#readme"
}
让你的浏览器监听你的修改
Webpack提供一个可选的本地开发服务器，这个本地服务器基于node.js构建，可以实现你让你的浏览器监测你的代码的修改，并自动刷新修改后的结果，不过它是一个单独的组件，在webpack中进行配置之前需要单独安装它作为项目依赖
npm install --save-dev webpack-dev-server
devserver配置选项有很多
这里是官网地址：(找不到中文配置文件,学习英文多么重要...)
https://webpack.js.org/configuration/dev-server/#devserver
修改webpack.config.js文件
//“__dirname”是node.js中的一个全局变量，它指向当前执行脚本所在的目录。
var path = require("path");
module.exports = {
devtool: 'eval-source-map',//配置生成Source Maps，选择合适的选项
entry: {
app: ["./src/main.js"]//唯一入口文件
},
output: {
path: path.resolve(__dirname, "page"),
filename: "bundle.js"//打包后输出文件的文件名
},
devServer: {
contentBase: path.join(__dirname, "page"),
compress: true,
port: 9000,
historyApiFallback: true,//不跳转
inline: true//实时刷新
}
};
修改package.json
{
"name": "insbaby",
"version": "1.0.0",
"description": "就是框架再搭建一遍，不告诉你为了啥，咋地",
"main": "index.js",
"dependencies": {},
"devDependencies": {
"webpack-dev-server": "^2.4.5"
},
"scripts": {
"start": "webpack-dev-server --progress"
},
"repository": {
"type": "git",
"url": "git+https://github.com/daisymark/insBaby.git"
},
"keywords": [
"gaojing&hongling"
],
"author": "gaojing",
"license": "ISC",
"bugs": {
"url": "https://github.com/daisymark/insBaby/issues"
},
"homepage": "https://github.com/daisymark/insBaby#readme"
}
下面说说webpack处理不同格式文件的功能
一、Loaders
通过使用不同的loader，webpack通过调用外部的脚本或工具可以对各种各样的格式的文件进行处理，比如说分析JSON文件并把它转换为JavaScript文件，或者说把下一代的JS文件（ES6，ES7)转换为现代浏览器可以识别的JS文件。或者说对React的开发而言，合适的Loaders可以把React的JSX文件转换为JS文件。
1>转换JSON的loaders
//安装可以装换JSON的loader
npm install --save-dev json-loader
//webpack.config.js
//“__dirname”是node.js中的一个全局变量，它指向当前执行脚本所在的目录。
var path = require("path");
module.exports = {
devtool: 'eval-source-map',//配置生成Source Maps，选择合适的选项
entry: {
app: ["./src/main.js"]//唯一入口文件
},
output: {
path: path.resolve(__dirname, "page"),
filename: "bundle.js"//打包后输出文件的文件名
},
module: {
rules: [
{
test: /\.json$/,
use: 'json-loader'
}
]
},
devServer: {
contentBase: path.join(__dirname, "page"),
compress: true,
port: 9000,
historyApiFallback: true,//不跳转
inline: true//实时刷新
}
};
修改package.json 其他的都一样
"scripts": {
"start": "webpack-dev-server --module-bind 'json=json-loader' --progress"
},
除了json-loader还有很多其他的~~
https://webpack.js.org/loaders/
2>转换css的loader
webpack提供两个工具处理样式表，css-loader 和 style-loader，二者处理的任务不同，css-loader使你能够使用类似@import 和 url(...)的方法实现 require()的功能,style-loader将所有的计算后的样式加入页面中，二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中。
//安装
npm install --save-dev style-loader css-loader
写到这儿，其实意思大概大家都能明白，市面上教程很多，最后发现还是只能看官方文档:
http://webpack.github.io/docs/usage.html
