webpack 配置之入门一

webpack 是一个现代 Javascript 应用程序的模块打包器(module bundler ),它里面的功能比较多,核心模块可分为模块打包、代码分割与按需加载。这里只简单讲解下 webpack 的入门配置。

一:本地安装 webpack

  1、全局安装

    在全局安装之前首先需要下载 node (去node官网下载即可) 使用 node -v 和 npm -v 来查看下载的版本。这里不作详细介绍。

    管理员模式打开cmd 或 git 命令行工具:npm install webpack -g 或使用指定版本 npm install [email protected] -g 建议使用后者,因为 webpack 更新太快,最新版本修改会出现报错现象。在实际开发中还是使用固定版本,后期会介绍版本更新。

 

  2、项目配置

    接下来,就要在项目中使用 webpack 了, 首先通过 npm init 来新建 package.json 文件 ,这时候会让你输入name、version等基本信息,可默认回车即可。

    接下来在 package.json 中安装 webpack,通过命令:npm install [email protected] --sava-dev (和全局安装的版本保持一致,不然会出现版本冲突,可能会在项目中报错)如下图:

    这时候可在 package.json 文件中查看安装的 webpack 版本,也可使用命令行 webpack -v 来查看。这样就配置成功一个简单的 webpack 了,使用 webpack -h 可以查看 webpack 的主要命令了。

    其实在每个项目中都必须配置有一个 webpack.config.js ,它的作用如同常规的 gulpfile.js/Gruntfile.js ,其实它就是一个配置项,来告诉 webpack 它需要做什么。在项目根目录下新建 webpack.config.js 文件,接下来就是配置 webpack.config.js 了。

 

 二:配置 webpack.config.js

  未完待续........

 

 

猜你喜欢

转载自www.cnblogs.com/xqmyhome/p/10083193.html