简单的打包

1. 安装 node ,到  https://nodejs.org/zh-cn/下载安装

2. 安装 webpack4.x({开发依赖)

   cnpm i -D webpack webpack-cli

3. 新建app.js文件作为入口文件(使用了下面的几种导入文件方式)

   app.js

   import ‘./es6‘;
   require(‘./common‘);
   require(‘./amd‘);
   
   // npx webpack app.js
   console.log(‘app‘);

   es6.js

   export default ‘es6‘;
   console.log(‘es6‘);

   common.js

   module.exports = ‘commonjs‘;
   console.log(‘common-js‘);

   amd.js

   define(function () {
      console.log(‘requires-js‘)
   });

4. 简单打包(生成目标文件 ./dist/main.js)

   npx webpack app.js

5. 使用配置文件

   // npx webpack --config xxxx-config.js
   
   const path = require(‘path‘);
   module.exports = {
       entry: {
           app: ‘./src/app.js‘
       },
       output: {
           path: path.join(path.resolve(__dirname), ‘dist‘),
           filename: "[name].bundle.[hash:8].js"
       },
   };

   npx webpack 直接就可以打包了（默认会先找项目中的webpack, 其次才是全局的webpack）

6. 使用脚本命令打包简单配置

   {
     "name": "test",
     "version": "1.0.0",
     "description": "",
     "main": "index.js",
     "scripts": {
       "test": "echo \"Error: no test specified\" && exit 1",
       "dev": "webpack --mode=development",
       "build": "webpack --mode=production"
     },
     "keywords": [],
     "author": "",
     "license": "ISC",
     "devDependencies": {
       "webpack": "^4.33.0",
       "webpack-cli": "^3.3.2"
     }
   }

   npm run dev 代码不压缩（开发环境），生产环境  npm run build,(mode 参数决定是什么环境)

原文地址：https://www.cnblogs.com/heidekeyi/p/10989560.html