webpack

 

功能，打包，个人理解：将不通用的模块/文件，压缩打包到一个文件中，并且使其能够执行。由不能执行->能执行的过程。

Uncaught SyntaxError SyntaxError: Cannot use import statement outside a module
    at (program) (/Users/zhang/repo/1st-project/src/index.js:1:1)

webpack mode有两种：development和product，在development mode下，main.js不会被压缩，在product模式下会被压缩。同时打包时间会变长。开发过程中用development，上线阶段用product。

默认的打包入口：src/index.js

默认的打包出口：dist/main.js

可以在webpack.config.js中修改以上打包的默认路径，通过entry节点指定打包入口，通过outpu节点指定打包的出口。

安装jquery, 会被写入packa.json中的dependencies

sudo nom install jquery -S //-S = --save

在MAC上安装webpack

检查webpack版本

webpack -v

安装webpack

sudo npm install webpack -g --unsafe-perm=true --allow-root
sudo npm install webpack-cli -g --unsafe-perm=true --allow-root

配置完webpack之后，

1. 新建webpack.config.js

module.experts = {
  //代表webpack运行的模式，两个可选值‘development'和'product'
  mode: 'development'
} 

将webpack加入package.json的scripts中，添加一行, 然后运行npm指令

"dev": "webpack"

npm run dev

webpack将会完成打包

asset main.js 85.5 KiB [emitted] [minimized] (name: main) 1 related asset
runtime modules 663 bytes 3 modules
cacheable modules 279 KiB
  ./src/index.js 194 bytes [built] [code generated]
  ./node_modules/jquery/dist/jquery.js 278 KiB [built] [code generated]

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

该报错需要在package.json中更新, 解决该问题

"dev": "webpack --mode development"

asset main.js 319 KiB [emitted] (name: main)
runtime modules 937 bytes 4 modules
cacheable modules 279 KiB
  ./src/index.js 194 bytes [built] [code generated]
  ./node_modules/jquery/dist/jquery.js 278 KiB [built] [code generated]
webpack 5.88.2 compiled successfully in 352 ms

安装webpack-dev-server插件, 避免改了源代码之后没有执行dev导致页面不自动刷新的问题,不用每次都重新run

使用该插件生成的.js存在内存中，而不是硬盘中，所以需要将script中引用的路径改成存在内存中的文件的路径。生成的文件看不到，但是存在于内存中。

问题：jquery已经配置，但没有实现隔行换色效果

语法错误，li:odd冒号后面不能有空格。