webpack 学习
<body>
<ul class="layerOne">
<li class=""><strong class="layerOneTitle">entry入口</strong></li>
<li><strong class="layerOneTitle">output出口</strong></li>
<li><strong class="layerOneTitle">loader</strong>
<ul>
<li>webpack自身只能理解JavaScript</li>
<li>loader可以将所有类型的文件转换为webpack能够处理的<strong style="color: orange;">有效模块</strong></li>
<li>转换后进而可以构建依赖图</li>
</ul>
</li>
<li><strong class="layerOneTitle">plugin</strong>
<ul>
<li>执行更广的任务</li>
<li>打包、优化、压缩...重新定义环境中的变量</li>
<li>require->添加到plugin数组->options/new(不同目的多次使用同一个插件)</li>
</ul>
</li>
<li><strong class="layerOneTitle">模式：model</strong>
<ul>
<li>添加 mode: 'development'/'production'</li>
</ul>
</li>
<li><strong class="layerOneTitle">拓展部分</strong>
<ul>
<li>webpack提供命令行接口（cli）</li>
<li>webpack各种命令
<ul>
<li class="codeTitle">--help
<ul>
<li>列出命令行所有配置命令</li>
<li class="codeRow">webpack --help / webpack -h </li>
</ul>
</li>
<li class="codeTitle">--config
<ul>
<li>为webpack指定一个其它的配置文件（默认为 webpack.config.js ）</li>
<li class="codeRow">webpack --config anotherConfigFile.js </li>
</ul>
</li>
<li class="codeTitle">--progress
<ul>
<li>在命令行控制台打印显示当前的打包进度</li>
<li class="codeRow">webpack --progress </li>
</ul>
</li>
<li class="codeTitle">--watch
<ul>
<li>实时监测依赖表里面的文件的变化，会迅速更新打包后的文件，否则通过缓存获取</li>
<li class="codeRow">webpack --watch / webpack -w </li>
</ul>
</li>
<li class="codeTitle">--colors
<ul>
<li>开启/关闭控制台的颜色</li>
<li class="codeRow">webpack --colors(webpack5.3 好像报错了) / webpack --color </li>
</ul>
</li>
<li class="codeTitle">--profile
<ul>
<li>记录过程中编译的性能</li>
<li class="codeRow">webpack --profile </li>
</ul>
</li>
</ul>
</li>
<li>
webpack-dev-server
<ul>
<li>安装：<strong>npm i webpack-dev-server -g</strong></li>
<li>运行： <strong>webpack-dev-server(相当于 webpack )</strong></li>
<li>它将在 localhost:8080 启动一个 express 静态资源 web 服务器</li>
<li>以监听模式自动运行 webpack</li>
<li>在浏览器打开 http://localhost:8080/ 或 http://localhost:8080/webpack-dev-server/ </li>
<li>可以浏览项目中的页面和编译后的资源输出</li>
<li>通过一个 socket.io 服务实时监听它们的变化并自动刷新页面</li>
</ul>
</li>
<li>通过package.json将常用命令制成脚本
<ul>
<li>package.json中的script字段指定运行脚本命令的npm 缩写</li>
<li>
<textarea name="code" id="" cols="60" rows="5">
"scripts": {
"w": "webpack --progress --colors --watch",
"p": "webpack -p",
"dev":"webpack-dev-server"
}
</textarea>
<ul>
<li>运行<strong class="highlight">npm run w</strong>时，相当于运行<strong class="highlight">webpack --progress --colors --watch</strong>，表示运行监视模式，使用彩色字符，并显示出打包的百分比过程</li>
<li>运行<strong class="highlight">npm run p</strong>时，相当于运行<strong class="highlight">webpack -p</strong>，表示压缩模块文件</li>
<li>运行<strong class="highlight">npm run dev</strong>时，相当于运行<strong class="highlight">webpack-dev-server</strong>，表示运行本地服务器</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>