webpack学习之路

webpack学习之路

  • webpack入门
    • npm的使用
    • 什么是webpack
    • webpack的几个核心
    • 开启运行脚本
    • 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张图片

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 策略不允许任何脚本运行。
那么就需要收到开启运行脚本:
webpack学习之路_第2张图片

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

你可能感兴趣的:(webpack,学习,前端)