导图
简介
webpack 是代码编译工具,有入口、出口、loader 和插件。webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时,它会在内部构建一个依赖图(dependency graph),此依赖图对应映射到项目所需的每个模块,并生成一个或多个 bundle。
能做到事
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="./use.less" />
</head>
<body>
<div class="once"></div>
<script type="text/javascript" src="./dist/bund.js" charset="utf-8"></script>
</body>
</html>
import $ from "jquery"
$(".once").click(() => {
$('body').css("backgroundColor", "deeppink")
})
document.write("this is one")
window.a = function ccc(a) {
console.log(a);
}
window.a(1)
window.imgs = require("./img/BM.jpg")
当less需要改变成css时
当使用ES6语法import
当需要文件类型归类时
webpack可以帮你做到
当webpack讲所有资源引进来叫代码块chunk
叫打包
输出bundle
静态模块打包器
5个核心概念
Entry
入口(Enty)指示 Webpack以哪个文件构入口起点开始打包,分析构建内部依赖图
Output
输出( Output)指示 Webpack打包后的资源 bundles输出到哪里去,以及如何命名
Loader
Loader让 Webpack能够去处理那些非 Javascript文件 webpack自身只理解Javascript --翻译
Plugins
插件( Plugins)可以用于执行范围更广的任务。插件的范围包括,从打包优化和压缩,直到重新定义环境中的变量等
Mode
模式(Mode)指示 Webpack使用相应模式的配置。
development | production |
---|---|
会将process.env.NODE_ENV的值设为development.启用NamedChunksPlugin和NamedModulesPlugin | 会将 process.env.NODE_ENV的值设为production启用FlagDependencyUsagePlugin。FlagincludedChunksPlugin。ModuleConcarenationPlugin。NoEmitOnErrorsPlugin。OccurrenceOrderPlugin。SideEffectsFlagPlugin和UglifyJsPlugin |
能让代码本地调试运行的环境 | 能让代码优化上线的运行环境 |
结构目录以及测试代码
//index.js
/**
* webpack 入口起始文件
*
* 开发环境:webpack ./src/index.js -o ./build --mode=development
* webpack 会以./src/index.js为入口文件开始打包 至./build
* 整体打包环境 开发环境
*
* 生成环境:webpack ./src/index.js -o ./build --mode=production
*
* 2.结论
* a.webpack 能处理json文件 不能处理css、img资源
* b.生产环境比开发环境多了个压缩diamante
* c.生产环境和开发环境将ES6模块化编译成浏览器能识别的模块化
* */
import data from './data.json'
console.log(data)
// import './index.css'
function add(x, y) {
return x + y
}
console.log(add(1, 2))
//data.json
{
"data":"123"
}
//build/main.js
!function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=1)}([function(e){e.exports=JSON.parse('{"data":"123"}')},function(e,t,r){e.exports=r(2)},function(e,t,r){"use strict";r.r(t);var n=r(0);console.log(n),console.log(1+2)}]);