使用webpack打包單個js文件

一、基礎打包

1.1 創建項目目錄,使用npm init初始化

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

初始化完成後，目錄下會生成package.json

1.2 按照 webpack 4以上還需要安裝webpack-cli

 

npm install --save-dev webpack webpack-cli

1.3 直接運行命令

webpack "js文件名"

二、配置打包

2.1 添加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文件會分別按照入口文件配置的屬性來命名
    }
}

2.2 直接運行命令

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