webpack 安装和使用

1.全局安装:npm install webpack -g
指定版本:npm install webpack@3.6.0 -g
2.局部安装:npm install webpack --save-dev
指定版本:npm install webpack@3.6.0 --save-dev

3.打包项目:
初始化:npm init -y (需要使用node 方面的东西之前一定要初始化)
打包: webpack ./src/main.js ./dist/bundle.js

项目中创建:webpack.config.js

   var path = require('path');
   module.exports = {
    entry:"./src/main.js",
    output: {
        path:path.resolve(__dirname,"dist"),//动态获取绝对路径
        filename: 'bundle.js'
    },
};

打包:webpack

package.json中加入build

{
  "name": "wabpack",//包名
  "version": "1.0.0",//版本号
  "description": "",//描述
  "main": "index.js",//入口
  "dependencies": {
    "webpack": "^3.6.0"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

打包:npm run build

总结:一脸懵逼

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、webpack入门 Webpack 是一个前端资源的打包工具,它可以将js、image、css等资源当成一个模...
    余生安好178阅读 1,124评论 0 2
  • 前言 众所周知目前比较火的工具就是gulp和webpack,但webpack和gulp却有所不同,本人两者的底层研...
    cduyzh阅读 1,416评论 0 13
  • 2-1 中文文档讲师主页印记中文 究竟是什么 最原始的网页开发方式 index.html index.js 测试 ...
    Mark同学阅读 493评论 0 0
  • 写在开头 先说说为什么要写这篇文章, 最初的原因是组里的小朋友们看了webpack文档后, 表情都是这样的: (摘...
    Lefter阅读 5,358评论 4 31
  • NTFS与FAT32是两种不同的磁盘文件系统格式,就像两个不同的图书馆,他们书架的摆放,尺寸各不相同,管理方式也各...
    海韵互联阅读 1,311评论 0 1