zoukankan      html  css  js  c++  java
  • webpack学习--创建一个webpack打包流程

    创建一个webpack打包流程

    首先安装webpack插件

    mkdir webpack-demo && cd webpack-demo
    npm init -y 
    npm install --save-dev webpack
    npm install --save lodash
    

    创建index.html文件

    <html>
      <head>
        <title>webpack 2 demo</title>
      </head>
      <body>
        <script src="./dist/bundle.js"></script>
      </body>
    </html>
    

    创建app/index.js文件

    'use strict';
    import _ from 'lodash';//加载
    
    function component () {
      var element = document.createElement('div');
    
      /* lodash is required for the next line to work */
      element.innerHTML = _.join(['Hello','webpack'], ' ');
    
      return element;
    }
    
    document.body.appendChild(component());
    

    建立一个webpack.config.js文件

    var path = require('path');//调用path模块
    module.exports = {
      entry: './app/index.js',//入口
      output: {
        filename: './bundle.js',//输出文件
        path: path.resolve(__dirname, 'dist')//输出目录
      }
    };
    

    使用npm命令行执行

    {
      ...
      "scripts": {
        "build": "webpack -p"
      },
      ...
    }
    
    npm run build
    

    package.json

    {
      "name": "create",
      "version": "1.0.0",
      "description": "mkdir webpack-demo && cd webpack-demo
     npm init -y
     npm install --save-dev webpack",
      "main": "index.js",
      "scripts": {
        "test": "echo "Error: no test specified" && exit 1",
        "build" : "webpack -p"
      },
      "keywords": [],
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "webpack": "^2.2.1"
      },
      "dependencies": {
        "lodash": "^4.17.4"
      }
    }
    
    

    官网传送门

  • 相关阅读:
    TCP概述
    拥塞窗口
    流量控制与滑动窗口
    Hadoop完全分布式安装配置完整过程
    Nagle算法
    mac安装软件后打不开,显示损坏,扔到废纸篓
    mac设置有线访问内网,无线访问外网
    linux 开机自启脚本配置
    linux中$#,$0,$1,$2,$@,$*,$$,$?的含义
    Window-server-2012显示电脑图标
  • 原文地址:https://www.cnblogs.com/caijw/p/6394563.html
Copyright © 2011-2022 走看看