webpack4实战一--简单配置打包

一、项目package.json生成

直接在项目的根目录运行cmd执行下面命令，便可生成package.json

npm init -y

二、安装webpack相关依赖

安装 webpack 与 webpack-cli ( 4 版本需要cli才能执行命令)

npm i -D webpack webpack-cli

三、webpack配置（踩坑过） 

我在使用webpack4的时候就因为这个踩坑了，我不知道这个webpack4是要配置入口文件的，折腾了挺久才反应过来

在项目根目录新建一个webpack.config.js，在该js文件中写入以下代码

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/a.js',//入口文件，这个src目录下的a.js是我随便写的一个console.log()打印信息
  output: {//打包出口配置
    path: path.resolve(__dirname, 'dist'),//打包出口的文件夹
    filename: 'main.js',//打包后文件名称
  },
};

四、运行webpack打包命令

有安装过node和webpack、webpack-cli的话，直接使用下面命令即可

npx webpack

打包完之后的项目结构如下

dist即为我们打包完成后的文件夹