webpack 安装步骤

1. 安装nodejs

2. 全局安装 webpack

npm install -g webpack

2. 初始化项目

npm init --yes

目录结构

3. 安装webpack-dev-server

npm install webpack-dev-server --save-dev
npm install webpack --save-dev

4. 安装 loader

npm install css-loader style-loader --save-dev
npm install less less-loader --save-dev
npm install babel-core babel-loader babel-preset-es2015 --save-dev

5. package.json

{
  "name": "es6",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "pack": "webpack",
    "dev": "webpack-dev-server --hot --inline"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.24.1",
    "babel-loader": "^7.0.0",
    "babel-preset-es2015": "^6.24.1",
    "css-loader": "^0.28.4",
    "less": "^2.7.2",
    "less-loader": "^4.0.4",
    "style-loader": "^0.18.1",
    "webpack": "^2.6.1",
    "webpack-dev-server": "^2.4.5"
  }
}

6. webpack.config.js

image.png

7. main.js

image.png

8. cats.js

image.png

9. modules.js

image.png

10. less/base.less

image.png

11. style/index.css

image.png

12. index.html

image.png