本文介绍Webpack辅助ReactJS进行开发的简单例子。
Webpack基础详解地址:http://2914905399.iteye.com/blog/2357893
简单来说,webpack是一个模块打包工具,在 webpack 里,所有类型的文件都可以是模块,包括我们最常见的 JavaScript,及 CSS 文件、图片、json 文件等等。通过 webpack 的各种加载器,我们可以更高效地管理这些文件。
本文配置webpack并使网页上输出最简单的Hello, World!!! 。程序使用React js完成并使用了ES2015。
1,创建一个空项目,在项目目录下创建一个package.json 文件,用于项目名称,依赖等等,终端命令如下:
npm init
2, 在当前目录下安装webpack以及其它依赖,由于使用React,所以引入了react和react-dom
npm install webpack react react-dom --save-dev npm install webpack -g
有时webpack需要获取管理员权限才能安装成功。sudo su之后再install即可解决
3, 此时目录下只有package.json 和node_modules两个文件,package.json中可以看到安装过的依赖,node_modules是install时生成的。
实现简单的HelloWorld,还需要创建一个index.html和一个入口文件index.js,出于简单,我都放在根目录。index.html为空,index.js实现网页输出HelloWorld。代码如下:
import React, { Component } from 'react' import ReactDOM from 'react-dom' class HelloWorld extends Component { render() { return ( <div> Hello, World ! ! ! </div> ) } } ReactDOM.render( <HelloWorld />, document.getElementById('content') );
4, 创建webpack配置文件webpack.config.js。并进行配置:
module.exports = { entry: './index.js', output: { path: '', filename: 'bundle.js' } };
entry: 设置入口文件
output: path为webpack打包成功之后文件存放路径。 filename为webpack打包成功之后文件名称。
webpack.config.js这个名字为webpack默认的配置文件,如果不想用这个名字,可以:
webpack -config yourname
5, 安装和使用Webpack Loader。
Webpack Loader作用:
1,将React js的jsx语句转化为js语句
2,支持ES2015
3,可以是js文件通过import直接引入css等样式以及图片。
等等等。
因为我需要使用Reactjs和ES2015,所以安装命令如下:
npm install babel-core babel-loader --save-dev npm install babel-preset-react babel-preset-es2015 --save-dev
具体实现需要在webpack-config.js中加入module属性。
module.exports = { entry: './index.js', output: { publicPath: "", filename: 'bundle.js' }, module: { loaders: [ { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' } ] } };
6,在终端输入webpack。会看见生成了一个bundle.js文件。这个文件是webpack的entry文件打包成功之后得到的,存放路径和名字都是自己在webpack.config.js中设置的。
webpack
7,修改之前创建的index.html文件,并引入打包生成的bundle.js文件。代码如下
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <div id="content"></div> <script src="bundle.js"></script> </body> </html>
8,打开index.html,将会看到我们需要的 Hello,World!!!。但是每次我们修改文件并运行时都需要在终端输入webpack再刷新页面。这种方式比较麻烦。此时我们需要使用webpack-dev-server来实现页面自动刷新
(1)安装webpack-dev-server
npm install webpack-dev-server --save-dev npm install webpack-dev-server -g
(2)在package.json中添加
{ ...... "scripts": { "start": "webpack-dev-server --inline" }, ...... }
(3)配置完成,在终端输入:
npm start
在浏览器里面输入http://localhost:8080/ 页面上出现Hello,World!!!。 修改main.js中的Hello,World!!!为Hello,Curry!!!,等待两秒,不需要手动刷新,页面自动刷新,出现Hello,Curry!!!。 完成!!!
附参考网站:http://www.jianshu.com/p/418e48e0cef1
https://www.zfanw.com/blog/webpack-tutorial.html
相关推荐
在这个"webpack基本配置案例"中,我们将深入理解Webpack的核心概念和基础配置。 首先,Webpack 的核心思想是"一切都是模块",它通过加载器(Loader)将不同类型的文件转换为JavaScript模块,然后通过插件(Plugin)...
以及我在手动配置webapck的时候遇到的一些问题以及解决方法,里面的内容主要有前端工程化,webpack的基本使用,webpack中的插件,webpack中的loader,打包发布,Source Map以及在浏览器中安装vue-devtools调试工具。...
webpack 3.X基本配置
通过以上内容,你已经了解了Webpack的基本配置和插件使用,但Webpack的功能远不止于此,还包括Source Map、externals、性能分析等高级特性。继续深入学习,可以更好地驾驭Webpack,优化你的前端项目。
在“webpack基本配置”中,我们通常会涉及以下几个关键部分: 1. **入口(entry)**:定义应用程序的起点,Webpack 从这个入口开始递归解析依赖并构建模块图。可以是一个字符串,表示单个入口,也可以是一个对象,...
接下来,我们将深入探讨如何配置一个基于 Webpack 和 TypeScript 的开发环境,以及如何进行项目结构搭建和打包发布。 1. **安装依赖** 在创建新项目之前,首先确保已安装 Node.js。然后通过 `npm`(Node Package ...
以上仅是Webpack配置的基本内容,实际配置中可能会根据项目需求进行更复杂的定制。例如,配置多个入口点以支持多页面应用,通过分隔Chunk(SplitChunksPlugin)优化代码分割,或者使用ProvidePlugin全局注入模块,...
本篇文章将深入探讨Vue 1.x与Webpack的基本配置和相关依赖包。 1. **Vue 1.x 版本概述** Vue 1.x 是Vue.js的早期版本,虽然现在已经更新到了3.x,但在一些旧项目中仍然被使用。它提供了一个响应式的数据绑定系统,...
Webpack 是一个前端资源模块化和打包工具,它允许开发者将应用程序分解为小块(模块),然后根据需要在浏览器中加载这些...这个“webpack-master”项目提供了一个基础的框架,便于学习和实践 Webpack 的配置和使用。
接下来,创建 `webpack.config.js` 文件并添加以下基本配置: ```javascript const path = require('path'); module.exports = { entry: './src/main.js', // 项目入口文件 output: { // 输出设置 filename: '...
通过这个压缩包,你可以学习到Webpack的基本配置流程,包括创建`webpack.config.js`文件,设置入口和输出,以及管理项目依赖。在实际开发中,你可能还需要根据项目需求添加更多的loader和plugin,以支持更多的文件...
对于初学者来说,理解基础配置和掌握如何根据项目需求调整配置是非常重要的。 压缩包中的文件“t5_bf”可能是配置文件或示例项目的某个部分,但由于缺乏具体信息,无法给出更详细的解读。为了进一步了解和使用这个...
在本篇文章中,我们将详细介绍如何配置 Webpack 项目开发环境,包括安装 Node.js、创建项目、安装 Webpack、创建 Webpack 配置文件等步骤。 Node.js 安装 在开始配置 Webpack 项目之前,需要首先安装 Node.js。...
2. **webpack默认压缩工具uglifyjs-webpack-plugin**:基本的压缩,移除了空格和注释,但代码仍可识别。 3. **webpack-obfuscator 无参数**:即使不提供任何混淆参数,也会对变量名进行哈希处理,使得代码更难以阅读...
这个教程将引导你深入了解 Webpack 的配置和操作,帮助你更好地管理和优化你的前端项目。 ## 一、Webpack 基本概念 Webpack 是一个静态模块打包器,它会分析你的项目依赖,然后将这些模块打包成静态资源。Webpack ...
以下是一个基本的Webpack配置文件`webpack.config.js`的示例,展示了如何设置多入口: ```javascript const path = require('path'); module.exports = { entry: { page1: './src/page1/main.js', // 第一个入口...
3. **编写webpack.config.js**:在根目录创建`webpack.config.js`文件,编写基本配置,包括入口、输出、模块(加载器)和插件配置。 ```javascript const path = require('path'); const MiniCssExtractPlugin =...
Webpack 是一个现代 JavaScript 应用程序的静态模块打包工具,它能够将多个文件组合...掌握这些知识点,开发者就能理解并配置一个基本的 Vue.js 项目,实现组件化开发和自动刷新功能,同时也能应对多页面应用的需求。
这个最简版的Webpack配置涵盖了基本的HTML和JS文件打包流程。通过Webpack,我们可以实现模块化开发,方便地管理和打包项目资源。随着项目的复杂度增加,你可以添加更多的配置项,如CSS加载器、图片加载器、优化选项...
通过以上实践,你可以了解到 Webpack 2 在项目中的基本配置和使用方法。然而,这只是冰山一角,Webpack 还有许多高级特性,如 CommonsChunkPlugin 分割公共代码、Tree Shaking 优化代码体积、Scope Hoisting 提升...