记第一个使用webpack打包的文件~

因为一开始太乱了所以把所有的东西卸载重新安装再说!

一、删除 webpack 还有webpack-cli

删除全局webpack-cli(全局)

npm uninstall -g webpack-cli

删除webpack-cli（本地/局部）

npm uninstall webpack-cli

删除全局webpack

npm uninstall -g webpack

删除本地webpack

npm un webpack

卸载 uninstall 可以简写成 un,

全局 -g 的完整写法是 --global

二、安装 webpack

1、创建一个新的本地项目目录名为webpack-demo

mkdir webpack-demo

2、进入目录

cd webpack-demo

3、创建package.json文件(重点)

npm init -y

4、安装webpack

npm install --save-dev webpack (默认安装最新的版本)

npm install --save-dev webpack@ (安装自己想要的版本)

5、安装webpack-cli

npm install --save-dev webpack-cli

6、检查webpack是否安装成功

node_modules/.bin/webpack -v

三、开始创建项目~

1、安装nodejs

上官网装一个就好啦

安装nodejs,

2、初始化项目

安装完nodejs，进入项目，执行以下代码，进行项目初始化，过程中会提示你填写项目名、版本、描述、仓库地址、关键字等信息，也可以一直回车

至于怎么进入项目嘛，我是直接在vscode 打开终端直接运行代码

npm init

3、打包JS文件

我们在根目录下创建一个 webpack.config.js 文件和一个src文件夹。然后在src中创建一个 main.js 文
在 main.js 中写入你要打包的代码

可以是

alert(‘hello world’)

然后打开 webpack.config.js,进行webpack配置

const path = require('path')
let config = {
  mode: 'none',
  entry: {
    main: path.join(__dirname, './src/main.js')
  },
  output: {
    filename: '[name].bundle.js',
    path: path.join(__dirname, './dist')
  }
}
module.exports = config

在webpack4中，我们需要设置 mode 属性，用来决定当前是development还是production环境，webpack会根据此值来进行一些默认操作，两种环境的不同配置后面的博文会详解，这里我们设置为 ‘none’ ，来避免默认操作。前文已经说过，path 是 nodeJs中的核心模块用来操作路径，__dirname 表示文件的当前路径（此时为根路径）。而 output中的filename属性，[name] 表示入口的名称，此处就是 main。

接下来打开 package.json 文件，来编写一条命令执行webpack的打包。在 script 中添加：

"build": "webpack --config webpack.config.js --progress --colors"

webpack --config path/to/your/file/file.js 表示执行某个配置文件，–progress可以让我们看到打包的进度 ， --colors 开启命令行颜色显示，更多的webpack命令参数大家可以另行查阅。

然后就可以在终端里执行代码了

npm run build

执行完根目录会多出一个dist 文件夹 并有一个 main.bundle.js文件这就是webpack为我们打包出来的静态资源，而文件路径就是我们在 output 中设置的值。

然后就可以建个index.html 引入js在网页看效果了