WEBPACK简单学习笔记

简介: WEBPACK简单学习笔记

 

文章目录

webpack以前大概粗略看过,现在再回顾学习一下。

入门

简介

webpack是一个module bundler,个包含前端的项目,里面可能有多个 .js, 多个 .css , 多个静态图片, 多个其他前端资源。

一些 js 资源彼此之前存在依赖关系,当一个页面需要加载多个 .js 的话,也会拖累整个页面的加载速度。

所以为了解决这个问题, 如图所示,webpack 就把左边的各种各样的静态资源,打包成了一个所谓的 assets. 这样浏览器加载起来就快多了。

安装 webpack

创建一个项目目录:
E:\project\webapack_demo
用镜像方式全局安装webpack:
cnpm install -g webpack@1.13.2

之前已经装过了,所以直接运行:

webpack

image.png

一堆参数,OK,webpack安装完成。

入门实例

在项目目录下建立一个a.js,输出“Hello webpack”。

document.write("hello webpack");

运行打包命令:

webpack a.js bundle.js

image.png

这样a.js就被打包到了bundle.js中

index.html中引用bundle.js:

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

直接用浏览器打开index.html,

image.png

配置文件方式

上一个方式是把a.js打包,可以直接采用配置的方式。

webpack.config.js:

module.exports = {
  entry: './a.js',
  output: {
    filename: 'bundle.js'
  }
};

再次运行:

直接就可以访问,和上一个效果一样。

webpack-dev-server

在前面是直接打开html,接下来用的webpack-dex-server是启动一个服务器的方式,从服务器上打开index.html。

安装

ebpack 是用 cnpm 安装的 1.32.2,考虑到兼容性, webpack-dev-server 也不会安装最新版本,而是与之兼容的版本: webpack-dev-server@1.15.0。

运行如下命令进行全局安装

cnpm install -g webpack-dev-server@1.15.0

运行
webpack-dev-server --open

会自动打开与 http 协议关联的浏览器,并显示默认的 index.html 页面。

image.png

image.png

热更新

webpack-dev-server 支持热更新。 所谓的热更新,即在 webpack.config.js 中的 entry 文件 ( a.js ) 发生了改变之后,会自动运行 webpack, 并且自动刷新页面,立即看到修改之后的效果。

为了做到这一点,需要修改 webpack.config.js 文件。

var webpack = require('webpack')

因为 webpack 模块是全局的,在某些情况下,通过这种方式导入不能够被识别,需要进行一次链接:

npm link webpack

不然,

image.png

把 webpack.config.js 文件的内容更新:

var webpack = require('webpack')
module.exports = {
    entry: './a.js',
    output: {
        filename: 'bundle.js'
    },
   plugins:[
        new webpack.HotModuleReplacementPlugin()
    ],
   devServer: {
        port:8088,
        inline:true,
        hot:true
    }
}

重新启动,

image.png

修改a.js中的内容,可以实时看到浏览器更新。

image.png

npm 方式启动

前面的方式,是直接运行 webpack-dev-server 的方式,不过大都数的项目,都会通过npm 的方式运行。

初始化

运行如下命令进行 package.json 配置文件的初始化

npm init -y

-y 的意思是都同意~ 就不用挨个挨个手动敲打回车了

image.png

增加脚本

在package.json中增加脚本:“dev”: "webpack-dev-server --open"

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "main": "a.js",
  "scripts": {
    "dev": "webpack-dev-server --open"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "webpack": "^1.13.2"
  },
  "devDependencies": {},
  "description": ""
}
运行
访问

访问测试地址:http://localhost:8088/

image.png

多个入口文件

有时候,会不止一个js文件,这时候就需要配置多个入口文件。

修改a.js:

document.write("hello webpack from a.js<br>");

新建b.js:

document.write("hello webpack from b.js<br>");

修改配置文件webpack.config.js:

module.exports = {
    entry: {
        bundle1: './a.js',
        bundle2: './b.js'
    },
    output: {
        filename: '[name].js'
    },
    devServer: {
        port:8088
    }
}

修改 index.html:

分别引用两个打包后的文件:

<html>
    <head>
        <script src="bundle1.js"></script>
        <script src="bundle2.js"></script>       
    </head>
</html>

运行测试:

image.png

image.png

BABEL-LOADER

ES6

