zoukankan      html  css  js  c++  java
  • webpack快速入门——如何安装webpack及注意事项

    一.检查环境

    1.window+R键,输入cmd打开命令行工具

    2.检查是否有安装node.js  有版本显示则是已经安装成功  否则可以官网安装node.js

    命令行  node -v

    3.检查npm 或者是cnpm 有版本显示则是已经安装成功  否则可以安装npm

    二.创建package.json文件

    1.新建一个文件夹webpackproject,创建package.json文件(记载项目的信息,项目所需要的版本以及版本信息等)

    cnpm init  创建package.json文件 

    创建成功以后webpackproject 会有一个package.json文件

     创建的时候会有一些提示信息

    (1).名称 (2)版本 (3)项目描述 (4)项目入口文件(回车)(5)不需要(回车)(6)git存放地址(不需要就回车)(7)关键词(8)作者信息(9)凭证

    三.安装webpack

    1. cd webpackproject进入刚刚创建好的文件夹里,

    输入cnpm install webpack webpack-cli --save-dev  有本地安装和全局安装,这里只介绍本地安装哦

    (安装了淘宝镜像的小伙伴可以直接使用cnpm,没有安装的使用npm)cnpm和npm的区别这里就不多说了,不懂的小伙伴可以百度

    四.打包

    默认entry         入口 src/index.js             在建好的文件夹下面创建src文件,再在src下面创建一个index.js文件

    默认output       出口 dist/main.js             运行打包命令以后会自动生成一dist文件,文件下面是main.js文件

    打包模式(两种)

      开发阶段:webpack --mode development

      生产阶段:webpack --mode production

    在package.json文件里写上打包模式,前面dev,build是命令行名字,后面的内容是命令

    在index.js中写入console.log(11) 

    打开cmd,进入到webpackproject文件,运行命令  cnpm run dev (dist文件下是main.js文件)  或者是 cnpm run build(dist文件下是main.js文件)

    打包就成功了

    两种打包模式打包的结果不同,开发阶段是阶梯式的,生产阶段是打包成一行形式

     

  • 相关阅读:
    leetcode 18 4Sum
    leetcode 71 Simplify Path
    leetcode 10 Regular Expression Matching
    leetcode 30 Substring with Concatenation of All Words
    leetcode 355 Design Twitte
    leetcode LRU Cache
    leetcode 3Sum
    leetcode Letter Combinations of a Phone Number
    leetcode Remove Nth Node From End of List
    leetcode Valid Parentheses
  • 原文地址:https://www.cnblogs.com/lanlanJser/p/11878467.html
Copyright © 2011-2022 走看看