webpack打包,生成js，提供给node和浏览器使用

柔光的暖阳◎ 2021-06-22 15:37 225阅读 0赞

**1、目标：**

1.  打包后,node和浏览器能够使用.
2.  可以作为SDK提供给node,或者是前端
3.  打包后，可以发布npm包

**2、项目搭建：**

2.1）项目初始化：

1. mkdir webpack-build
    2. cd webpack-build
    3. npm init,不停回车，然后最后输入yes即可

2.2）项目结构：

2.3）webpack.config.js：（webpack配置）

const path = require("path");
    module.exports = {
      mode: "production",
      entry: "./index.js",
      output: {
        path: path.resolve(__dirname, "./dist"),
        filename: "webpack-numbers.js",
        libraryTarget: "umd",
        globalObject: "this",
        library: "webpackNumbers"
      }
    };

此处需要进行设置，libraryTarget: "umd" globalObject: "this"这样就能够使用在node和浏览器中。

2.4）index.js：（webpack入口文件）

export function numToWord(num) {
      return console.log('object')
    }

2.5）package.json：（npm文件，项目依赖项及项目基础信息）

{
      "name": "test-webpack",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "webpack"
      },
      "author": "",
      "license": "ISC",
      "dependencies": {
        "babel-core": "^6.26.0",
        "babel-loader": "^7.1.4",
        "babel-plugin-add-module-exports": "^0.2.1",
        "babel-preset-env": "^1.6.1",
        "eslint": "^3.9.1",
        "eslint-loader": "^1.6.1",
        "lodash": "^4.16.6",
        "webpack": "^4.20.2",
        "webpack-cli": "^3.1.1"
      }
    }

2.6）webpack打包：

npm run build

执行完成后，会在./dist目录下生成webpack-numbers.js文件（webpack.conf.js中filename属性指定）

注：这里可能会遇到一个错误：TypeError: Cannot read property 'properties' of undefined，解决方法：

This was broken by a webpack update, see webpack/webpack#8082
    
    A workaround for now is to update both, webpack and webpack-cli in package.json:
    
        "webpack": "^4.20.2",
        "webpack-cli": "^3.1.1",

[https://github.com/plotly/dash-component-boilerplate/issues/12][https_github.com_plotly_dash-component-boilerplate_issues_12]

**3、测试：**

3.1）html中测试：

进入dist目录，编写test.html，如下：

<html>
          <head>
            <title>webpack library example - Transalating numbers</title>
            <script
              type="text/javascript"
              src="https://unpkg.com/lodash@4.16.6"
            ></script>
          </head>
          <body>
            <div id="root"></div>
            <script type="text/javascript" src="./webpack-numbers.js"></script>
            <script type="text/javascript">
              console.log(webpackNumbers.wordtonum("One"));
            </script>
          </body>
    </html>

3.2）node中测试：

进入dist目录，编写test.js，如下：

let app = require("./webpack-numbers.js");
    let data = app.numToWord();
    console.log(data);

node test.js执行。

**4、npm发布：**

修改package.js

{
      "name": "test-webpack",
      "version": "1.0.0",
      "description": "",
      "main": "./dist/webpack-numbers.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "webpack"
      },
      "author": "",
      "license": "ISC",
      "dependencies": {
        "babel-core": "^6.26.0",
        "babel-loader": "^7.1.4",
        "babel-plugin-add-module-exports": "^0.2.1",
        "babel-preset-env": "^1.6.1",
        "eslint": "^3.9.1",
        "eslint-loader": "^1.6.1",
        "lodash": "^4.16.6",
        "webpack": "^4.20.2",
        "webpack-cli": "^3.1.1"
      }
    }

修改main属性。然后执行：

npm adduser, 写入 user password emial
    npm pubilsh，从而可以实现发布，可以npm网站查看自己的包

参考：[https://juejin.im/post/5caddf51f265da039d326c32][https_juejin.im_post_5caddf51f265da039d326c32]

[https://juejin.im/post/5db0fd1bf265da4d4216a9c5][https_juejin.im_post_5db0fd1bf265da4d4216a9c5]

[https_github.com_plotly_dash-component-boilerplate_issues_12]: https://github.com/plotly/dash-component-boilerplate/issues/12
[https_juejin.im_post_5caddf51f265da039d326c32]: https://juejin.im/post/5caddf51f265da039d326c32
[https_juejin.im_post_5db0fd1bf265da4d4216a9c5]: https://juejin.im/post/5db0fd1bf265da4d4216a9c5