关于webpack的安装和使用

首先安装webpack，Github地址为：https://github.com/webpack/webpack

基本环境配置

运行以下指令，初始化项目：

npm init

以上安装一路回车即可，接下来安装全局和局部的webpack：
-g为全局安装，方便我们用命令行指令，
-D为在开发环境的安装

npm i -g webpack
npm i -D webpack

 

安装完毕执行webpack命令，webpack -v 查看webpack版本，也是检测webpack是否成功下载的方法，我这里下载的版本为4.19.1

另外初次下载webpack的小伙伴安装完webpack运行的时候会报一个webpack-cli错误，我百度查了一下原因，是说现在下载的新版本和旧版本稍微有些不同，之前的webpack-cli和webpack一起封装在webpack包里，现在分离出来了，所以运行webpack的时候需要再次下载webpack-cli才可以，这里我解决的办法就是在全局安装一个webpack-cli就完美解决问题了，还是用npm安装：

npm i -g webpack-cli

成功下载完成之后再次运行webpack就不会报错了。

接下来就可以书写项目了，先来个最简单的例子：

创建一个项目文件夹，文件夹命名为mm，文件夹下的几个必须的文件分别为

一个项目运行文件index.html,

一个入口文件app.js，

一个项目配置文件webpack.config.js,

一个出口文件夹，给出口文件夹命名为test

1、webpack入口文件叫webpack.config.js，也是用来定义配置的，定义的配置直接作为接口暴露

2、Entry属性：定义模块入口文件的

字符串：真实的入口文件地址

对象

Key 入口文件名称

Value 入口文件真实地址

3、Output属性：定义发布的文件的

Path：定义发布的目录的（还可以定义在filename属性中）

Filename：定义发布的文件的

如果entry属性值是字符串，

filename属性值就是文件发布的地址

如果entry属性值是一个对象

Filename属性值 路径[name].js

Name就是文件名称

var path = require('path');

module.exports = {
  entry: './app.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'test')
  }
}

最后在项目文件夹里运行webpack，就能在test文件夹下生成压缩打包好的bundle.js文件。