zoukankan      html  css  js  c++  java
  • webpack起步

    第一步:新建并启动项目

    文件目录结构如下:

    .
    +-- dist
    |   +-- index.html
    +-- src
    |   +-- index.js
    +-- package.json
    

    在 webpack 4 中,可以无须任何配置使用。

    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());
    

    dist/index.html

    <!doctype html>
    <html>
    
    <head>
      <title>起步</title>
    </head>
    
    <body>
      <script src="main.js"></script>
    </body>
    
    </html>
    

    package.json

    {
      "name": "webpacklearning",
      "version": "1.0.0",
      "description": "",
      "private": true,
      "scripts": {
        "start": "webpack",
        "test": "echo "Error: no test specified" && exit 1"
      },
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "webpack": "^4.26.1",
        "webpack-cli": "^3.1.2"
      }
    }
    

    调整 package.json文件,以便确保我们安装包是私有的(private),并且移除main入口。这可以防止意外发布你的代码。

    安装lodash

    npm install --save lodash
    

    执行命令

    npx webpack
    

    执行的命令脚本会将 src/index.js 作为 入口起点,也会生成 dist/main.js 作为 输出。

    Node 8.2/npm 5.2.0 以上版本提供的 npx 命令,可以运行在初始安装的 webpack 包(package)的 webpack 二进制文件(./node_modules/.bin/webpack)

    运行后的,文件目录结构如下:

    .
    +-- dist
    |   +-- index.html
    |   +-- main.js
    +-- src
    |   +-- index.js
    +-- package.json
    

    在浏览器中打开 index.html

    浏览器中显示'Hello webpack'。

    第二步:使用配置文件启动项目

    新增webpack.config.js

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

    webpack.config.js

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

    执行命令

    npx webpack --config webpack.config.js
    

    如果 webpack.config.js 存在,则 webpack 命令将默认选择使用它。我们在这里使用 --config 选项只是向你表明,可以传递任何名称的配置文件。这对于需要拆分成多个文件的复杂配置是非常有用。

    NPM 脚本运行项目

    添加npm 脚本(npm script)

    package.json

    {
      "name": "webpacklearning",
      "version": "1.0.0",
      "description": "",
      "private": true,
      "scripts": {
        "build": "webpack",
        "test": "echo "Error: no test specified" && exit 1"
      },
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "webpack": "^4.26.1",
        "webpack-cli": "^3.1.2"
      },
      "dependencies": {
        "lodash": "^4.17.11"
      }
    }
    

    现在,可以使用 npm run build 命令,来替代我们之前使用的 npx 命令。

    执行命令

    npm run build
    

    项目地址

  • 相关阅读:
    ant的安装和配置
    jmeter3.x的jtx文件解析
    爬虫:网页里元素的xpath结构,scrapy不一定就找的到
    如何实现新浪微博功能:关注某个的发布信息,自动点赞和转发
    性能测试各个指标的含义
    python模块相关
    curl的用法
    第十八章 Python批量管理主机(paramiko、fabric与pexpect)
    死锁产生的原因和解锁的方法
    读写分离死锁解决方案、事务发布死锁解决方案、发布订阅死锁解决方案
  • 原文地址:https://www.cnblogs.com/xmyun/p/10026383.html
Copyright © 2011-2022 走看看