webpack4.43 - 创建项目,打包第一个js文件

一、你需要准备什么

  • webpack v4.41.5
  • Node 12.14.0 LTS
  • 开发环境Hbuilderx
  • webpack 用于编译 JavaScript 模块。一旦完成安装,你就可以通过 webpack 的 CLI 或 API 与其配合交互。如果你还不熟悉 webpack,请阅读webpack4.x - 初始webpack,了解为什么你要使用 webpack,而不是社区中的其他工具。
  • 二.基本安装

  • 初始化 npm

    npm init -y
  • F:\web\001js_learn\jQuery\06_commonjs>npm init -y
    Wrote to F:\web\001js_learn\jQuery\06_commonjs\package.json:
    
    {
      "name": "06_commonjs",
      "version": "1.0.0",
      "description": "",
      "main": "main.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "keywords": [],
      "author": "",
      "license": "ISC"
    }

    然后 在本地安装 webpack

    npm install --save-dev webpack
  • webpack4.43 - 创建项目,打包第一个js文件
  •  接着安装 webpack-cli(此工具用于在命令行中运行 webpack);
  • npm install --save-dev webpack-cli
  • webpack4.43 - 创建项目,打包第一个js文件

      截止目前,我们就完成了webpack的本地安装,我们来看看我们的项目接口;

 webpack4.43 - 创建项目,打包第一个js文件

我们发现了3个不是我们创建的目录/文件,其中package.json是我们初始化npm是自动生成,另外两个使我们本地安装webpack时自动生成;

三.打包js文件

接下来,我们随着一个小案例,来学习如何使用webpack打包js文件;

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <script src="bundle.js">
            
        </script>
    </body>
</html>

main.js

1 var s = require(‘./s‘);
2 console.log(s.s_circle(10));

math.js

var PI = 3.14;
function multile(num1,num2){
    return num1 * num2;
}
function square(n){
    return n * n;
}
module.exports = {
    PI: PI,
    multile:multile,
    square:square
    
}

s.js

var  m =require(‘./math‘);
function circle(r){
    return m.multile(m.square(r),m.PI);
}
module.exports = {
    s_circle:circle
}

通过webpack打包就可以

webpack app.js --output-filename bundle.js --output-path . --mode development

webpack4.43 - 创建项目,打包第一个js文件

 webpack4.43 - 创建项目,打包第一个js文件

 生成了文件bundle.js

相关推荐