概述

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. 001Spring Boot中使用MongoDB

    01.下载MongoDB 点击标题链接,下载windows可用的MongoDB. 02.解压 将下载的压缩包放入C盘根目录(根据自己需要调整目录)---->解压到当前文件夹---->重命名 ...

  2. Unihan（统汉字）常用字段介绍

    0 背景 1 文件 1.1 IRG Sources 1.2 Dictionary Indices 1.3 Dictionary-like Data 1.4 Other Mappings 1.5 Rad ...

  3. tomcat7环境

    官方下载页面:http://tomcat.apache.org/download-70.cgi 选择64-bit Windows zip下载 解压后,进入tomcat-7.0.73\bin目录,双击运 ...

  4. mssql修改id

    alter   table   image   alter   column   id     int   IDENTITY   (1,   1)   NOT   NULL 我只能上查询分析器,所以只 ...

  5. APRoundedButton

    APRoundedButton https://github.com/elpsk/APRoundedButton 效果: 源码: APRoundedButton.h // // Created by ...

  6. 沉淀再出发:OpenStack初探

    沉淀再出发:OpenStack初探 一.前言 OpenStack是IaaS的一种平台,通过各种虚拟化来提供服务.我们主要看一下OpenStack的基本概念和相应的使用方式. 二.OpenStack的框 ...

  7. 初始python（三）

    1. 循环 if, while, forbreak : 结束整个循环continue :跳出当前这次循环,但不结束整个循环else :结束整个循环后才执行,不能与break合用,但可以与continu ...

  8. 深入浅出SharePoint2010——请假系统无代码篇之权限设计

    首选我们需要区分3个跟权限相关的概念. 权限项目(Permission):最小的权限粒度.比如创建列表项.审批等. 权限级别(Permission Level):权限项目不能直接赋予用户或者用户组,只 ...

  9. December 07th 2016 Week 50th Wednesday

    Life is a flower, and love is the honey of the flower. 人生是花儿,而爱情就是花的蜜. My life is not as beautiful a ...

  10. Linux命令--权限管理

    chmod命令 Linux/Unix 的文件调用权限分为三级 : 文件拥有者.群组.其他.利用 chmod 可以藉以控制文件如何被他人所调用. 使用权限 : 所有使用者 语法 chmod [-cfvR ...