前端技术

webpack实现代码热更新

2017-09-27  本文已影响0人  西洲何在

前端开发日异月新，怎么可以使我们更好或者更舒服的去做开发呢？我想作为前端开发者来说，肯定都会思考这个问题。在没有接触node.js前，我在做一些静态页面时，经常会来回的切换到浏览器刷新页面，来查看页面效果，这种感觉实在让人崩溃，但是在接触node.js后，发现了一些非常好用的工具，webpack就是其中之一，webpack的火爆，正因为他简单的配置，丰富的集成，使得gulp和grunt都在逐渐逊色，这里我将讲讲webpack实现代码的热更新和生成一个前端工程化项目。

一.安装webpack

安装webpack的前提是需要node的npm包管理的支持，在这里我就不赘述node的安装了，大家可以自行去node(戳这里去node中文网下载和查看帮助文档)官网下载安装。

如果你已经安装好node，那么安装webpack将十分容易，任意地方，打开命令行工具，我们先进行全局安装，输入以下命令即可安装

$npm install -g webpack

附：
如果安装失败，很可能因为是使用国外的资源，导致安装失败，在这里我们可以使用一个好用的切换镜像资源的工具nrm，同样他也需要使用npm安装

$npm install -g nrm

安装好nrm后，就可以任意切换镜像了，比如使用淘宝的镜像

$nrm use cnpm

切换成淘宝镜像后安装包依然使用npm install

二.初始化一个项目

初始化一个项目是搭建工程化前端项目的基础，他会创建一个重要的文件来描述项目的一些重要信息，这个文件是一个json文件，叫package.json,初始化项目要先建一个你即将要在里面工作的文件夹,然后切换到这个文件夹。在工作文件夹打开命令行工具，输入初始化命令


$npm init

回车后，会让填写一些信息，默认回车即可

这个时候工作目录，就会多出一个文件，package.json文件。package.json文件的作用我就不赘述了，大家可以参考朴灵的《深入浅出Node.js》一书，有详细描述。在此我们再新建一个存放入口文件的目录，比如我建了一个src文件夹。然后在src文件夹依次建一个index.html文件、一个index.js文件、一个index.css文件，建好后，我们即可安装局部webpack，及一些必要模块。

三.安装局部webpack和模块以及插件

局部安装webpack，只要输入以下命令


$npm install webpack --save-dev

安装完成后，继续安装必要的模块，第一个webpack-dev-server,这个模块主要为页面提供一个服务器和实现热更新主要模块，安装依旧简单


$npm install webpack-dev-server --save-dev

安装完webpack-dev-server后，继续安装html-webpack-plugin，这个插件是用来向入口文件index.html里插入js脚本的，这样就不需要在index.html里引入js，安装依然使用npm


$npm install html-webpack-plugin --save-dev

之后再安装css加载模块，style-loader和css-loader,安装


$npm install style-loader css-loader --save-dev

这样基本完成我们所需要的模块和插件了

四.完成webpack.config.js的配置

如何使整个项目运行起来，webpack.config.js起着至关重要的作用，webpack如何加载css，如何打包文件，都是查询这个文件后才会执行的，因此正确配置webpack.config.js非常重要，在工作目录新建一个文件webpack.config.js，如下


webpack.config.js

1.在文件头部引入必要模块

let path = require('path'), //这个模块是node的自有模块，直接引用即可，它是用来解析路径的
    HtmlWebpackPlugin = require('html-webpack-plugin');

2.开始配置

module.exports = {
    entry: {
        app: path.resolve(__dirname, 'src', 'index.js')
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, 'src', 'index.html')
        })
    ],
    module: {
        rules: [
            {
                test: /\.css$/,
                loader: ['style-loader', 'css-loader'],
                include: path.resolve(__dirname, 'src')
            }
        ]
    }
};

这个是整个配置，我将逐个介绍他们的意义。

3.各个配置的意义

1.module.exports

module.exports就是提供一个向外的接口，所有的配置都挂载在module.exports上，供webpack去查询

2.entry（入口文件）和output（出口文件）

entry是用来配置入口文件的，

entry: {
        app: path.resolve(__dirname, 'src', 'index.js')
    }

这里app: path.resolve(__dirname, 'src', 'index.js')的意思是插入到入口文件index.html的js文件路径

output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
}

filename: '[name].js'这是出口文件的命名，即index.js,path: path.resolve(__dirname, 'dist')这是打包后静态资源所存放的目录文件，如果没有，webpack打包后自动创建

3.plugins插件的配置
plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, 'src', 'index.html')
        })
    ]

plugins是一个数组，接受多个插件，HtmlWebpackPlugin在前面已经提到，它是将出口文件插入到入口文件index.html的插件，template: path.resolve(__dirname, 'src', 'index.html')即是将出口文件解析到入口文件的路径。

4.module模块
module: {
        rules: [
            {
                test: /\.css$/,
                loader: ['style-loader', 'css-loader'],
                include: path.resolve(__dirname, 'src')
            }
        ]
    }

模块是一个对象，可以接受多个属性，rules是用来配置js和css等文件的规则，test接受的是一个正则表达式，判断文件的类型，loader即是加载的模块的名称，接受的是一个数组，include是解析的文件所在的目录

完成配置后，我们就可以进行页面的简单编写了。

五.开始项目的编写

这里我们将直接使用js去渲染DOM，css完成样式。

打开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>MyApp</title>
</head>
<body>
    
</body>
</html>

之后编写index.js

import './index.css'; //引入css文件

var el = document.createElement('div'),
    text = document.createTextNode( 
        'Welcome to my app!'
     );

el.appendChild(text);
el.id = 'app';
document.body.appendChild(el);

最后编写index.css文件

#app {
    color: #f00;
}

六.运行webpack-dev-server

在工作目录打开命令窗口，直接运行


$webpack-dev-server --port 3003

运行成功后，在浏览器里地址栏输入localhost:3003，查看效果，不出意外将会看到页面上的文字。

到此我们其实已经完成工程化项目的基本构造，那么如何让它进行热更新呢？其实很简单，只要把命令稍稍修改就行


$webpack-dev-server --inline --hot --port 3003

这时候重新加载页面，然后，在css文件里改改字体颜色，直接保存，你会发现，不需要刷新浏览器，也会立刻看到页面文字的颜色变了，这就实现了代码的热更新

附：
如何更加简单的使用命令，只要在起初我们创建的package.json里配置即可，package.json的内容

{
  "name": "my-app",
  "version": "1.0.0",
  "description": "构建一个舒适的前端开发环境",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/xizhouhezai/my-app.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/xizhouhezai/my-app/issues"
  },
  "homepage": "https://github.com/xizhouhezai/my-app#readme",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "css-loader": "^0.28.7",
    "html-webpack-plugin": "^2.30.1",
    "node-sass": "^4.5.3",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.18.2",
    "webpack": "^3.5.5",
    "webpack-dev-server": "^2.7.1"
  },
  "dependencies": {
    "express": "^4.15.4"
  }
}

我们只要在scripts加入

"start": webpack-dev-server --inline --hot --port 3003

最后我们只要运行


$npm run start

这只是测试环境，如何上线，我们只要运行


$webpack

这时候工作目录就会多出一个dist文件夹，我们只要把环境配置到dist，就可以运行项目了

上一篇下一篇

猜你喜欢

热点阅读