下载安装webpack

webpack是一个模块打包工具，默认只能打包js文件
借助于loader插件，webpack可以将css、img等静态资源也当做模块一起打包
webpack是基于nodejs运行的，所以在打包前必须保证本地拥有nodejs运行环境

1、初始化：

npm init -y

2、本地安装：

npm install webpack --save-dev

3、babel-loader：

npm install babel-loader babel-core -D

4、安装插件：

npm install babel-preset-es2015 babel-plugin-transform-runtime -D

5、配置css模块：

npm install css-loader style-loader autoprefixer-loader -D

6、配置less模块：

npm install less less-loader -D

下载安装无误后，package.json里会自动生成相应的版本号

7、创建webpack.config.js

8、创建文件夹src，在文件夹内创建文件main.js

9、配置环境变量

10、在根目录下输入webpack -v

11、安装webpack-cli

12、每次更改，都要webpack-cli后，才能在浏览器中显示

下载安装webpack相关推荐

node.js的下载安装详细步骤（还有安装配套的express、淘宝镜像、webpack、Vue）
目录一.概述二.操作步骤 (一)下载node.js (二) 安装node.js (三)查看环境变量 (四)查看版本信息 (五)新建全局下载包和缓存包位置 (六)配置环境变量 (七)安装expres ...
VUE利用webpack创建项目失败--离线安装webpack下载模板
@TOC无法翻墙的–离线安装webpack下载模板最近在学习vue过程中利用webpack生成模板创建项目的时候发现一直卡在下载模板这一步,如图所示 , 查资料发现自己网无法连接git官网导致下载失 ...
Mac安装webpack报错gyp ERR! configure error gyp ERR! stack Error: `gyp` failed with exit code: 1解决
安装webpack ,报错提示 gyp ERR! configure error gyp ERR! stack Error: `gyp` failed with exit code: 1 gyp ER ...
Mac系统下安装webpack,cnpm,vue-cli
Mac自带安装了npm node,无需自己安装,如果你的Mac没有安装node,可以去node官网下载,下载链接为: node下载地址安装过程很简单,安装完之后查看版本 node -v[查看node ...
手把手带你安装webpack --mac电脑哦~
1.安装node,进入nodejs官网进行下载安装包,安装即可.与常规软件安装步骤一样. 2.安装完后在桌面创建一个文件夹,尽量避免使用webpack字眼.这里以webClass为例 3.打开mac的 ...
Vue下载安装步骤的详细教程(亲测有效) 2 安装与创建默认项目
上篇请移步到Vue下载安装步骤的详细教程(亲测有效) 1_水w的博客-CSDN博客上一篇博文已经对Node.js的安装与配置进行了详细介绍. 另外:文中项目存放的路径及项目名称可根据自身实际情况进行 ...
安装webpack、使用webpack打包详细案例教程
使用webpack打包详细案例教程首先安装node环境,使用node中的工具npm安装webpack node.js 下载地址:http://nodejs.cn/download/ node.js安 ...
npm和cnpm下载安装及VUE的创建
npm和cnpm下载安装及VUE的创建 1. node.js下载 node.js官网: http://nodejs.cn/download/ 下载安装后cmd输入以下命令查看版本 2. 配置npm 打 ...
安装webpack的完整步骤
1.安装node.js 去node.js官网(https://nodejs.org/en/)下载LTS稳定版本,一路傻瓜式安装(具体步骤另行查阅,此处不详述).安装完成后在cmd界面输入node -v ...

下载安装webpack

下载安装webpack相关推荐

最新文章

热门文章