`
_wyh
  • 浏览: 60944 次
社区版块
存档分类
最新评论

webpack基本安装和配置

阅读更多

      本文介绍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

3
1
分享到:
评论

相关推荐

    webpack基本配置案例

    在这个"webpack基本配置案例"中,我们将深入理解Webpack的核心概念和基础配置。 首先,Webpack 的核心思想是"一切都是模块",它通过加载器(Loader)将不同类型的文件转换为JavaScript模块,然后通过插件(Plugin)...

    webpack的基本原理及手动配置webpack的详细步骤

    以及我在手动配置webapck的时候遇到的一些问题以及解决方法,里面的内容主要有前端工程化,webpack的基本使用,webpack中的插件,webpack中的loader,打包发布,Source Map以及在浏览器中安装vue-devtools调试工具。...

    webpack3X基本配置

    webpack 3.X基本配置

    webpack的配置和插件的使用介绍代码

    通过以上内容,你已经了解了Webpack的基本配置和插件使用,但Webpack的功能远不止于此,还包括Source Map、externals、性能分析等高级特性。继续深入学习,可以更好地驾驭Webpack,优化你的前端项目。

    webpack基本配置

    在“webpack基本配置”中,我们通常会涉及以下几个关键部分: 1. **入口(entry)**:定义应用程序的起点,Webpack 从这个入口开始递归解析依赖并构建模块图。可以是一个字符串,表示单个入口,也可以是一个对象,...

    webpack+typescript环境配置.zip

    接下来,我们将深入探讨如何配置一个基于 Webpack 和 TypeScript 的开发环境,以及如何进行项目结构搭建和打包发布。 1. **安装依赖** 在创建新项目之前,首先确保已安装 Node.js。然后通过 `npm`(Node Package ...

    webpack前端配置案例

    以上仅是Webpack配置的基本内容,实际配置中可能会根据项目需求进行更复杂的定制。例如,配置多个入口点以支持多页面应用,通过分隔Chunk(SplitChunksPlugin)优化代码分割,或者使用ProvidePlugin全局注入模块,...

    vue1x最基本webpack配置和所需依赖包

    本篇文章将深入探讨Vue 1.x与Webpack的基本配置和相关依赖包。 1. **Vue 1.x 版本概述** Vue 1.x 是Vue.js的早期版本,虽然现在已经更新到了3.x,但在一些旧项目中仍然被使用。它提供了一个响应式的数据绑定系统,...

    webpack安装包

    Webpack 是一个前端资源模块化和打包工具,它允许开发者将应用程序分解为小块(模块),然后根据需要在浏览器中加载这些...这个“webpack-master”项目提供了一个基础的框架,便于学习和实践 Webpack 的配置和使用。

    webpack40从零配置实现简单的vue项目配置

    接下来,创建 `webpack.config.js` 文件并添加以下基本配置: ```javascript const path = require('path'); module.exports = { entry: './src/main.js', // 项目入口文件 output: { // 输出设置 filename: '...

    webpack入门配置.zip

    通过这个压缩包,你可以学习到Webpack的基本配置流程,包括创建`webpack.config.js`文件,设置入口和输出,以及管理项目依赖。在实际开发中,你可能还需要根据项目需求添加更多的loader和plugin,以支持更多的文件...

    webpack-使用配置文件.rar

    对于初学者来说,理解基础配置和掌握如何根据项目需求调整配置是非常重要的。 压缩包中的文件“t5_bf”可能是配置文件或示例项目的某个部分,但由于缺乏具体信息,无法给出更详细的解读。为了进一步了解和使用这个...

    webpack项目开发配置1

    在本篇文章中,我们将详细介绍如何配置 Webpack 项目开发环境,包括安装 Node.js、创建项目、安装 Webpack、创建 Webpack 配置文件等步骤。 Node.js 安装 在开始配置 Webpack 项目之前,需要首先安装 Node.js。...

    【JavaScript源代码】vue项目配置 webpack-obfuscator 进行代码加密混淆的实现.docx

    2. **webpack默认压缩工具uglifyjs-webpack-plugin**:基本的压缩,移除了空格和注释,但代码仍可识别。 3. **webpack-obfuscator 无参数**:即使不提供任何混淆参数,也会对变量名进行哈希处理,使得代码更难以阅读...

    webpack配置配置介绍和操作指引

    这个教程将引导你深入了解 Webpack 的配置和操作,帮助你更好地管理和优化你的前端项目。 ## 一、Webpack 基本概念 Webpack 是一个静态模块打包器,它会分析你的项目依赖,然后将这些模块打包成静态资源。Webpack ...

    webpackvue2多入口配置实例

    以下是一个基本的Webpack配置文件`webpack.config.js`的示例,展示了如何设置多入口: ```javascript const path = require('path'); module.exports = { entry: { page1: './src/page1/main.js', // 第一个入口...

    一个vue项目的webpack配置过程

    3. **编写webpack.config.js**:在根目录创建`webpack.config.js`文件,编写基本配置,包括入口、输出、模块(加载器)和插件配置。 ```javascript const path = require('path'); const MiniCssExtractPlugin =...

    简单的webpackvue组件化配置

    Webpack 是一个现代 JavaScript 应用程序的静态模块打包工具,它能够将多个文件组合...掌握这些知识点,开发者就能理解并配置一个基本的 Vue.js 项目,实现组件化开发和自动刷新功能,同时也能应对多页面应用的需求。

    【webpack_01配置】手把手从0开始启动、打包html和js文件(最简版)

    这个最简版的Webpack配置涵盖了基本的HTML和JS文件打包流程。通过Webpack,我们可以实现模块化开发,方便地管理和打包项目资源。随着项目的复杂度增加,你可以添加更多的配置项,如CSS加载器、图片加载器、优化选项...

    Webpack2在项目中的配置实践

    通过以上实践,你可以了解到 Webpack 2 在项目中的基本配置和使用方法。然而,这只是冰山一角,Webpack 还有许多高级特性,如 CommonsChunkPlugin 分割公共代码、Tree Shaking 优化代码体积、Scope Hoisting 提升...

Global site tag (gtag.js) - Google Analytics