与webpack有类似功能的工具grunt/gulp
1webpack 是什么？
打包工具(WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。)在此之前先了解前端模块化的背景

前端的模块化 以及AMD/CMD/CommonJS/es6 Module

前端模块化的背景以及CommonJS、AMD、CMD的发展和演变：
https://www.cnblogs.com/futai/p/5258349.html
es6 模块导出和导入常用方式

//导出  mymodule.js
export default function(){
   var a = 100;
}
//在其他文件使用时
import fn from 'mymodule'
fn();

CommonJs模块化常用方案

//导出
// module.js
let name = 'liakng xie';
let sayName = function () {
  console.log(name);
};

module.exports = { name, sayName }
//使用
// 通过 require 引入依赖
let module = require('./module.js');
module.sayName(); // likang xie

AMD模块化方案

define(['module'], function() {
  let name = 'likang xie';

  function sayName() {
    console.log(name);
  }
  
  return { sayName }
});

// 通过 require 引入依赖
require(['module'], function(mod) {
   mod.sayName(); // likang xie
})

CMD模块化方案

定义模块、使用模块
define(function(require, exports, module) {
  // 通过 require 引入依赖
   var otherModule = require('./otherModule');

   // 通过 exports 对外提供接口
   exports.myModule = function () {};

   // 或者通过 module.exports 提供整个接口
   module.exports = function () {};
});

理解CommonJs、AMD、CMD、ES6模块 https://www.jianshu.com/p/67ce52c93392
Webpack其实就是一个打包工具，他的思想就是一切皆模块，css是模块，js是模块，图片是模块。并且提供了一些列模块加载(各种-loader)来编译模块。官方推荐使用CommonJs规范，但是也支持CMD、AMD、ES6模块

2 webpack可以做什么
打包各种资源 css、 图片 、less、sass、typescript
转译 es6->es5
压缩代码
...

3 使用
webpack 3.版本和 4.版本
安装 webpack
npm i webpack webpack-cli -D(--save-dev)
4.*版本的webpack是不需要写配置文件就可以打包的，但是一般不这么干,为了使用起来更加灵活一般还是要对其进行相关配置,可以使用npx webpack 进行零配置打包。

进行打包的命令可以在package.json的文件夹下去配置 将 "scripts": {
"test": "echo "Error: no test specified" && exit 1"
}
配置为 "scripts": {
"build": "webpack"
}之后可以使用npm run build 来进行打包

打包时如果有没有手动去配置打包规则的话会自动寻找项目下的src目录中的index.js(必须是index.js其他名字会报错找不到相关模块)文件，打包完成后将生成的打包文件(main.js))自动放在创建的dist文件夹下，如果配置了打包规则则按照打包规则来进行打包。

4 配置webpack.config.js文件
const path = require("path");
module.exports = {
mode: "development",
// 指定入口文件
//entry: "./src/index.js",
entry: {
main: "./src/index.js"
},
// 指定输出打包后的目录及文件
output: {
path: path.resolve("./dist") ,// 绝对路径
filename: "bundle.js"
}
}

webpack本身只打包js，假如需要打包其他模块 需要合适的loader 加载器

打包css文件 需要style-loader和css-loader
安装：npm install style-loader css-loader -D
css-loader 处理样式中@import url
style-loader 使用js把css样式作为style标签的内容插入到页面中
安装完之后需要在webpack.config.js里面进行配置才可以打包css文件

Html-webpack-plugin插件
1 作用 根据配置的html产生一个引入打包后的html以方便测试
2 安装 npm install html-webpack-plugin
3 在webpack.config.js里面进行配置

webpack-dev-server 插件

1. 作用 配置开发服务器 执行命令npm run dev 自动监听是否有修改 然后打包 打开浏览器
   2.安装 npm install webpack-dev-server -D
   3.在package.json文件中配置 此处"scripts": {
   "build": "webpack"
   },改为"scripts": {
   "build": "webpack",
   "dev":"webpack-dev-server"
   },
   这样一有更新会立马自动将更新同步到浏览器视图中

打包图片
file-loader url-loader (url-loader是比file-loader优化的版本)
1 安装 npm i file-loader url-loader -D
2 配置 见webpack.config.js

less的打包
less
less less-loader style-loader css-loader
1 安装 npm i less less-loader style-loader css-loader -D
2 配置 见webpack.config.js

vue 打包
1 安装 npm i vue -S
npm i vue-loader vue-template-compiler-D
2 配置 见webpack.config.js
webpack手动配置的一个实例
项目目录

微信图片_20190513151615.png

配置的package.json

微信图片_20190513152605.png

手动配置的webpack.config.js文件

//此文件用来写webpack的相关配置，进行相关配置后就会根据配置过的信息来进行打包
//引入path模块
const path = require('path');
//引入生成html的模块
const HtmlCreate = require('html-webpack-plugin');
//vue打包用
const VueLoaderPlugin = require('vue-loader/lib/plugin');
//导出一个对象，里面包含设置的打包设置
module.exports = {
    mode:'development',//此配置是用来去除打包时的警告信息 此处可以填写development和production 一个打包之后的代码有缩进，一个会对打包后的代码进行压缩
    //指定打包的入口文件 将来打包时会自动寻找入口文件下的文件作为打包文件
    // entry:'./src/index.js',
    //指定输出打包后的目录和文件会自动创建
    //以上可以写成如下的形式
    entry:{
       main:'./src/index.js'
    },
    output:{
        path:path.resolve('./dist'),//绝对路径
        //filename:'bundle.js' //指定打包后的文件名 一般为了好的体验这里通常采用另一种操作
        //发布新版本，发现用户正在浏览老网页 需要刷新一次才能看新版 
        // 发新版时候 会把老目录全部删除 然后覆盖最新文件上去 
        // 增量覆盖
        filename:"[name].[hash:12].js"
    },
    resolveLoader:{
        modules:[path.resolve('./src/loader'),path.resolve("./node_modules")]
    },
    //配置其他文件的打包规则
    module:{
        rules:[
            {
                test:/\.js$/,
                //自己写的loader添加到打包规则里，js在加载时都要先走这个规则，可以使用绝对路径
                //use:[path.resolve('./loader/myloader.js')]
                //或者使用一下方式 但是要配置resolveLoader中自己写的loader的路径地址
                use:['myloader']
            },
            {
                test:/\.css$/,//对css问价进行打包配置
                loader:['style-loader','css-loader'] //引入对css文件处理的加载器
            },
            {
                test:/\.(jpg|jpeg|png|svg|gif|woff)$/,
                //use:['file-loader']
                //对于某些体积较小的图片可以直接将其加入到html里面不必再打包到dist文件夹下
                use:['url-loader?limit=40000']
            },{
                test:/\.less$/,
                loader:['style-loader','css-loader','less-loader']
            },{
                test:/\.vue$/,
                loader:['vue-loader']
            }
        ]
    },
    plugins:[
        /*
         1.读取模板内容 2.得到产出文件 3.将产出文件作为script标签插入到html标签中 4.将html写入指定目录
        */
       new HtmlCreate({
           template:'./src/index.html',//将src目录下面的index.html当成html模板
           filename:'index.html',//产出文件的名字 自己设置一般设置为index.html
           //去除引入文件的双引号以便节省空间压缩体积
           minify:{
               removeAttributeQuotes:true
           }
       }),
        // 请确保引入这个插件！//vue打包用
        new VueLoaderPlugin()
    ]
}

以上便是手动做的一个webpack的配置，比较繁琐，所以在去创建vue项目的时候一般会使用vue的脚手架工具，脚手架工具对这些内容都做了配置，这会大大加快项目开发的效率。