webpack打包单个js文件

使用npm init初始化

mkdir webpack-demo && cd webpack-demo
npm init

初始化完成后，目录下会生成package.json

按照 webpack 4以上还需要安装webpack-cli

npm install --save-dev webpack webpack-cli

添加webpack.config.js文件

const path = require("path");
module.exports = {
    mode: "development", //打包为开发模式
    // 入口配置的对象中，属性为输出的js文件名，属性值为入口文件
    entry: {
    	app1:"./app1.js",
    	app2:"./app2.js",
    	app3:"./app3.js",
    }, //入口文件,从项目根目录指定
    output: { //输出路径和文件名，使用path模块resolve方法将输出路径解析为绝对路径
        path: path.resolve(__dirname, "./dist/js"), //将js文件打包到dist/js的目录
        filename: "[name].js" //使用[name]打包出来的js文件会分别按照入口文件配置的属性来命名
    }
}

直接运行命令

webpack --config webpack.config.js

或者把命令封装到package.json文件里

{
  "name": "js",
  "version": "1.0.0",
  "description": "",
  "main": "app1.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"webpack --config webpack.config.js"//命令的添加
  },
  "author": "",
  "license": "ISC"
}

npm run build

PS：重点：加粗：md：有个很搞人的点就是引入的时候 打包成的是构造函数的话就会报错：

打包成的是函数的话就会报错：

是需要配置打包文件的时候加上 libraryTarget 网上查了几十上百个 都没说这个点儿 新人真的不懂这些配置 找了我一天 希望CV战士复制的时候自己试一下引入报不报错 它的作用是 打包生成的库可以通过esm/commonjs/requirejs的语法引