初识webpack

最新推荐文章于 2024-07-29 19:55:09 发布

weixin_33913377

最新推荐文章于 2024-07-29 19:55:09 发布

阅读量52

点赞数

文章标签： webpack json 前端 ViewUI

原文链接：https://segmentfault.com/a/1190000009084232

版权

介绍

官方文档：https://webpack.js.org/config...

Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。

准备

在开始安装webpack之间，先新建一个简单的index.html文件和entry.js文件，其中js文件作为入口文件,其他文件后续有讲解如何加入。
图片描述

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>welcome</h1>
</body>
</html>

entry.js

document.write('hello world')

安装和初始化

在开始webpack之前，默认已经安装了node,显示通过以下指令安装一个全局的webpack:

npm install -g webpack

然而使用webpack需要有一个package.json文件来管理相关包文件等信息，可通过以下命令生成，该文件会在项目根目录生成,需要根据提示填写相关的版本等信息。

npm init

在常规的项目中，一般还会将webpack安装到本项目中：

npm install --save-dev webpack

其中--save-dev指令会在package.json文件的devDependencies中增加webpack的依赖。

{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "main": "entry.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
  },
  "author": "smilen",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^2.4.1",
  }
}

配置文件

每一个webpack项目都必须有一个webpack.config.js文件，用于告诉webpack需要做什么。手动在项目根目录新建webpack.config.js。较为简单的配置如下，提供一个入口和出口，webpack根据这个来进行合理打包构建：

var path = require('path');

module.exports = {

    entry: [
        './entry.js'
    ],

    output: {
        path: __dirname,
        filename: 'bundle.js',
    },
}

entry指的是指定入口文件
output指的是打包后的文件目录以及文件名称

注意：__dirname指的是根目录。

打包构建

这时已经完成了一个简单的webpack项目，可通过以下命令来完成打包构建操作：

webpack

同时也可以通过配置npm，通过npm命令来实现打包构建，需要在package.json中增加以下配置：

  "scripts": {
    "build": "webpack"
  },

这时，就可以通过以下命令来替代webpack命令：

npm run build

Macs-MacBook-Air:SimpleDemo Zhang$ npm run build

> webpack@1.0.0 build /Users/Zhang/Documents/Code/WebpackDemo/SimpleDemo
> webpack

Hash: 8cd8a125e2535e735606
Version: webpack 2.4.1
Time: 101ms
    Asset     Size  Chunks             Chunk Names
bundle.js  2.83 kB       0  [emitted]  main
   [0] ./entry.js 75 bytes {0} [built]
   [2] multi ./entry.js 28 bytes {0} [built]

当执行完成以上指令，会在所配置的目录下（该项目为根目录），会打包生成一个bundle.js文件。这时需要在index.html中引入该文件。
注意：打包的文件不在根目录中，引入打包文件则要加入相对路径。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>welcome</h1>
    <script src="bundle.js"></script>
</body>
</html>

最后在项目目录中打开该index.html文件，会看到对应的效果。
图片描述

实时刷新

遗留问题：以上已经完成了一个简单的打包构建工作，但是，每次修改entry.js文件的时候，都需要重新执行npm run build来重新构建并且手动刷新页面才能看到更新后的效果。当项目较为庞大的时候，构建过程非常缓慢。

解决方案1：如果不想每次修改模块后都重新手动编译，那么可以启动监听模式。开启监听模式后，没有变化的模块会在编译后缓存到内存中，而不会每次都被重新编译，所以监听模式的整体速度是很快的，但是无法自动刷新页面，需要手动刷新页面。

webpack --watch

解决方案2：使用 webpack-dev-server 开发服务是一个更好的选择。它将在 localhost:8080 启动一个 express 静态资源 web 服务器，并且会以监听模式自动运行 webpack，在浏览器打开 http://localhost:8080/ 或 http://localhost:8080/webpack... 可以浏览项目中的页面和编译后的资源输出，并且通过一个 socket.io 服务实时监听它们的变化并自动刷新页面。
但是，原始文件作出改动后，webpack-dev-server会实时的编译，但是最后的编译的文件并没有输出到目标文件夹，即bundle.js文件。

安装的webpack-dev-server

npm install webpack-dev-server -g
npm install webpack-dev-server --save-dev

然后执行下来命令：

webpack-dev-server

或者可加入一些相关参数

webpack-dev-server --progress --colors

这样就可以通过默认的 http://localhost:8080 网址上打开index.html了，当修改entry.js的时候，就可以实现实时刷新了。
可用npm命令来替代webpack-dev-server指令，需要配置以下dev参数。众所周知，参数inline或者hot是实现实时刷新的参数，但是由于webpack2之后，这两个值都不设置也可以成功达到实时刷新效果。

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "dev": "webpack-dev-server --devtool eval --progress --colors --hot"
  },

webpack-dev-server 会在localhost:8080建立服务
--devtool eval 发生异常会显示行号等相关信息
--progress 显示构建进度
--colors 显示的信息中加入颜色
--hot 热加载

这时就可以通过以下命令进行启动webpack-dev-server服务了：

npm run dev

注意：你启动webpack-dev-server后，你在目标文件夹中是看不到编译后的文件的,实时编译后的文件都保存到了内存当中。因此在使用webpack-dev-server进行开发的时候都是看不到编译后的文件的
另外，就算打包的文件不在根目录中，引入打包文件时依然直接引入包文件，直接引入，不需要加入相对路径（具体原因不详），除非在config配置文件中output中设置了publicPath。

加载器

loader指的是模块加载器，因为webpack要加载除了js以外的任何资源，都需要对应的模块加载器去辅助完成。这里以css为例。
在根目录中新建一个index.css文件

p {
    color: blue;
}

而入口文件entry.js引入此css文件，修改为：

require('./index.css');
document.write('<p>hello world123</p>')

同时在webpack.config.js文件中加载相关loaders

var path = require('path');

module.exports = {

    entry: [
        './entry.js'
    ],

    output: {
        path: __dirname,
        filename: 'bundle.js',
    },

    module: {
        rules: [
        {
            test: /\.css$/,
            use: [
                "style-loader",
                "css-loader"
            ]
        }]
    }

    devServer: {

    }

}

这些loader是逆序运行的，所以css-loader会比style-loader先执行，其中而ss-loader用于读取css文件，而style-loader是用于将css内容插入html文件的header中。

插件

插件用来完成一些loader所不能完成的功能。插件的使用一般是在 webpack的配置信息plugins选项中指定。

参考

https://segmentfault.com/a/11...
http://zhaoda.net/webpack-han...

weixin_33913377

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初识webpack

介绍官方文档：https://webpack.js.org/config...Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如...
复制链接

扫一扫