概述

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

一般我们在开发中都是使用终端去进行安装,使用npm,关于npm是什么,在这里就不进行详细描述,自行搜索.在这里只需要知道npm是一个包管理工具和它的一些基本的指令就行,如果安装了node.js的,它里面会自动也帮你安装这个工具.

关于npm(node package manager)的基本指令

  • 查看版本 npm -v
  • 安装npm npm install npm -g
  • 指定版本安装 npm install npm@5.5.1 -g
  • 初始化(生成package.json) npm init
  • 全局安装 npm i -g
  • 全局卸载 npm uninstall -g
  • 全局路径 npm root -g
  • 局部安装 npm i --save(生产环境,默认) npm i --save-dev(开发环境)
  • 安装json中记录的模块 npm install
  • 发布 npm publish

webpack

准备

在使用webpack之前,我们需要对其进行安装.这里的安装分为全局安装和局部安装.

全局安装就是安装在计算机全局环境中,在任意的目录下都可以使用;

局部安装一般就是安装在项目的目录下,只有在项目的根目录下使用.

一般建议都进行全局和局部安装.

  1. 全局安装指令
// -g   global全局

npm install --save-dev webpack -g  //开发环境

npm install --save webpack  -g      //生产环境,默认

如果是4+以上的版本,不管是全局安装还是局部安装都需要再次安装-cli版本

// -g   global全局

npm install --save-dev webpack-cli -g  //开发环境

npm install --save webpack-cli  -g      //生产环境,默认

指定版本

npm install webpack@<version>
  1. 局部安装

局部安装是需要在项目目录下,执行安装指令.

npm install --save-dev webpack //开发环境

npm install --save webpack     //默认环境

3.配置文件相关

  • package.json
  • package-lock.json
  • webpack.config.js

打包示例

简单进行打包和配置本地服务器功能的示例.

  1. 准备如图的项目文件夹和示例文件

//index.js

var box = require('./other.js')();

document.querySelector("#root").appendChild(box);


// other.js

module.exports = function(){

    var box = document.createElement("div");

    box.innerHTML = "hello,webpack";

    return box;

};


// index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <div id="root">

    </div>

</body>

<script src="./bundle.js"></script>

</html>
  1. 进行本地安装webpack
//分别在目录执行以下脚本

npm i --save-dev webpack

npm i --save-dev webpack-cli

安装成功后,项目内会多出一个文件和一个文件夹

文件夹是存放包的,配置文件是各种信息.

  1. 创建配置文件package.json和webpack.config.js
//在package.json文件中

{

  "name": "webpack_demo",

  "version": "1.0.0",

  "description": "",

  "main": "index.js",

  "dependencies": {

    "webpack-cli": "^3.2.3",

    "webpack": "^4.29.5"

  },

  "devDependencies": {},

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1",

    "start": "webpack"  //加上这个,前提是已经全局安装webpack,记得删掉此注释,因为json不支持.

  },

  "keywords": [],

  "author": "",

  "license": "ISC"

}


//在webpack.config.js中

module.exports = {

    entry:  __dirname + "/public/index.js",//已多次提及的唯一入口文件

    output: {

      path: __dirname + "/main",//打包后的文件存放的地方

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

    }

  }
  1. 这个时候可以直接使用脚本命令进行打包
npm start //因为在配置文件package.json中配置了start命令,所以可以直接使用.
  1. 打包结果

配置本地服务

  1. 这个时候也需要再安装一个包
npm install --save-dev webpack-dev-server
  1. 然后在package.json和webpack.config.js需要加入一些配置
//webpack.config.js

module.exports = {

  devtool: 'eval-source-map',

  entry:  __dirname + "/public/index.js",//已多次提及的唯一入口文件

    output: {

      path: __dirname + "/main",//打包后的文件存放的地方

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

    },

  devServer: {

    contentBase: "./main",//本地服务器所加载的页面所在的目录

    historyApiFallback: true,//不跳转

    inline: true//实时刷新

  }

}


// packgae.json

{

  "name": "webpack_demo",

  "version": "1.0.0",

  "description": "",

  "main": "index.js",

  "dependencies": {

    "webpack-cli": "^3.2.3",

    "webpack": "^4.29.5"

  },

  "devDependencies": {

    "webpack-dev-server": "^3.2.0"

  },

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1",

    "start": "webpack",

    "server": "webpack-dev-server --open" //加上这句,可以快捷使用脚本命令

  },

  "keywords": [],

  "author": "",

  "license": "ISC"

}
  1. 运行脚本
npm run server
  1. 成功以服务器的形式运行,你可以看到URL的前缀不再是以file协议名开头.

