共同学习Vue.js ---webpack

webpack

什么是webpack?

从本质上将,webpack是一个现代的JavaScript应用的静态 模块 打包工具.简单的讲就是模块和打包.

前端模块化:

webpack其中一个核心就是让我们可能进行模块化开发,并且会帮助我们处理模块间的依赖关系.

不仅仅是JavaScript文件,我们的CSS,图片,json文件等等在webpack中都可以被当做模块来使用.

打包:

将webpack中的各种资源模块进行处理,比如压缩图片,将scss转成css,将ES6语法转成ES5语法,将TypeScript转成JavaScript等操作.

和gulp打包工具的对比

• gulp的核心是Task,可以配置一系列的task,并且定义task要处理的事务.

• 如果我们的工程模块化依赖非常简单,甚至是没有用到模块化的概念,只需要进行简单的合并,压缩,就使用gulp即可.

• webpack更加强调模块化开发管理,而文件压缩合并,预处理等功能,是它附带的功能

webpack安装

• 首先要安装Node.js ,Node.js自带了软件包管理工具npm

• 查看自己的版本: node -v

• 全局安装webPack
  在控制台输入下面命令:

npm install webpack@3.6.0 -g    // -g 是全局安装

• 局部安装

--save-dev局部安装(本地安装)

npm install webpack@3.6.0 --save-dev

为什么全局安装后,还需要局部安装?

• 在终端直接执行webpack命令,使用的安装的webpack
• 当在package.json中定义了scripts时,其中包含了webpack命令,那么使用的是局部webpack

开发项目进行测试

打开Terminal 终端,进入项目,输入命令

D:\VueWebpack-v0\01-webpack的使用\01-webpack的起步>webpack ./src/main.js ./dist/bundle.js

webpack基础起步如图所示:

入口和出口

如果每次使用webpack的命令都需要写上入口和出口作为参数,就很麻烦,但是我们创建一个webpack.config.js 文件作为一个出入口就非常方面了.
就以上述图片为例,我们只要在控制台输入webpack命令,工具就会自动的执行webpack ./src/main.js ./dist/bundle.js这个命令一样的效果.
webpack.config.js文件:

使用require(‘path’),'path’是从Node的包里导入的,要想使用,必须要从Node导入path包;直接操作异常如下:

在控制台执行命令: npm init

如下图步骤所示:

命令执行完生成的文件:

如果有依赖的话还需要在控制台输入npm install 命令,操作如下:

当在执行时,如果出现ReferenceError: _dirname is not defined ,解决方法如图所示:

正确的姿势：

项目重新跑起:

webpack 和 npm run build 相应射
当在控制台输入: npm run build 命令时,会和webpack一样的效果
配置如下:

输入npm run build 命令后如图显示:

本地安装

当我们使用全局webpack时,有时可能造成与当前项目版本不兼容,所以需要进行本地安装,而且使用本地webpack是最常用的;
在控制台执行以下命令 npm install webpack@3.6.0 --save-dev
其中 --save是本地安装, -dev是开发时的依赖

注意: 只要在终端里输入的命令都是全局的,当我们定义映射脚本的时候会优先执行本地的,如果本地没有就会执行全局的.