webpack学习之路

webpack入门

为什么要用webpack？因为编辑器无法识别less等文件类型。
通过index.js的入口将：chunk
less->css
jquery->js
最后形成bundle

npm的使用

打开终端->npm init->
package name: (vue3study) webpack_test
(其余的默认就好，或根据需求做出改变。一直按回车键)
->npm i jquery
->npm i webpack webpack-cli-g全局安装
->npm i webpack webpack-cli-D本地安装

什么是webpack

webpack：静态资源打包器
Webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。
在 Webpack看来,前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理。它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。

webpack的几个核心

1. Entry
   入口(Entry)指示 Webpack以哪个文件为入口起点开始打包,分析构建内部依赖图。
2. Output
   输出(Output)指示 Webpack 打包后的资源bundles 输出到哪里去，以及如何命名。
3. Loader
   Loader让 Webpack能够去处理那些非JavaScript文件(webpack自身只理解JavaScript)
4. Plugins
   插件(Plugins)可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等。
5. mode

选项	描述	特点
development	会将process.env.NODE_ENV的值设为development 。启用NamedChunksPlugin 和 NamedModulesPlugin。	能让代码本地调试运行的环境
production	会将process.env.NODE_ENV 的值设为production。启用FlagDependencyUsagePlugin,FlagIncludedChunksPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin和uglifyJsPlugin.	能让代码优化上线运行的环境

开启运行脚本

browserify : 无法加载文件 C:\Users\86136\AppData\Roaming\npm\browserify.ps1，因为在此系统上禁止运行脚本。有关详细信息，
请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。
所在位置 行:1 字符: 1

今天在打包模块时候出现这种问题，原因是需要开启允许禁止脚本运行。
原因是： 首次在计算机上启动 Windows PowerShell 时，现用执行策略很可能是 Restricted（默认设置）。Restricted 策略不允许任何脚本运行。
那么就需要收到开启运行脚本：

win+x 打开PowerShell（管理员）
set-ExecutionPolicy RemoteSigned //设置为打开

键入Y或者A,同意
执行get-executionpolicy查看是否更改成功，为RemoteSigned表示成功

webpack能做什么

webpack能处理js/json资源，不能处理css/img等其他资源
生产环境和开发环境将ES6模块化编译成浏览器能识别的模块化~
生产环境比开发环境多一个压缩js代码。
webpack --entry ./src/index.js -o ./build --mode=development