Web | Webpack快速上手的更多相关文章

  1. Webpack 快速上手（下）

    杏仁前端开发工程师,代码洁癖症早期,关注前端技术. 由于文章篇幅较长,为了更好的阅读体验,本文分为上.中.下三篇: 上篇介绍了什么是 webpack,为什么需要 webpack,webpack 的文件 ...

  2. 【转】Webpack 快速上手（下）

    由于文章篇幅较长,为了更好的阅读体验,本文分为上.中.下三篇: 上篇介绍了什么是 webpack,为什么需要 webpack,webpack 的文件输入和输出 中篇介绍了 webpack 在输入和输出 ...

  3. 【转】Webpack 快速上手（中）

    由于文章篇幅较长,为了更好的阅读体验,本文分为上.中.下三篇: 上篇介绍了什么是 webpack,为什么需要 webpack,webpack 的文件输入和输出 中篇介绍了 webpack 在输入和输出 ...

  4. 【转】Webpack 快速上手（上）

    嫌啰嗦想直接看最终的配置请戳这里 webpack-workbench (https://github.com/onlymisaky/webpack-workbench) 由于文章篇幅较长,为了更好的阅 ...

  5. Web | jQuery快速上手

    jQuery伴随前端走过一段辉煌的时光,虽然现在已经慢慢的走下顶峰,但是过去的很多项目都是用jQuery写的,它的一些封装思想也非常值得借鉴,懂得jQuery是前端必不可少的. jQuery顶级对象 ...

  6. 从零开始学 Web 之 Ajax（三）Ajax 概述，快速上手

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  7. webpack快速入门——webpack3.X 快速上手一个Demo

    1.进入根目录,建两个文件夹,分别为src和dist 1).src文件夹:用来存放我们编写的javascript代码,可以简单的理解为用JavaScript编写的模块. 2).dist文件夹:用来存放 ...

  8. npm、webpack、vue-cli 快速上手

    npm+webpack+vue-cli快速上手   Node.js   npm 什么是Node.js  以及npm 简单的来说 Node.js 就是运行在服务端的JavaScript,基于Chrome ...

  9. 简明易懂，将细节隐藏，面向新手树立web开发概念——学完Java基础语法，超快速上手springboot+mybatiJavaWeb开发

    简明易懂,将细节隐藏,面向新手树立web开发概念 --学完Java基础语法,超快速上手JavaWeb开发 Web本质(先忽视各种协议) Web应用可以理解为浏览器和服务器之间的交互. 我们可以看一个简 ...

随机推荐

  1. .NET 跨平台服务端资料

    OWIN Web API:  http://www.asp.net/web-api/overview/hosting-aspnet-web-api/use-owin-to-self-host-web- ...

  2. 微服务实战（三）：以MySQL为例，从原理上理解那些所谓的数据库军规

    原文链接:微服务化的数据库设计与读写分离(来源:刘超的通俗云计算) 数据库永远是应用最关键的一环,同时越到高并发阶段,数据库往往成为瓶颈,如果数据库表和索引不在一开始就进行良好的设计,则后期数据库横向 ...

  3. 使用PermissionsDispatcher轻松解决Android权限问题

    之前也处理过6.0后的权限问题,直接处理很是麻烦.这次在github上搜到了关于权限星数最多的PermissionsDispatcher这个库,几个注释完美解决权限问题. 第一步 添加各种注释 1.@ ...

  4. android OrmLite

    最近在使用ormlite框架进行数据库的操作,下面简单的写个demo来学习下 1.下载jar包 这里使用的是ormlite-core-5.0.jar 和 ormlite-android-5.0.jar ...

  5. HTML5-入门2。

     文本样式 <b>加粗</b> <i>倾斜</i> <u>下划线</u> <s>删除线</s> < ...

  6. java笔记--重定向输出流实现程序输出到日志

    重定向输出流实现程序输出到日志 --如果朋友您想转载本文章请注明转载地址"http://www.cnblogs.com/XHJT/p/3877248.html "谢谢-- 利用Sy ...

  7. Python函数汇总(陆续更新中...)

    range的用法 函数原型:range(start, end, scan): 参数含义: start:计数从start开始.默认是从0开始.例如range(5)等价于range(0, 5); end: ...

  8. Windows API 查找窗体，发送Windows消息

    最近项目中需要做Windows消息截获操作,在网上找了一些资料. public class WindowsAPI { /// <summary> /// 回调函数代理 /// </s ...

  9. 机器学习入门KNN近邻算法(一)

    1 机器学习处理流程: 2 机器学习分类: 有监督学习 主要用于决策支持,它利用有标识的历史数据进行训练,以实现对新数据的表示的预测 1 分类 分类计数预测的数据对象是离散的.如短信是否为垃圾短信,用 ...

  10. [翻译] GSProgressView

    GSProgressView 本人极不推荐使用drawRect的方式来绘制下载进度条,无论机器的性能怎么高,使用drawRect用于绘制图形都是低效的. A cute little circular ...