NPM包管理工具、webpack模块打包器体验

一、NPM包管理工具

1.1 认识NPM

1. npm：全称Node Package Manage。
2. 是node.js默认的以Javascript编写的软件包管理软件。
3. 官网：https://www.npmjs.com

1.2 安装NPM

1. 安装网址：http://nodejs.cn/
2. 注意：命令输入用管理员身份打开终端（CMD）。

1.3 使用NPM

1. 在终端使用命令
2. 常用命令：
   1. npm install npm@5.9.1 （用@指定版本号）
   2. npm initall -y (会生成npm配置文件：package.json)
   3. npm run test (运行配置文件中的test对象)
   4. • dependencies:运行时依赖。某些模块在部署后是不需要的。命令-S（全写-save）
      • devDependencies:开发时依赖。命令-D（全写-save-dev）
   5. 加-g 在全部项目中使用，不加只在该项目下使用
      

1.4 yarn是什么？

作用：yarn是弥补npm不足而开发的。

1. yarn官网：http://yarnpkg.com
2. 用npm装yarn,命令：npm install -g yarn

总结：NPM安装流程总结

1. 到nodejs.cn下载安装；
2. 到npmjs.com查询软件；
3. 安全完成后用管理终端运行（有错误可尝试重启，并在“更新和安全”-“开发者模式”中打开开发人员模式。
4. 初始化npm命令：npm init -y
5. 安装完成

二、webpack模块打包器

作用：把该去除代码去除，该压缩的代码压缩。

2.1 webpack基础

1. chunk：被打包的模块文件
2. bundle：多个chunk组合
3. 安装webpack：
   • npm init -y
   • npm i webpack webpack-cli webpack -dev-server -D
4. 打包程序
   • 开发环境用：webpack —mode development
   • 运行环境用：webpack —mode production
5. 测试：用node命令运行

技巧：webstorm软件格式化代码：Ctrl+Alt+L。

2.2 webpack.config.js核心文件

作用：指示webpack怎么干活。

1. 五个核心概念

    // 核心概念1：入口（entry）指示webpack以哪个文件作为入口起点开始打包，分析构建内部依赖图。
    entry: "",
    // 核心概念2：输出（output）指示webpack打包后的资源 bundles 输出到哪里，以及如何命名。
    output: "",
    // 核心概念3:loader让webpack能够去处理那些非JavaScript资源css、img等，将它们处理成webpack能够识别的资源，可以理解成一个翻译过程（webpack自身只能理解js和json）。
    module: {},
    // 核心概念4：插件（plugins）可用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等。
    plugins: [],
    /*核心概念5：模式（mode）指示webpack使用相应模式的配置。
      开发模式（development）：配置比较简单，能让代码本地调试运行的环境。
      生产模式（production）：代码需要不断优化达到性能最好。能让代码优化上线运行的环境。
      都会自动启用一些插件，生产模式使用插件更多*/
    mode: '',
   }

   2.示例

// 1. String ：单入口， 打包成一个chunk,输出一个bundle文件，chunk的名称为默认。
    entry:'./src/index.js',
// 2. Array ： 多入口， 写多个入口，所有入口文件形成一个chunk(名称默认), 输出只有一个bundle, chunk名称默认
    entry: ["./src/two.js",'./src/index.js'],
// 3. Object: 多入口， 有几个入口文件就生成几个chunk， 并输出几个bundle文件， chunk的名称是key
    entry: {
       two: "./src/two.js",
        index:'./src/index.js'
    },
// 4. 特殊用法：
     entry: {
        // 数组中所有入口文件生成一个chunk, 输出一个bundle文件， chunk的名称是key
        onetwo: ["./src/one.js","./src/two.js"],
        // 形成一个chunk, 输出一个bundle文件
         index:'./src/index.js'
     },
      // 输出

output: {
filename: “[name].js”,//第三种方法使用
path:resolve(__dirname, ‘build’)
},

```

2.6 webpack打包html资源

1. 插件处理，在plugins中设置。步骤：
   • 1.下载插件：npm i html-webpack-plugin -D
   • 2.导入插件：const HtmlWebpackPlugin = require(‘html-webpack-plugin’);
   • 3.使用插件：
     plugins: [new HtmlWebpackPlugin({template: “./src/index.html”,
     filename:”index_1.html”
     })],

2.7 webpack打包CSS

1. 需要使用npm下载安装两个loader帮我们完成打包
   1. css-loader 的作用是处理css中的 @import 和 url 这样的外部资源；先处理放入js主入口中。
   2. style-loader 的作用是把样式插入到 DOM中，方法是在head中插入一个style标签，并把样式写入到这个标签的 innerHTML里
2. 安装方法
   • npm install css-loader style-loader -D
3. 放入module中

2.8 启动devServer服务器

1. 下载webpack-dev-server包
2. 启动devServer指令为: npx webpack serve 本目录执行
3. webpack无法刷新，解决：添加配置：target: ‘web’