Npm和webpack的初始化

npm的初始化

thinkpad@DESKTOP-LN2H42N MINGW64 ~/mmall/doc/mmall-fe/src (mmall_v1.0)
$ cd ~

thinkpad@DESKTOP-LN2H42N MINGW64 ~
$ cd mmall/doc/mmall-fe/

thinkpad@DESKTOP-LN2H42N MINGW64 ~/mmall/doc/mmall-fe (mmall_v1.0)
$ ls
README.md  src/

thinkpad@DESKTOP-LN2H42N MINGW64 ~/mmall/doc/mmall-fe (mmall_v1.0)
$  npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (mmall-fe)
version: (1.0.0)
description: mmall前端代码
entry point: (index.js)
test command:
git repository: (git@gitee.com:happymmall_shangzhi/mmall_fe.git)
keywords:
author: maxin
license: (ISC)
About to write to C:\Users\thinkpad\mmall\doc\mmall-fe\package.json:

{
  "name": "mmall-fe",
  "version": "1.0.0",
  "description": "mmall前端代码",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git@gitee.com:happymmall_shangzhi/mmall_fe.git"
  },
  "author": "maxin",
  "license": "ISC"
}


Is this OK? (yes) yes

thinkpad@DESKTOP-LN2H42N MINGW64 ~/mmall/doc/mmall-fe (mmall_v1.0)
$ ls
package.json  README.md  src/

thinkpad@DESKTOP-LN2H42N MINGW64 ~/mmall/doc/mmall-fe (mmall_v1.0)
$ cat package.json
{
  "name": "mmall-fe",
  "version": "1.0.0",
  "description": "mmall前端代码",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git@gitee.com:happymmall_shangzhi/mmall_fe.git"
  },
  "author": "maxin",
  "license": "ISC"
}

thinkpad@DESKTOP-LN2H42N MINGW64 ~/mmall/doc/mmall-fe (mmall_v1.0)
$

webpack的初始化

npm install webpack@1.15.0 --save-dev -g

$ npm install webpack@1.15.0 --save-dev -g
C:\Users\thinkpad\AppData\Roaming\npm\webpack -> C:\Users\thinkpad\AppData\Roaming\npm\node_modules\webpack\bin\webpack.js
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\webpack\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ webpack@1.15.0
added 258 packages from 248 contributors in 51.548s

npm install webpack@1.15.0 --save-dev

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ webpack@1.15.0
added 258 packages from 248 contributors and audited 1208 packages in 50.543s
found 0 vulnerabilities

thinkpad@DESKTOP-LN2H42N MINGW64 ~/mmall/doc/mmall-fe (mmall_v1.0)
$ ls
node_modules/  package.json  package-lock.json  README.md  src/
thinkpad@DESKTOP-LN2H42N MINGW64 ~/mmall/doc/mmall-fe (mmall_v1.0)
$ webpack -v
webpack 1.15.0
Usage: https://webpack.github.io/docs/cli.html

Options:
  --help, -h, -?                                                                
  --config                                                                      
  --context                                                                     
  --entry                                                                       
  --module-bind                                                                 
  --module-bind-post                                                            
  --module-bind-pre                                                             
  --output-path                                                                 
  --output-file                                                                 
  --output-chunk-file                                                           
  --output-named-chunk-file                                                     
  --output-source-map-file                                                      
  --output-public-path                                                          
  --output-jsonp-function                                                       
  --output-pathinfo                                                             
  --output-library                                                              
  --output-library-target                                                       
  --records-input-path                                                          
  --records-output-path                                                         
  --records-path                                                                
  --define                                                                      
  --target                                                                      
  --cache                                                                                           [default: true]
  --watch, -w                                                                   
  --watch which closes when stdin ends                                          
  --watch-aggregate-timeout                                                     
  --watch-poll                                                                  
  --hot                                                                         
  --debug                                                                       
  --devtool                                                                     
  --progress                                                                    
  --resolve-alias                                                               
  --resolve-loader-alias                                                        
  --optimize-max-chunks                                                         
  --optimize-min-chunk-size                                                     
  --optimize-minimize                                                           
  --optimize-occurence-order                                                    
  --optimize-dedupe                                                             
  --prefetch                                                                    
  --provide                                                                     
  --labeled-modules                                                             
  --plugin                                                                      
  --bail                                                                        
  --profile                                                                     
  -d                                    shortcut for --debug --devtool sourcemap --output-pathinfo
  -p                                    shortcut for --optimize-minimize        
  --json, -j                                                                    
  --colors, -c                                                                  
  --sort-modules-by                                                             
  --sort-chunks-by                                                              
  --sort-assets-by                                                              
  --hide-modules                                                                
  --display-exclude                                                             
  --display-modules                                                             
  --display-chunks                                                              
  --display-error-details                                                       
  --display-origins                                                             
  --display-cached                                                              
  --display-cached-assets                                                       
  --display-reasons, --verbose, -v                                              

