webpack 是一个现代 JavaScript 应用程序的模块打包器(module bundler)。

当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，

其中包含应用程序需要的每个模块，然后将所有这些模块打包成少量的 bundle - 通常只有一个，由浏览器加载。

它通常适用于单页面SPA应用，通常以一个js文件为入口文件，在入口文件中引入其它css和js文件，最后把入口文件和其引入的文件，打包成为一个js出口文件。

-------- Lesson1 入口文件和出口文件 --------初始化项目:npm init -y安装webpack:cnpm install webpack --save-dev新建webpack的配置文件webpack.config.js :单个入口/出口文件时的配置实例：const path = require("path");module.exports = {entry : {one : "./src/assets/js/build.js"},output : {path : path.resolve(__dirname, "dist"),filename : "output.js"},module : {},plugins : [],devServer : {}};多个入口/出口文件时的配置实例：const path = require("path");module.exports = {entry : {one : "./src/assets/js/one.js",two : "./src/assets/js/two.js"},output : {path : path.resolve(__dirname, "dist"),filename : "[name].js"},module : {},plugins : [],devServer : {}};注意项目文件夹结构：源代码：srcassetscssimagesjsbuild.jstool.jsindex.html目标代码：(webpack压缩处理后供页面引用的代码)dist注意模块化js的写法：---build.js文件内容---：var sayHi = require("./tool").sayHi;document.getElementById("title").innerHTML = "Hi webpack!";setTimeout(function () { sayHi(); },1000);---tool.js文件内容---：module.exports = {sayHi : function (a,b) {alert("Hi,你好呀！");}};在终端中执行命令 webpack，则打包完成。-------- Lesson2 webpack-dev-server --------webpack-dev-server默认已经安装在webpack内，用于开发中实时刷新页面在webpack.config.js中配置devServer和publicPath:const path = require("path");module.exports = {entry : {one : "./src/assets/js/build.js"},output : {path : path.resolve(__dirname, "dist"),filename : "output.js",publicPath : "/temp/"},module : {},plugins : [],devServer : {contentBase : path.resolve(__dirname, "./"),host : "localhost",compress : true, //compress html5port :9000}};把index.html中引用的js路径改为："temp/output.js"在终端中执行命令 webpack-dev-server修改被打包的js文件如build.js文件，保存，则页面自动刷新。在package.json中创建命令执行的快捷方式：..."scripts": {"server": "webpack-dev-server","build" : "webpack"},...则终端中可以直接输入 npm run server 或 npm run build 执行命令。-------- Lesson3 把css文件和小图片也打包到js文件中 --------可以把多个css文件和小图片打包到js文件，以减少http请求安装：npm install --save-dev style-loader  css-loadernpm install --save-dev file-loader  url-loader配置webpack.config.js中的module:...module : {rules: [{test: /\.css$/,use: [{ loader: "style-loader" },{ loader: "css-loader" }]},{test: /\.(png|jpg|gif)$/,use: [{loader: 'url-loader',options: {limit: 20000 //图片小于20kb则转成base64打包入js文件}}]}]}...在build.js中引入html.index要使用的css文件:import css from "../css/index.css";执行命令webpack，查看output.js，可以看到css文件和小图片都被打包进来了。-------- Lesson4 5 js压缩与html发布 --------uglifyjs-webpack-plugin用于打包时压缩js
安装:npm install --save-dev uglifyjs-webpack-plugin配置webpack.config.js:const uglifyJsPlugin = require("uglifyjs-webpack-plugin");...plugins : [new uglifyJsPlugin()]...
执行命令webpack,发现output.js是被压缩了的。html-webpack-plugin用于发布index.html到出口文件夹
安装：npm install html-webpack-plugin --save-dev配置webpack.config.js:const htmlWebpackPlugin = require("html-webpack-plugin");...plugins : [new htmlWebpackPlugin({minify : {removeAttributeNode : true},hash : true,template : "./src/assets/index.html",title : "Hi Webpack",projectPath : "http://localhost:9000/src/" //方便以后替换页面中所有图片的url})]...注意：这个的使用存在问题，hash:true并没有生效同时，运行webpack-dev-server报错 ERROR in output.js from UglifyJsUnexpected token: name (urlParts) [output.js:3694,4]原因是：在plugins中使用uglifyJsPlugin就会出现该错误解决：目前不知到如何解决-------- Lesson6 把css从js中分离出来 --------把css文件单独打包，不和js混合在一起安装:npm install --save-dev extract-text-webpack-plugin使用：
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {module: {rules: [{test: /\.css$/,use: ExtractTextPlugin.extract({fallback: "style-loader",use: "css-loader"})}]},plugins: [new ExtractTextPlugin("styles.css"),]
}执行webpack命令，看到css文件被分离出来了。-------- Lesson7 js图片处理技巧 --------
...{test: /\.(png|jpg|gif)$/,use: [{loader: 'url-loader',options: {limit: 100 //图片小于20kb则转成base64打包入js文件,outputPath:"assets/images/" //图片打包后的存放路径,name:"[hash].[ext]" //[name]图片保持原名 [hash]重命名,publicPath:"http://cdn.qianduangongcheng.com/" //如果使用cdn 设置图片打包路径前缀}}]}
...js中如果使用图片：var imgUrl = require("./assets/images/qq.jpg");var imgHtml = '<img src="'+ imgUrl +'" />';-------- Lesson8 html中的图片处理 --------webpack不建议在html中直接使用<img>标签如果非要使用，则打包时需要：html-withimg-loader安装：npm install html-withimg-loader --save-dev使用：在rules中配置{test: /\.(htm|html)$/i,use: ['html-withimg-loader']}执行webpack命令，则发现html中的图片也被打包了。开发中常常会按照功能分模块多人并行开发，通常一个模块一个文件夹。-------- Lesson9 json数据加载 --------webpack3中不再必须babel了js文件中引入json文件：
const json = require("./json.json");
document.getElementById("json").innerHTML = json.name;webpack热加载：
new webpack.HotModuleReplacementPlugin()-------- Lesson10 生产环境和开发环境设置 --------npm的三种安装方式npm install jquery 不提倡npm install jquery --save  生产环境需要的模块npm install jquery --save-dev 开发环境需要的模块npm install 安装指向devDependenciesnpm install --production  安装指向dependencies设置webpack.config.json://windows"scripts": {"ser": "webpack-dev-server","div": "set aaa=dev&webpack","build":"set aaa=build&webpack"},//mac linux"scripts": {"ser": "webpack-dev-server","dev": "export aaa=dev&&webpack", //两个&&表示设置全局化 &只能在当前跑"build":"export aaa=build&webpack"},npm run dev    跑开发环境npm run build  跑生产环境-------- Lesson11 webpack模块化写法总结 --------老牌模块化 amd require
cmd define新建文件add.js:function add(a,b) {return a+b;}module.exports = add;在build.js中使用：import aaaa from "./add.js";console.log( aaaa(1,2));模块化方式设置webpack的配置：项目跟目录下新建文件夹webpack-config其下建立文件entry.js,内容：const entry = {};entry.dev = {one : "./src/assets/js/build.js"};entry.build ={one : "./src/assets/js/build.js"};module.exports = entry;在webpack.config.js中使用：const entry = require("./webpack-config/entry.js");module.exports = {entry : entry.dev,...-------- Lesson12 打包第三方模块 --------vue和angular都有自己单独的一套cli 其中已经建立了webpack
react可以单独来个webpack两种姿势：1）引用了就打包先安装:npm install jquery --save在需要的每个js文件中使用:import $ from 'jquery';$("#div1").html("hello!");2）引用了并且使用了才打包在整个webpack环境中使用jquery:设置webpack.config.js中的plugins：plugins : [new webpack.ProvidePlugin({  //引入模块$ : "jquery","jQuery" : "jquery"})...-------- Lesson13 watch的应用场景 --------当后台接口也跑起来了，前端就不能webpack-dev-server单独跑一个端口号了
应该跑整个项目，这时还要自动刷新配置webpack.config.json：watchOptions:{poll : 1000,aggregeateTimeout : 500,  //0.5signored : /node_modules/,}module.exports = {output : {hotUpdateChunkFilename: "./hot-update.js",hotUpdateMainFilename: "./hot-update.json"}}webpack --watch 可以检测是否入口文件会有改动再执行webpack --watch 则可以监测文件改动自动刷新-------- Lesson14 使用plug独立公共模块 --------给js减肥把jquery作为第三方单独来引用module.exports = {entry : {build: "./src/assets/js/build.js",jquery : "jquery"}}...plugins : [//指示entry中的jquery单独打包new webpack.optimize.CommonsChunkPlugin({name : "jquery",filename : "assets/js/jquery.min.js",miniChunks:2})]...执行webpack发现，jquery被单独打包了。安装vue：cnpm install vue --save-------- Lesson15 公共资源发布&结束语 --------通过webpack把静态资源发布到��️指定目录中
cnpm install --save-dev copy-webpack-plugin设置webpack.config.js文件：const copyWebpackPlugin = require("copy-webpack-plugin");plugins : [new copyWebpackPlugin([{from : __dirname + "/src/public",to : "./public"}])]webpack.config.js文件的target属性：module.exports = {target : "web",  //web默认 / node-以项目模块的方式打包...