webpack基础

1. npm init -y

生成package.json

1. 全局安装(安装路径 C:\Users\13213\AppData\Roaming\npm)

npm i webpack -g

npm install webpack-cli -g

1. 项目安装

npm i webpack --save-dev

npm i webpack-cli --save-dev

 

1. 热加载工具安装

npm i webpack-dev-server -D

在package.json文件中配置：

"dev": "webpack-dev-server --open"    运行npm run dev 会自动打开浏览器

"dev": "webpack-dev-server --open --port 3000"   运行npm run dev 会自动打开浏览器，此时的端口号为3000

1. 安装html打包插件，并在在webpack.config.js中配置

npm i html-webpack-plugin -D

1. 第三方可选项loader插件安装(安装的话需在对应webpack.config.js配置)

npm i style-loader css-loader -D

npm i less-loader -D

npm i less -D

npm i sass-loader -D

npm i url-loader file-loader -D

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

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

 

vue项目需要额外安装

1. cnpm i vue -S
2. cnpm i vue-router -S
3. cnpm i vue-loader vue-template-compiler -D
4. cnpm i style-loader css-loader -D

 

 

1. npm -i 与npm install -s与-d的区别

npm i module_name  -S  = >  npm install module_name --save    写入到 dependencies 对象

npm i module_name  -D  => npm install module_name --save-dev   写入到 devDependencies 对象

npm i module_name  -g  全局安装

  i 是install 的简写

-S就是--save的简写

-D就是--save-dev 这样安装的包的名称及版本号就会存在package.json的devDependencies这个里面，而--save会将包的名称及版本号放在dependencies里面。

我们在使用npm install 安装模块或插件的时候，有两种命令把他们写入到 package.json 文件里面去，比如：

--save-dev

--save

在 package.json 文件里面提现出来的区别就是，使用 --save-dev 安装的 插件，被写入到 devDependencies 对象里面去，而使用 --save 安装的插件，则被写入到 dependencies 对象里面去。

那 package.json 文件里面的 devDependencies  和 dependencies 对象有什么区别呢？

devDependencies  里面的插件只用于开发环境，不用于生产环境，而 dependencies  是需要发布到生产环境的。