React技术栈——webpack

YorkChen 发布于2019-08-19 18:41 / 2681人阅读

摘要：一直在用，也能完美满足目前业务需求。我厂的也有大量的贴合业务线。最近在看，要打通的技术栈，学习是必不可少的了。配置好文件后，下面命令可以监听文件变化在配置文件里一样可以实现在做网页开发时候，需要用到服务器，提供了安装很简单

一直在用fis3，也能完美满足目前业务需求。我厂的scrat也有大量的feature贴合业务线。

最近在看React，要打通React的技术栈，学习Webpack是必不可少的了。

从npm上安装很简单：

npm install webpack -g

Webpack特色：

模块化，支持异步和同步
Loader，把各种文件拆分成模块的支持
更机智的编译
插件系统，提供各色各样的插件，毫不逊色的其他打包工具，要什么价什么

简单demo

先上第一个demo：

cats.js

var cats = ["dave", "henry", "martha"];
module.exports = cats;

app.js

var cats = require("./cats");
console.log("cats")

webpack登场：

webpack ./app.js app.bundle.js

这命令可以cats.js打包进app.js里面,最后生成app.bundle.js

利用配置文件来操作webpack

-webpack.config.js

module.exports = {
    entry: "./src/app",
    output: {
        path: "./bin",
        filename: "app.bundle"
    }
}

配置完后，在文件夹直接webpack即可

使用loader

loader应该是webpack的预加载工具

module.exports = {
    entry: "./src/app.js",
    output: {
        path: "./bin",
        filename: "app.bundle.js"
    },
    module: {
        loaders: [{
            test: /.js$/,
            exclude: /node_moudles/,
            loader: "babel-loader"
        }]
    }
}

使用plugins

module.exports = {
    entry: "./src/app.js",
    output: {
        path: "./bin",
        filename: "app.bundle.js"
    },
    module: {
        loaders: [{
            test: /.js$/,
            exclude: /node_moudles/,
            loader: "babel-loader"
        }]
    },
    plugins: [
        new webapck.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            },
            output: {
                comments: false
            }
        })
    ]
}

CONFIGURATION OBJECT CONTENT

可以编写js，不仅仅是个json对象

entry

基本语法：
{
    context: _dirname + "/app",
    entry: "./entry",
    output: {
        path: _dirname + "/dist",
        filename: "bundle.js"
    }
}

传入object时
{
    entry: {
        page1: "./page1",
        page2: ["./entry1", "./entry2"]
    },
    output: {
        filename: "[name].bundle.js",
        chunkFilename: "[id].bundle.js"
    }
}

output

multiple entries
{
    entry: {
        app: "./src/app.js",
        search: "./src/search.js"            
    },
    output: {
        filename: "[name].js",
        path: __dirname + "/built"            
    }
}

//outpu: ./built/app.js  ./built/search.js

output.pubicPath

适用于类似CDN匹配需求
可添加hash绕过缓存机制
output: {
    path: "/home/project/cdn/assets/[hash]",
    publicPath: "http://cdn.example.com/assets/[hash]/"
}

Watch

webpack有个很牛逼的地方，热刷新。

配置好文件后，下面命令可以监听文件变化

webpack --watch

在配置文件里一样可以实现：

module.exports = {
    entry: {
        app: "./src/app.js"
    },
    output: {
        filename: "bundle.js",
    },
    watch: true
}

在做网页开发时候，需要用到服务器，webpack提供了webpack-dev-server

安装很简单:

npm install webpack-dev-server -g

demo:

webpack-dev-server --host 0.0.0.0 --port 8080 --inline

云服务器 GPU云服务器技术栈全栈技术 js技术栈 webpack

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79876.html

React技术栈实现XXX点评App demo

摘要：项目的架构也是最近在各种探讨研究。还求大神多指点项目技术总结技术栈项目结构探究初体验关于项目中的配置说明项目简单说明开发这一套，我个人的理解是体现的是代码分层职责分离的编程思想逻辑与视图严格区分。前端依旧使用技术栈完成。项目地址：https://github.com/Nealyang/R...技术栈：react、react-router4.x 、 react-redux 、 webp...

wslongchen 2019-08-21 16:24 评论0 收藏0
webpack工程化集成React技术栈（一）

项目开始前，我们先聊一聊关于项目的一些说明。该项目起始于2017年初，当时公司主要技术栈为gulp+angular，鉴于react的火热的生态，在公司决定研发bss管理系统时选用react开发，目的也是为react native打下基础，以解决后期公司大前端技术栈的逐步成熟。（当时没有选择vue开发的主要原因是weex生态还不够特别成熟），既然决定换新，项目的构建也跟着一起换，从gulp转向火热的...

tianhang 2019-08-22 14:47 评论0 收藏0
React 和 ES6 工作流之 Webpack的使用（第六部分）

摘要：在上面的列表中，是自解释型的。我们将使用后者。调整文件的内容到这一步，这个应用就具备热刷新的功能。下一步，更新文件中的到现在为止，如果你在控制台运行压缩文件将被创建并且放在路径下面。这是React和ECMAScript2015系列文章的最后一篇，我们将继续探索React 和 Webpack的使用。下面是所有系列文章章节的链接： React 、 ES6 - 介绍（第一部分） Rea...

Mr_houzi 2019-08-20 17:59 评论0 收藏0
React 和 ES6 工作流之 Webpack的使用（第六部分）

摘要：在上面的列表中，是自解释型的。我们将使用后者。调整文件的内容到这一步，这个应用就具备热刷新的功能。下一步，更新文件中的到现在为止，如果你在控制台运行压缩文件将被创建并且放在路径下面。这是React和ECMAScript2015系列文章的最后一篇，我们将继续探索React 和 Webpack的使用。下面是所有系列文章章节的链接： React 、 ES6 - 介绍（第一部分） Rea...

yunhao 2019-08-01 17:10 评论0 收藏0