wepack二 打包项目文件及配置

1.在前面webpack学习一的基础上继续进行学习
在之前是基础的文件，实际会出现多个js文件等/包括执行命令的复杂性

2.在项目根目录下添加文件夹app / public
分别在app内添加入口文件 main.js 以及 Greeter.js

//main.js 
const greeter = require('./Greeter.js');
document.querySelector("#root").appendChild(greeter());

// Greeter.js
module.exports = function() {
  var greet = document.createElement('div');
  greet.textContent = "Hi there and greetings!";
  return greet;
};

在public内添加静态界面index.html

此时执行打包操作是可以的，将app内的js调用了起来

npx webpack app/main.js --output-filename public/bundle.js --output-path . --mode development 

对于打包操作执行命令，还是有点繁琐，这里进行配置简化

3.对打包命令进行简化，添加并配置webpack.config文件，对需要调用和输出对文件表示清楚

module.exports = {
  entry:  __dirname + "/app/main.js",//已多次提及的唯一入口文件
  output: {
    path: __dirname + "/public",//打包后的文件存放的地方
    filename: "bundle.js"//打包后输出文件的文件名
  }
}

此时执行打包操作命令

npx webpack --mode development

即可完成，如此处不写--mode development还是会报黄色警告

还能够再简化一些，直接输入我们自己定义对打包命令

4.在package.json文件中修改配置

"scripts": {
    "start":"webpack --mode development",
    "build": "webpack --mode production"
  },

此时可以直接使用npm start 完成调用

npm start