webpack

模块

commonjs cmd规范
ADM规范 requirejs

包管理器

npm

打包工具

browserify
webpack

解决发布静态资源打包发布上线 模块引入

安装

npm install webpack@3.12.0 -D
npm install -g webpack

webpack -v
One CLI for webpack must be installed. These are recommended choices, delivered as separate packages:

• webpack-cli (https://github.com/webpack/webpack-cli)
  The original webpack full-featured CLI.
  We will use “npm” to install the CLI via “npm install -D”.
  Do you want to install ‘webpack-cli’ (yes/no): yes
  Installing ‘webpack-cli’ (running ‘npm install -D webpack-cli’)…

全局安装
npm install webpack-cli -g

webpack -v
4.26.0

创建项目前准备

cd demo1
初始化
npm init
一路回车

得到
package.json 主要是显示这个项目的名称、版本、作者、协议

创建项目前准备 集成webpack

npm install --save-dev webpack

{
“name”: “demo1”,
“version”: “1.0.0”,
“description”: “”,
“main”: “index.js”,
“scripts”: {
“test”: “echo “Error: no test specified” && exit 1”
},
“author”: “”,
“license”: “ISC”,
“devDependencies”: {
“webpack”: “^4.26.0”
}
}
说明项目依赖于 webpack 这个工具

多出目录node_modules 是webpack库的源代码

创建项目文件

cd src
vi hi.js
console.log(‘hello world’);
webpack ./src/hi.js ./dist/hi.bundle.js

报错

module.js:471
    throw err;
    ^

Error: Cannot find module 'webpack'

解决
安装
npm install --save-dev webpack-dev-server

实施转化
webpack --watch ./src/hi.js ./dist/hi.bundle.js