Webpack学习

课程目标

什么是webpack
webpack的安装
如何使用webpack来对文件进行翻译
搭建webpack环境
webpack打包项目时需要的配置文件

一、什么是webpack

webpack是一个模块打包工具，在早期webpack只是一个js的模块打包工具，webpack只认识import这样的语句，其他的高级的js语法一概不认，使用import引入组件的代码，这实际上是引入的是模块。

webpack可识别的模块规范：

CommonJS (Node里面的引入规范)
CMD ADM
ES Moudule模块引入规范

二、webpack的安装步骤

首先在项目目录中打开命令框，输入npm init 文件名 (初始化项目)

使用npm init命令的前提：是已安装过了node.js和npm 包管理工具

一路回车
最后一步为yes
npm install webpack-cli --save-dev
npm install webpack --save

三、如何使用webpack来对文件进行翻译

npx webpack index.js(要翻译的index.js文件名)
如果使用webpack翻译模版，要采用Es6模版的语法，要进行导出

四、搭建webpack环境

先下载npm 和node 高版本的，下载node课参考网站node,安装后缀LIS，使用node -V检测版本，npm -V检测版本
新建文件夹，在文件夹中打开命令框，输入npm init(生成了package.json的文件)，初始化项目
使用编辑器打开文件夹
配置package.json

{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "private":true,//私有项目
  
  "scripts": {
  <!--当我运行bundle，可以直接运行wepack，进行打包-->
  "bundle":"webpack"
  },
  "author": "GaoJiFeng",
  "license": "ISC"
}

安装webpack，分为全局安装，局部安装,固定版本的下载

(1).全局安装：

全局打开终端，输入npm install webpack webpack-cli -g
检测webpack的版本 webpack -v
卸载webpack ,npm uninstall webpack webpack-cli

弊端：webpack的版本号是固定的，版本不同不可以相互之间使用，使用webpack4.0的版本运行 webpack3.0的版本，会3.0的运行不起来，建议不适用。 webpack低版本的项目启动不了。

(2).项目内安装webpack

打开文件夹的命令框，输入npm install webpack webpack-cli -D
npx webpack -V,检测webpack的版本

优点：在不同的项目之间可以使用不同版本号的webpack。

五、webpack打包项目时需要的配置文件

在webpack.config.js中配置

    const path = require('path')
    module.exorts ={
            mode:'production',//打包时不会出现警告
            entry:"./src/index.js",//项目打包的入口文件
            output:{//输出
                filename:"bundle.js",
                path:path.resolve(__dirname,'dist')//打包的目录
            }
    }
在package.json文件中的script中配置一下，
<!--改变打包的命令-->
"script":{
    "bundle":"webpack"//代表的是打包的是时候使用npm run bundle命令进行打包
}

在index.html中引入bundle.js文件

npm run bundle ,打包

总结：

npm info webpack：查看webpack历史版本号
npm install webpack@4.16.5 webpack-cli -D：下载固定的版本
npm install webpack webpack-cli -g：全局安装webpack 和webpack-cli
npx webpack -v查看版本号（npx在当前文件夹内查看）
npm install webpack webpack-cli -D:在项目中进行下载
pm uninstall webpack webpack-cli -g：全局卸载webpack和weback-cli

Webpack 01之下载安装