zoukankan      html  css  js  c++  java
  • webpack基础使用

    环境: win10, webpack v3.5.6, node v8.4, npm v5.3.

    安装与配置

    新建一个项目目录demo, 在当前目录执行如下命令:

    npm init -y
    npm install --save-dev webpack
    npm install --save lodash
    

    根据如下目录结构创建文件:

      demo
      |- package.json
    + |- webpack.config.js
      |- /dist
        |- index.html
      |- /src
        |- index.js
    

    新版npm会自动创建package-lock.json
    dist是distribution code的缩写, 用来存放生产环境的代码.

    webpack.config.js 内容如下

    const path = require('path');
    
    module.exports = {
    	entry: './src/index.js',
    	output: {
    		filename: 'bundle.js',
    		path: path.resolve(__dirname, 'dist')
    	}
    };
    

    dist/index.html 内如如下

    <html>
    <head>
        <title>Getting Started</title>
    </head>
    <body>
    
    <script src="bundle.js"></script>
    
    </body>
    </html>
    

    src/index.js 内容如下

    import _ from 'lodash';
    
    function component() {
        var element = document.createElement('div');
    
        // Lodash, now imported by this script
        element.innerHTML = _.join(['Hello', 'webpack'], ' ');
    
        return element;
    }
    
    document.body.appendChild(component());
    

    在package.json中添加如下内容

    "scripts": {
        "build": "webpack"
    }
    

    测试使用

    执行npm run build, 将会在dist目录下生成bundle.js. 成功执行后将输出以下内容:

    sheng@SHENG-LAPTOP D:Asheng_IDEFrontEndstudy_treewebpackdemo
    > npm run build
    
    > demo@1.0.0 build D:Asheng_IDEFrontEndstudy_treewebpackdemo
    > webpack
    
    Hash: bf97d2bdc70ce2f70877
    Version: webpack 3.5.6
    Time: 386ms
        Asset    Size  Chunks                    Chunk Names
    bundle.js  544 kB       0  [emitted]  [big]  main
       [0] ./src/index.js 263 bytes {0} [built]
       [2] (webpack)/buildin/global.js 509 bytes {0} [built]
       [3] (webpack)/buildin/module.js 517 bytes {0} [built]
        + 1 hidden module
    

    此时, 在dist目录下的2个文件: index.htmlbundle.js即为打包的在生产环境中使用
    的文件, 双击index.html可直接运行.

    相关链接

    https://webpack.js.org/guides/getting-started/

  • 相关阅读:
    DAY09(for语句)
    Python 下载 tushare 数据,然后调用 C++ DLL 计算 wMA 存入本地 csv 文件再 python 读取
    Python socket编程之八:阶段性总结
    Ctex + Lyx = 自用 Latex 编辑环境
    matlab下二重积分的蒙特卡洛算法
    实验9 根据材料编程
    实验5 编写、调试具有多个段的程序
    实验4 [bx]和loop的使用
    实验3 编程、编译、连接、跟踪
    汇编语言第三章总结
  • 原文地址:https://www.cnblogs.com/asheng2016/p/7491214.html
Copyright © 2011-2022 走看看