概述

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. Angular进阶教程一

    6 AngularJS进阶 6.1数据绑定原理研究 Angular用户都想知道数据绑定是怎么实现的.你可能会看到各种各样的词汇:$watch.$apply.$digest.dirty-checking ...

  2. Java 开源博客 Solo 1.5.0 发布 - 新皮肤

    Solo 1.5.0 正式发布了!这个版本主要是加入了 一款新皮肤 next,感谢一直以来关注和支持我们的朋友! 只需一个命令即可启动(不需要安装数据库.部署容器):也可以通过 war 方式部署容器, ...

  3. Python实现冒泡，选择排序

    def bubble(num): for i in range(len(num)-1): for j in range(len(num)-i-1): if(num[j]>num[j+1]): t ...

  4. Python库安装注意事项

    由于一些python库依赖其它库或者其它组件,因此,在使用pip3命令安装python库的时候,经常会报错,告知缺失哪些组件. 但是, 开启VPN后,就没有再碰到类似错误,相关组件都是自动被安装. 因 ...

  5. Alaya Webdav Server 0.0.10 发布

    Alaya Webdav Server 0.0.10 修复了很多 bug,Webdav 'Copy' 可以使用了. Alaya 是一个提供 WebDAV 支持的 Web 服务器,支持 HTTPS 和 ...

  6. QTreeView/QTableView中利用QStandardItem实现复选框三种形态变化

    https://www.techieliang.com/2017/12/729/ 原文地址 using_checkbox_item.h /** * @file using_checkbox_item. ...

  7. Sqlserver新建随机测试数据

    USE Test --使用数据库Test(如果没有则需要新建一个) ----1.新建一个users表 create table users( uId int primary key identity( ...

  8. 关于Ubuntu16.04下phpmyadmin出现mbstring错误的正解

    1.打开终端,输入php -i | grep extension_dir 查看extension_dir的绝对路径 2.查看phpinfo,php.ini的绝对路径 3.打开php.ini文件. 设置 ...

  9. javascript进行百度换肤 和显示隐藏一个窗口的操作

    简单的运用javascript来进行百度换肤的操作 <!DOCTYPE html> <html lang="en"> <head> <me ...

  10. 深圳云栖大会人工智能专场：探索视频+AI，玩转智能视频应用

    摘要: 在人工智能时代,AI技术是如何在各行业和领域真正的发挥应用和商业价值,带来产业变革才是关键.在3月28日深圳云栖大会的人工智能专场中,阿里云视频服务技术专家邹娟将带领大家探索熟悉的视频场景中, ...