npm--关联webpack、eslint、babel

1.刚开始新建一个项目，生成一个package.json

npm init

2. .-save和save-dev是安装本地项目模块，全局为-g

可以省掉你手动修改package.json文件的步骤。
spm install module-name -save 自动把模块和版本号添加到dependencies部分
spm install module-name -save-dev 自动把模块和版本号添加到devdependencies部分

3.某次配置webpack遇到的问题

首先是教程博客
https://www.jianshu.com/p/42e11515c10f
问题1：报错
解决：https://blog.csdn.net/hqbootstrap1/article/details/81034435
问题描述：在正式使用webpack环节，因为up主用的是3.x版本，我的是4.x，语法变了。
webpack app/main.js public/bundle.js 需要换成webpack app/main.js -o public/bundle.js（中间多了-o，语法更严格）

4.区别 dependencies、devDependencies

我们在执行 npm install 安装依赖时，通常都会将依赖的名称、版本要求写入 package.json 文件。

其中有两个命令行参数：

–save-prod 将依赖的名称、版本要求写入 dependencies（npm install --save也行）
–save-dev 将依赖的名称、版本要求写入 devDependencies
从命令行参数字面上，我们就能看出 dependencies、devDependencies 的区别：dependencies 表示我们要在生产环境下使用该依赖，devDependencies 则表示我们仅在开发环境使用该依赖。

举个例子，我要用 webpack 构建代码，所以在开发环节，它是必需的，但对普通用户来说，它是不必要的，所以安装 webpack 时，我要执行：
npm install webpack --save-dev || npm install webpack -D
而不是：
npm install webpack --save-prod || npm install webpack -S

5. npm init -y

create a package.json file
Generate it without having it ask any questions

6.用过的loader记录

1. url-loader
   优化原来的雪碧图方式，把小于limit的图片转变为base64编码放到js中，把大于limit以普通物理文件显示
   要起作用还要在webpack官网找到内容并且加入到webpack.config.js的rules中

2. file-loader
   默认情况下，生成的文件的文件名就是文件内容的 MD5 哈希值并会保留所引用资源的原始扩展名。
   不需要在webpack.config.js中的rules中加入webpack官网的内容
   “/public/path/0dcbbaa7013869e351f.png”

3. babel-loader 把es6 es7的代码做兼容化，适配不支持es6的浏览器（举例：es7语法 async await）
   babel-loader补充:当要babel jsx时，需要在webpack.config.js中引入相应的rules，并且要在presets后加一个属性plugins: [’@babel/plugin-transform-react-jsx’]，同时修改test: /\.js$/为test: /\.(js|jsx)$/。别忘记npm react和@babel/plugin-transform-react-jsx

7.package.config.json中的mode

mode: ‘development’ 开发模式
简化了 webpack --mode development index.js -o output_test_d.js，只需要webpack指令就行

mode: ‘production’ 生产模式
简化了webpack index.js -o output_test.js

8.npm list或者ls <包名字> 局部下查询 （查询全局加-g）