webpack学习记录

webpack-dev-server指令

--open

自动打开浏览器

--port value

修改端口

--contentBase path

加载目标文件

--hot

异步响应

package.json 

{

  "name": "webpage-study",

  "version": "1.0.0",

  "description": "",

  "main": "index.js",

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1",

    "dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"

  },

  "author": "",

  "license": "ISC",

  "dependencies": {

    "html-webpack-plugin": "^5.2.0",

    "jquery": "^3.5.1",

    "webpack": "^5.24.2"

  },

  "devDependencies": {

    "webpack": "^5.24.2",

    "webpack-cli": "^3.3.12",

    "webpack-dev-server": "^3.11.0"

  }

}

 

webpack需要安装的相关配置

html-webpack-plugin：热部署插件

npm i webpack html-webpack-plugin --save

npm i webpack-cli@3.3.12 -D

npm i webpack-dev-server --save

CSS语法

npm i style-loader css-loader -D

npm i less-loader less -D

npm i sass-loader node-sass -D

ES6语法

npm i babel-loader@7 -D

npm i babel-core babel-loader babel-plugin-transform-runtime -D

npm i babel-preset-env babel-preset-stage-0 -D

类型语法

npm i url url-loader -D

Vue

npm i vue vue-router -S

npm i vue-loader vue-template-compiler -D

npm i style-loader css-loader -D