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文件)

    打包就成功了

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

     

  • 相关阅读:
    Mybatis使用resultType实现一对一查询
    利用webSocket使网页和服务器通信
    hdu--1728--special bfs
    hdu--1429--状压bfs
    hdu--3006--不知为何wa
    hdu--3001--类似旅行商<tsp>
    hdu--2660--二维费用背包
    hdu--4632--dp
    hdu--4497--数论
    hdu--4496--并查集
  • 原文地址:https://www.cnblogs.com/lanlanJser/p/11878467.html
Copyright © 2011-2022 走看看