webpack是现代流行的一款前端打包工具。一般来说，一个真实的网页往往不使用纯js编写。比如大型网页，我们一般会选择Typescript, Less等产品化工具型语言，或者使用Angular, React 等前端框架。如果是这样写出来的网页往往不是能直接放到浏览器里执行的。
一般来说，我们会先用lessc命令将网页所有的less文件编译成浏览器识别的css文件。再用tsc命令将网页用到的ts文件编译成浏览器识别的js文件。一步步操作完成。
通常产品化的网页维护成本较大，一般我们将步骤合法化到批处理文件或是其他方式，但这些都不适用于真正竞争力充足的商品。
webpack主要就是针对于这些需求自动化完成网页打包的工具。
1.最基本的功能 -- 识别文件依赖，允许使用require等高级语法。
很多浏览器都还不支持require export等语法。webpack原生就支持这种写法，并且能够分析文件依赖。
npm init
npm install webpack
编写测试代码：
grapecity.js:
module.exports = function showCompapy(){
console.log('This is Grapecity! We have a new child company');
var gartner = require('./gartner.js');
gartner();
}
gartner.js:
module.exports = function showCompapy(){
console.log('This is Gartner New Guy!');
}
入口文件 main.js:
var gc = require("./grapecity.js");
gc();
编写webpack配置，webpack配置就有点类似早期大型网页开发人员编写的批处理文件。
module.exports = {
entry: __dirname + '/source/main.js',
output: {
path: __dirname + '/output',
filename: 'bundle.js'
},
devtool: "eval-source-map"
}
最基本的配置包括：
入口文件：从什么文件开始分析依赖，并不断打包。
产物：一般是一个js文件。
调试工具：生成map文件，方便开发人员调试。
|
名称
|
特点
|
|
source-map
|
生成对应的产品源码和webpack源码
|
|
eval-source-map
cheap-module-eval-source-map
|
生成对应的产品源码
|
|
cheap-module-source-map
|
不生成源码
|
2.对框架的支持。（非原生支持）
npm install react react-dom --save
render.js
import React , { Component } from 'react'
export class Painter extends Component{
render(){
return (Painter Component);
}
}
main.js
import React from 'react';
import { render } from 'react-dom';
import { Painter } from './render.js';
window.onload = function () {
render( />, document.getElementById('container'));
};
直接运行，网页肯定会崩溃。但使用webpack也有错误，因为对框架支持并非是webpack原生支持的功能。
npm install --save-dev
babel-core babel-loader babel-preset-env babel-preset-react
安装多个插件
继续扩增webpack.config.js
module: {
rules: [
{
test: /(\.js|\.jsx)$/,
use: {
loader: "babel-loader",
options: {
presets: ['env', 'react']
}
}
}
]
}
在rules增加一项对js jsx文件的处理，使用babel-loader进行处理
presets是Babel的插件，通过
npm install babel-preset安装得到。插件用来转换成es6语法等
注意设置include可以提高速度。
可以把路径也换成绝对路径：
var path = require('path') ;
path.resolve(__dirname, 'src');
3.对CSS的支持（非原生支持）
还是得先安装下依赖
npm install --save-dev
style-loader css-loader
继续扩增下rules，这次针对css文件进行处理
{
test: /\.css$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader'
}
]
}
postcss-loader 可以增加不同浏览器对css某一属性的支持
4.typescript支持（非原生能支持）
先安装依赖
npm insatll typescript ts-loaer
typescipt可以编写他自己的config
tsconfig.json
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"sourceMap": true
}
}
再次给rules新增一项，这次主要处理ts
{
test: /\.ts$/,
use: {
loader: 'ts-loader'
}
},
添加测试的ts文件
export class Student{
constructor(container:HTMLDivElement){
if(!container){
return;
}
container.innerHTML = '
Welcome Typescript!
';}
}
入口文件引用
import { Student } from './test.ts';
window.onload = function () {
new Student(document.getElementById('container_02'));
};
5.原生插件（原生支持，无需安装额外包）
新增一句
var webpack = require('webpack');
新增项：
plugins: [
new webpack.BannerPlugin('版权所有，翻版必究')
]
这个从插件可以给最终的js文件开头新增一些话。
一些比较常用的需要安装的插件
npm install html-webpack-plugin
使用
var htmlWebpack = require('html-webpack-plugin');
plugins: [
new webpack.BannerPlugin('版权所有，翻版必究'),
new htmlWebpack({
filename: 'index-version-[hash].html',
inject: 'head',
template:'./source/index.html'
})
],
hash是关键字，每次生成的都不一样。生成的html会放在output的path属性里面
注意output的filename也可以带路径的，这样html和最终js产物就不冲突了。
template是模板，有了模板就可以只加js引用了。
6.补充
不一定非的要webpack.config.js
修改配置名字只需要修改package
webpack --config aa.js
--progress
--display-modules
--colors
--display-reason
"start": "webpack --config webpack.config.js --display-error-details"