首页 > Web开发 > 详细

webpack打包工具用法

时间:2019-05-05 13:05:19      阅读:189      评论:0      收藏:0      [点我收藏+]

基础学习笔记,后续还会更新,如有错误,欢迎指正!

一、安装node.js

node.js官网:https://nodejs.org/en/

检查是否安装成功:node -v

技术分享图片

二、检查是否安装npm

node.js自带npm,检查npm版本:npm -v

技术分享图片

三、创建package.json文件:npm init

通过npm init 命令创建package.json文件

技术分享图片

四、新建项目目录,安装webpack环境:npm install webpack --save-dev

新建项目目录

 技术分享图片

通过cmd进入项目根目录文件夹,输入 npm install webpack --save-dev,package.json中有webpack版本

 技术分享图片

五、安装打包工具webpack-cli: npm install webpack-cli --save-dev

六、配置webpack.config.js

技术分享图片

七、安装第三方库

如安装jquery:

1、npm install jquery --save-dev

2、引用第三方库:require(‘jquery‘)

技术分享图片

八、服务端环境安装:npm install webpack-dev-derver --save-dev

安装webpack-dev-server,修改package.json中script配置项

 

技术分享图片

修改webpack.config.js配置项,指定IP、端口等

技术分享图片

本地执行npm run build编译

本地服务器执行npm start编译

http://localhost:8081/访问

webpack打包工具用法

原文:https://www.cnblogs.com/zhanglichun/p/10794898.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!