概述

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. android 获取http请求json数据

    package com.my.gethttpjsondata; import java.io.BufferedReader;import java.io.ByteArrayOutputStream;i ...

  2. LintCode2016年8月8日算法比赛----子树

    子树 题目描述 有两个不同大小的二叉树:T1有上百万的节点:T2有好几百的节点.请设计一种算法,判定T2是否为T1的子树. 注意事项 若 T1 中存在从节点 n 开始的子树与 T2 相同,我们称 T2 ...

  3. MySQL数据库(6)----配置文件 my.cnf 的使用

    1. 使用源码安装好MySQL后,其配置文件一般位于 /usr/local/my.cnf,可以使用如下命令查看查看配置文件的搜索顺序: root@javis:~$ mysqld --help --ve ...

  4. The difference between a local variable and a member variable

    package com.itheima_04; /* * 成员变量和局部变量的区别: * A:在类中的位置不同 * 成员变量:类中,方法外 * 局部变量:方法中或者方法声明上(形式参数) * B:在内 ...

  5. nginx参考资料

    什么是负载均衡? 官网的入门文章中文版 love2上关注数比较高的nginx教程 什么是反向代理,什么又是正向代理? csdn上浅谈Nginx之反向代理与负载均衡 Nginx 作为 WebSocket ...

  6. C#中Invoke的用法（）-解决子线程访问主线程控件、线程安全等问题

    引自https://www.cnblogs.com/lsgsanxiao/p/5523282.html invoke和begininvoke 区别 一直对invoke和begininvoke的使用和概 ...

  7. kettle使用命令行传入数据库链接参数（ip、数据库、端口、用户、密码）执行job时子转换失败。

    使用cmd 传参数执行 kettle job 遇到错误: 错误原因,无法找到文件.... 原来使用,通过目录指定转换,好处是:当以文件资源库保存时,可以直接将文件夹复制走,直接运行就可以,不需要单独针 ...

  8. 打通版微社区（4）：微信第三方服务部署——JSP的IIS部署

    写在前面: 本机环境2008R2.tomcat8 网上搜了很多JSP的IIS部署,内容大部分是相近的,这些文章最早出现在2012的样子.大概的原理就是通过ISAPI方式对IIS进行扩展(这个扩展是to ...

  9. Javascript 中 true 和 false

    "" == false // true "0" == false // true "" == "0" //false 以 ...

  10. Linux入门-4 Linux下获取帮助

    help MAN INFO doc help <command> -h或<command> --help whatis <cmd> MAN man <comm ...