• webpack系列之安装(Mac OS)


     1. webpack介绍,可参考Webpack中文文档

     2. 安装webpack之前先需要安装npm,可参看NPM的使用介绍

     3. 安装webpack,可参考Webpack入门教程

    ===========================================================

    以下我具体说一下我安装的过程,及在此过程遇到的一些问题与解决办法

    1. 先确认node及npm是否安装

       可以通过node --versionnpm --version命令确认

        如下表示node和npm已经安装了,否则会报错,node或npm命令不存在,此时先安装node或npm命令,参考文章头部给出的参考链接

    2. 进入目录文件夹test,没有的话,执行mkdir test创建test文件夹(test为用来打包的项目文件夹)

    3. 安装webpack

     执行cnpm install webpack -g   ,-g表示全局安装

     以下显示表示成功安装

    4. 在test目录下创建index.js文件

    // index.js
    console.log('Hello World!')

    5.  执行webpack index.js

     a. 执行此命令可能会报如下错误:

    One CLI for webpack must be installed. These are recommended choices, delivered as separate packages:

    We will use "npm" to install the CLI via "npm install -D".
    Which one do you like to install (webpack-cli/webpack-command):

    这是告诉我们还需要安装webpack-cli,解决办法可参考安装了webpack和webpack-cli,但是运行webpack命令报错

    b. 解决以上问题,执行如下命令:

    先全局安装webpack和webpack-cli(全局安装webpack命令上面已经执行了 ,及cnpm install webpack- -g 

    cnpm install webpack-cli -g

    再局部安装webpack和webpack-cli

    cnpm install webpack --save-dev(执行完此命令test目录下会生成node_modules文件夹和package.json文件)

    cnpm install webpack-cli --save-dev

    此时可能会报没有权限之类的错误(错误信息忘截图了。。。)

    执行sudo cnpm install webpack-cli --save-dev 然后出现password,输入电脑的开机密码即可

    c. 再执行webpack index.js,结果如下图,会有WARNING in configuration的一条警告

    是说没有指定模式,webpack的mode有开发模式(development)和生产模式(production)

    d. 执行webpack index.js --mode development即可

    此时你就会看到test目录下会有一个dist文件夹,dist文件夹下有一个main.js文件

    就说明通过webpack命令打包成功了!

       

  • 相关阅读:
    Activity的几种启动模式
    android 环境搭建
    认识python中__name__、程序主入口
    32位与64位之谈
    shell中字符串基本用法
    C++ push方法与push_back方法
    8-10总结
    第九章 硬件抽象层:HAL
    第十章 嵌入式Linux的调试技术
    第八章
  • 原文地址:https://www.cnblogs.com/china-fanny/p/11044515.html
Copyright © 2020-2023  润新知