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
    

    项目地址

  • 相关阅读:
    vbScript首字拼音查询
    C#读取U盘序列号
    下拉 回车 筛选
    Oracle的汉字转拼音首字母的函数
    sql 触发器禁止和启用
    List.FindAll 方法
    MyControl 常用操作
    List.Find 方法
    regsvr32 C:\WINDOWS\system32\cell32.ocx
    2222222
  • 原文地址:https://www.cnblogs.com/xmyun/p/10026383.html
Copyright © 2011-2022 走看看