ES6 的全称是 ECMAScript 6.0,是下一代的 javascript 语言标准。

因为当前 javascript 标准 (ES5) 对于开发大型的 javascritp 应用支持力度不足够,所以才会推出一个 ES6,期望 js 在大型企业开发领域也有所斩获。(这玩意儿以前真没见过)

babel 安装

运行如下命令进行安装。

npm install --save-dev babel-loader@6.2.7 babel-core@6.18.0 babel-preset-latest@6.24.1

image.png

a.js

语法使用 ES6 的写法,这个是无法直接在 浏览器使用的,需要转换为 ES5 才能够使用。

const name = 'ES6'
document.write(`hello ${name}`)
package.config.js
module.exports = {
    entry: './a.js',          //入口
    output: {
        filename: 'bundle.js'    //出口
    },
    devServer: {
        port:8088
    },
    module: {
        loaders: [
            {
                test: /\.js$/,            //表示仅仅转换 .js 文件
                loader: 'babel',          //使用babel loader进行 es6 转换
                query:{ 
                    presets: ['latest']     //latest 表示用最新的语法规则进行
                }
            }
        ]
    }
}
index.html
html>
    <head>
        <script src="bundle.js"></script>
    </head>
</html>
运行 webpack

首先运行 webpack, 会把 a.js 转换为 bundle.js 。

运行
npm run dev

image.png

行,webpack先搞到这吧。见过两三次,还真没用过,以后用到的时候再接着学。

webpack中文文档

参考:

【1】、http://how2j.cn/k/webpack/webpack-start/1776.html

【2】、http://how2j.cn/k/webpack/webpack-config/1777.html

【3】、http://how2j.cn/k/webpack/webpack-npm/1783.html

【4】、http://how2j.cn/k/webpack/webpack-webpack-dev-server/1778.html

【5】、http://how2j.cn/k/webpack/webpack-multiple-entry/1779.html

【6】、http://how2j.cn/k/webpack/webpack-babal-loader/1780.html


目录
相关文章
|
2月前
|
缓存 前端开发 API
《Webpack5 核心原理与应用实践》学习笔记-> webpack插件开发基础
《Webpack5 核心原理与应用实践》学习笔记-> webpack插件开发基础
31 0
|
2月前
|
前端开发 JavaScript 测试技术
《Webpack5 核心原理与应用实践》学习笔记-> webpack的loader运行与调试
《Webpack5 核心原理与应用实践》学习笔记-> webpack的loader运行与调试
27 0
|
2月前
|
存储 缓存 JavaScript
《Webpack5 核心原理与应用实践》学习笔记-> webpack的loader开发技巧
《Webpack5 核心原理与应用实践》学习笔记-> webpack的loader开发技巧
35 1
|
2月前
|
缓存 监控 JavaScript
《Webpack5 核心原理与应用实践》学习笔记-> webpack极致性能优化
《Webpack5 核心原理与应用实践》学习笔记-> webpack极致性能优化
28 1
|
2月前
|
前端开发 JavaScript
《Webpack5 核心原理与应用实践》学习笔记-> webpack代码压缩
《Webpack5 核心原理与应用实践》学习笔记-> webpack代码压缩
29 0
|
2月前
|
监控 IDE 开发工具
《Webpack5 核心原理与应用实践》学习笔记-> webpack性能优化技巧
《Webpack5 核心原理与应用实践》学习笔记-> webpack性能优化技巧
41 0
|
2月前
|
JavaScript 前端开发 API
《Webpack5 核心原理与应用实践》学习笔记-> webpack并行构建
《Webpack5 核心原理与应用实践》学习笔记-> webpack并行构建
43 0
|
2月前
|
前端开发 测试技术
《Webpack5 核心原理与应用实践》学习笔记-> webpack核心配置结构
《Webpack5 核心原理与应用实践》学习笔记-> webpack核心配置结构
46 1
|
2月前
|
JavaScript 前端开发 Windows
《Webpack5 核心原理与应用实践》学习笔记-> 构建Electron
《Webpack5 核心原理与应用实践》学习笔记-> 构建Electron
20 1
|
6月前
|
JavaScript 前端开发 API
webpack学习笔记(原理,实现loader和插件)下
webpack学习笔记(原理,实现loader和插件)
49 0

相关产品

  • 云迁移中心