美文网首页
webpack4 从入门到放弃

webpack4 从入门到放弃

作者: 风华正茂它爸爸 | 来源:发表于2018-07-18 10:11 被阅读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.

    相关文章

      网友评论

          本文标题:webpack4 从入门到放弃

          本文链接:https://www.haomeiwen.com/subject/rozhpftx.html