webpack工程化实践总结

涛哥最近研究webpack和vue也有一段时间了，写篇日志总结下：
使用淘宝的npm镜像安装

npm install -g cnpm --registry=https://registry.npm.taobao.org

1	npm install -g cnpm --registry=https://registry.npm.taobao.org

一、Npm常用操作

1、npm init -y
# 初始化npm生成package.json  -y是为了不让他提很多问题让我们回复。
2、npm i 包名称 
# 安装对应包名称的插件  i就是install的缩写
# 安装包的时候，对应的信息会写到package.json里面。当node_modeles被删除时，要找回来，可以根据这个json里面的信息，重新安装下载：
使用npm i命令，npm i后面什么都不加，表示把所有库重新安装。
3、npm uninstall 包名称
# 删除对应包名称依赖，对应插件会在node_modules内移除，package.json的dependencies内对应的依赖也会移除。
4、npm update 包名称
# 指定包更新到最新版，也可以指定版本号 如：npm update jquery@3.0.0
5、查看安装包的版本信息
# 比如npm info webpack
6、npm i -s与-d的区别
# npm i module_name -S 等同于 npm install module_name --save
# 写入package.json的 dependencies 对象中，用于生产环境
# npm i module_name -D 等同于 npm install module_name --save-dev
# 写入package.json的 devDependencies 对象中，用于开发环境

1、npm init -y

# 初始化npm生成package.json -y是为了不让他提很多问题让我们回复。

2、npm i 包名称

# 安装对应包名称的插件 i就是install的缩写

# 安装包的时候，对应的信息会写到package.json里面。当node_modeles被删除时，要找回来，可以根据这个json里面的信息，重新安装下载：

使用npm i命令，npm i后面什么都不加，表示把所有库重新安装。

3、npm uninstall 包名称

# 删除对应包名称依赖，对应插件会在node_modules内移除，package.json的dependencies内对应的依赖也会移除。

4、npm update 包名称

# 指定包更新到最新版，也可以指定版本号如：npm update jquery@3.0.0

5、查看安装包的版本信息

# 比如npm info webpack

6、npm i -s与-d的区别

# npm i module_name -S 等同于 npm install module_name --save

# 写入package.json的 dependencies 对象中，用于生产环境

# npm i module_name -D 等同于 npm install module_name --save-dev

# 写入package.json的 devDependencies 对象中，用于开发环境

二、初始化项目

# 创建目录并且进入
mkdir vue-project-name
# 初始化  生成package.json
npm init -y
# 安装 webpack 和 webpack-cli到开发依赖
npm i webpack --save-dev
npm i webpack-cli --save-dev
# 涛哥总结的一句话命令
mkdir vue-project-name && cd vue-project-name && npm init -y && npm i webpack webpack-cli -D

# 创建目录并且进入

mkdir vue-project-name

# 初始化生成package.json

npm init -y

# 安装 webpack 和 webpack-cli到开发依赖

npm i webpack --save-dev

npm i webpack-cli --save-dev

# 涛哥总结的一句话命令

mkdir vue-project-name && cd vue-project-name && npm init -y && npm i webpack webpack-cli -D

报错解决办法

报错一：NPM Error：gyp: No Xcode or CLT version detected!

# mac上报错解决办法
$ sudo rm -rf $(xcode-select -print-path)
$ xcode-select --install

# mac上报错解决办法

$ sudo rm -rf $(xcode-select -print-path)

$ xcode-select --install

报错二：TypeError: CleanWebpackPlugin is not a constructor

# 正确的写法
const {CleanWebpackPlugin} = require('clean-webpack-plugin');

output: {
    path: path.resolve(__dirname, '../dist'),
    filename: '[name].[hash].js'
}

plugins: [
    new CleanWebpackPlugin(),
]