webpack4 从入门到放弃

2018-07-18  本文已影响0人  风华正茂它爸爸

简单的打包,按照官网例子来的。

  1. webpack4 倡导本地下载。首先创建packange.json npm init
  2. 下载本地webpack和webpack-cli npm install webpack webpack-cli --save-dev
  3. 我们的目录结构是这样的
webpack-demo
|- package.json
|- webpack.config.js
|- /dist
  |- bundle.js
  |- index.html
|- /src
  |- index.js
  |- sum.js
|- /node_modules
  1. index.js
 import sum from './sum';

    function component() {
        var element = document.createElement('div');

                element.innerHTML = sum(2,3);

        return element;
    }

document.body.appendChild(component());
  1. sum.js
export default function (a,b) {
    return a+b;
}
  1. index.html
<!doctype html>
<html>
<head>
    <title>qibu</title>
</head>
<body>
   <script src="bundle.js"></script>
</body>
</html>

7.package.json

{
  "name": "webpack",
  "version": "1.0.0",
  "private": true, //更改此处   
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.16.1",
    "webpack-cli": "^3.0.8"
  },
  "dependencies": {
    "loadsh": "^1.0.1",
    "lodash": "^4.17.10"
  },
  "description": ""
}

8 运行命令 run build webpack 就会打包生成 bundle.js.

上一篇下一篇

猜你喜欢

热点阅读