webpack构建React应用二：webpack的安装及基础使用

最新推荐文章于 2024-04-26 09:45:22 发布

tony_xf

最新推荐文章于 2024-04-26 09:45:22 发布

阅读量284

点赞数

分类专栏： javascript 文章标签： webpack react npm webpack构建 web前端

本文链接：https://blog.csdn.net/u011025083/article/details/74990029

版权

javascript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

安装webpack

用npm安装webpack

npm install webpack -g

此时 Webpack 已经安装到了全局环境下，可以通过命令行 webpack -h 查看相关指令，通常我们会将webpack安装到项目依赖，这样就可以使用本地版本的webpack

上一章，我们初始化了blog项目，接下来进入目录

npm install webpack --save-dev
npm info webpack //查看webpack版本信息
npm install webpack@2.2.1 --save-dev //安装指定版本

如果要使用webpack开发工具，要单独安装webpack-dev-server

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

webpack-dev-server是一个小型的node.js Express服务器,它使用webpack-dev-middleware中间件来为通过webpack打包生成的资源文件提供Web服务。它还有一个通过Socket.IO连接着webpack-dev-server服务器的小型运行时程序。webpack-dev-server发送关于编译状态的消息到客户端，客户端根据消息作出响应。

webpack-dev-server有两种模式支持自动刷新——iframe模式和inline模式

1.在iframe模式下：页面是嵌套在一个iframe下的，在代码发生改动的时候，这个iframe会重新加载
2.在inline模式下：一个小型的webpack-dev-server客户端会作为入口文件打包，这个客户端会在后端代码改变的时候刷新页面

webpac-dev-server支持Hot Module Replacement，即模块热替换，在前端代码变动的时候无需整个刷新页面，只把变化的部分替换掉

webpack的基本使用

一，在blog目录下新建webpack配置文件webpack.config.js。

const path = require('path');
module.exports = {
    entry: "./src/entry.js",  //入口文件路径
    output: {
        path: '/dist/',  //输出文件目录
        filename: "bundle.js", //输出文件名
        publicPath: '/dist/'  //访问路径
    }
}

二，在blog目录下新建文件夹src，打开src新建文件entry.js。
在这里我们先写入一段测试代码console.log('hello world')

聪明的你会发现，上面配置文件中的entry，指向的就是我们创建的js文件。没错，entry就是需要构建项目的入口文件，output对应的是构建完成之后的输出文件。

三，在blog目录下创建文件index.html。

<!DOCTYPE html>
<html>
    <head>
        <title>csmall触屏版</title>
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">     
        <meta charset="utf-8">             
        <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">     
        <meta content="yes" name="apple-mobile-web-app-capable">     
        <meta content="black" name="apple-mobile-web-app-status-bar-style">     
        <meta content="telephone=no" name="format-detection">
        <meta name="author" content="tony@jentian.com">
        <meta name="copyright" content="Copyright ©tony@jentian.com 版权所有">
        <meta name="revisit-after" content="1 days">
        <meta name="keywords" content="">
        <meta name="description" content="">
    </head>
    <body>
        <div id="app"></div>
        <script src="./dist/bundle.js"></script>
    </body>
</html>

四，打开文件packeage.json进行编辑，如下图。
示例图03

五，运行npm run dev
示例图04

^_^运行成功，接下来在浏览器中输入http://localhost:888/ ，按f12就可以在控制台那里看到输出的hello world了！

下章，继续在这个基础上去完善！

tony_xf

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
webpack构建React应用二：webpack的安装及基础使用

安装webpack用npm安装webpack npm install webpack -g此时 Webpack 已经安装到了全局环境下，可以通过命令行 webpack -h 查看相关指令，通常我们会将webpack安装到项目依赖，这样就可以使用本地版本的webpack上一章，我们初始化了blog项目，接下来进入目录 npm install webpack --save-dev
复制链接

扫一扫

专栏目录