Output filename not configured.

thinkpad@DESKTOP-LN2H42N MINGW64 ~/mmall/doc/mmall-fe (mmall_v1.0)
$ cat package.json
{
  "name": "mmall-fe",
  "version": "1.0.0",
  "description": "mmall",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git@gitee.com:happymmall_shangzhi/mmall_fe.git"
  },
  "author": "maxin",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^1.15.0"
  }
}

webpack的删除

删除全局webpack-cli

webpack4.x开始官方文档是说要安装cli所以如果的在用4.+就需要卸载cli

npm uninstall -g webpack-cli

# 注释给我这种小白提供参考
# 卸载 uninstall  可以简写成 un  
# 全局 -g 的完整写法是 --global
# 现在问题来了这样真的卸载了webpack-cli吗？
# 答案是没有。到现在为止我还没有发现那个webpack-cli是全局安装的，至少官方文档没看到。
# 那就看下面怎么删除局部webpack-cli

删除本地（局部）webpack-cli

npm uninstall webpack-cli
# 仔细看你会发现去掉全局参数 -g
# 这时候你的命令行会快速滚动一些删除信息。
# webpack-cli删除成功

删除全局webpack

npm uninstall -g webpack
# 这个注释还是给小白看的
# 为什么要局部全局删除webpack
# 因为你可能在安装webpack时不确定自己是全局安装
# 还是本地安装，所以建议先执行全局删除命令
# 然后在执行下面的本地删除命令

删除本地webpack

npm un webpack

# 这时候小白的webpack是删除完成了
# 还没完看下面怎么说

检查webpack残余文件

ls

# 用ls命令查看一下是否有这几个文件
# node_modules
# package-lock.json
#  package.json
# 有是最好的，如果没有那你可能还没找到自己本地安装webpack的准确位置
# 有时候我也找不到了
# 现在说有的事

rm -rf node_modules package-lock.json package.json

# 上面这行命令是删除这些文件的意思
# 同学你的webpack 彻底删除干净了
# 但是小白一定要好好去了解一下 rm 和 rm -rf 的区别，在这里我不科普怕说错。

npm再重新初始化一下

npm init

webpack试运行

用sumblime 打开mmall-fe

在src/page下新建文件夹index,在index下新建文件index.js

内容如下：

 cats =require('./cats.js');
console.log(cats);

在src/page/index下新建文件cats.js:

var cats = ['dev','herry','martna']
module.exports =cats;

命令行方法

执行命令：webpack ./src/page/index/index.js ./dist/app.js

thinkpad@DESKTOP-LN2H42N MINGW64 ~/mmall/doc/mmall-fe (mmall_v1.0)
$ webpack ./src/page/index/index.js ./dist/app.js
Hash: 2b35b0c8b165d34b1d7d
Version: webpack 1.15.0
Time: 49ms
 Asset     Size  Chunks             Chunk Names
app.js  1.53 kB       0  [emitted]  main
   [0] ./src/page/index/index.js 47 bytes {0} [built]
   [1] ./src/page/index/cats.js 9 bytes {0} [built]

这时在dist文件夹下就生成了app.js文件

配置文件方法

在项目根目录下新建文件webpack.config.js:

module.exports = {
    entry: "./src/page/index/index.js",
    output: {
        path: './dist',
        filename: 'app.js'
    }
};

CMD中执行命令webpack