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

打包就成功了

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

 

原文地址:https://www.cnblogs.com/lanlanJser/p/11878467.html