webpack安装以及客户端使用

webpack是一个基于node的项目,所以首先需要确保你的电脑里面已经安装了node.js,以及npm。

node -v ,npm -v 查看版本信息, webpack -h 查看当前安装版本的信息

1、安装webpack: (我们常规直接使用 npm 的形式来安装)

sudo npm install webpack -g (全局)

sudo npm install webpack --save-dev (保存至package.json的devDependencies节点,依赖);

webpack -h 可以查看webpack安装的版本,我只是安装在当前目录并未全局安装,或者通过npm install webpack@2.4.x --save-dev安装指定版本的webpack到package.json文件中

当然如果常规项目还是把依赖写入 package.json 包去更人性化:

2、webpack可以在终端中使用,在基本的使用方法如下:

不使用配置文件webpack.config.js的用法

压缩

#{entry file}文件入口

#{destination for bundled file}文件输出路经

webpack {entry file} {destination for bundled file}

# webpack非全局安装的情况 当前路经找到node_modules安装的位置 node_modules/.bin/webpack 代表webpack

node_modules/.bin/webpack {entry file} {destination for bundled file}

package.json中加

"scripts": {"start":"webpack",},就不用找node_modules/.bin/webpack

使用配置文件进行构建新建一个webpack.config.js

const path=require("path")

module.exports={

/**

* context是entry配置项的根目录(绝对路径)。如果output.pathinfo也设置了,它的pathinfo是基于这个根目录。

*“__dirname”是node.js中的一个全局变量,它指向当前执行脚本所在的目录。

*/

context = __dirname;

//entry唯一入口文件

entry:  __dirname+"/main/js/main.js",

//output编译输出的配置项

output: {

path:path.resolve(__dirname,"../dist/js/") ,//打包后的文件存放的地方

filename:"bundle.js"//打包后输出文件的文件名

}

}

这样就会就近执行webpack.config文件

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

推荐阅读更多精彩内容

  • 无意中看到zhangwnag大佬分享的webpack教程感觉受益匪浅,特此分享以备自己日后查看,也希望更多的人看到...
    小小字符阅读 12,544评论 7 35
  • 版权声明:本文为博主原创文章,未经博主允许不得转载。 webpack介绍和使用 一、webpack介绍 1、由来 ...
    it筱竹阅读 13,849评论 0 21
  • GitChat技术杂谈 前言 本文较长,为了节省你的阅读时间,在文前列写作思路如下: 什么是 webpack,它要...
    萧玄辞阅读 14,334评论 7 110
  • 从踏进大学门槛的那一刹那开始,我就对我自己说我要考研,我一定要离开这个鬼地方。之所以说我的大学是个鬼地方是因为,本...
    我是东方呀阅读 3,698评论 13 3
  • 昨晚睡觉之前就想好今天要早起跑步,可还是赖床了20分钟,才踏上椭圆机,运动的时候我一边听歌一边跑步,还时不时的喵一...
    蜂蜜芥末兔阅读 5,513评论 0 0