zoukankan      html  css  js  c++  java
  • Webpack快速入门 (v3.7.1)

    新建文件如下结构:

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

    index.html如下:

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

    1.安装webpack

    npm install --save-dev webpack
    npm install --save-dev webpack@<version>  // @<version>  表示指定版本安装 
    npm install --global webpack    // --global    表示全局安装
    

    2.配置文件 webpack.config.js

    let webpack = require('webpack');
    const path = require('path');
    
    module.exports = {
      entry: './src/index.js',   // 需要被打包的文件
      output: {                     //  打包后的输出文件
        filename: 'bundle.js',      //  打包后输出文件的名字
        path: path.resolve(__dirname, 'dist')   //  打包后输出文件的路径
      }
    };
    

    3.创建bundle
    命令行输入 npm install --save lodash
    在index.js文件如下:

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

    4.NPM Scripts

    {
      ...
      "scripts": {
        "build": "webpack"
      },
      ...
    }
    

    在命令行输入 npm run build 即可开始打包。
    打包结束后打开index.html观察现象

    最后,完整的文件结构如下:

    webpack-demo
    |- package.json
    |- webpack.config.js
    |- /dist
      |- bundle.js
      |- index.html
    |- /src
      |- index.js
    |- /node_modules
    
  • 相关阅读:
    玩转树莓派《二》——用python实现动画与多媒体
    pygame(一)
    玩转树莓派(一)
    pythonchallenge(七)
    springmvc定时器
    maven打包成第三方jar包且把pom依赖包打入进来
    mybatis之动态SQL
    黑马12期day01之html&css
    千万级数据表删除特定字断
    自动跳转
  • 原文地址:https://www.cnblogs.com/renzhiwei2017/p/7675705.html
Copyright © 2011-2022 走看看