资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/webpack4详细教程，从无到有搭建react脚手架（一）

webpack4详细教程，从无到有搭建react脚手架（一）

zhkai / 1082人阅读

摘要：是一个现代应用程序的静态模块打包器，前端模块化的基础。作为一个前端工程师切图仔，非常有必要学习。官网的文档非常的棒，中文文档也非常给力，可以媲美的文档。建议先看概念篇章，再看指南，然后看和配置总览。

webpack 是一个现代 JavaScript 应用程序的静态模块打包器，前端模块化的基础。作为一个前端工程师（切图仔），非常有必要学习。

webpack官网的文档非常的棒，中文文档也非常给力，可以媲美vue的文档。建议先看概念篇章，再看指南，然后看API和配置总览。看完指南教程后，需要自主动手练习才能更加有影响，这里记录下我搭建react开发环境的过程

准备工作 安装webpack 
yarn add webpack webpack-cli -D
创建配置目录结构 
config
    webpack.common.js
    webpack.dev.js
    webpack.prod.js

scripts
    build.js  // 构建模式脚本
    start.js  // 开发模式脚本

src
    index.js

package.json
先尝试一个简单配置 配置启动脚本命令 
package.json
...
"license": "MIT",
+ "scripts": {
+     "start": "node ./scripts/start.js",
+     "build": "node ./scripts/build.js"
+ },
"devDependencies": {
    "webpack": "^4.35.2",
    "webpack-cli": "^3.3.5"
}
...
编写webpack配置, 以 src/index.js 作为主入口，以 build为打包后的目录 
config/webpack.common.js

output path字段这里配置的绝对路径

        const path = require("path");

        module.exports = {
            entry: "./src/index.js",
            output: {
                path: path.resolve(__dirname, "../build"),
                filename: "bundle.js"
            }
        }
编写开发模式运行脚本 
scripts/build.js
        const webpack = require("webpack");
        const webpackConfig = require("../config/webpack.common.js");

        webpack(webpackConfig, (err, stats) => {
            if(err || stats.hasErrors()){
                console.log("编译失败");
            }
        });

webpack node接口文档： https://www.webpackjs.com/api...

在入口编写一点内容 
src/index.js
    
    console.log("hello")
执行 yarn build 命令，生成打包目录 

运行生成的 `bundle.js`

配置开发服务器 - webpack-dev-server 安装dev服务器和合并配置工具 
    yarn add webpack-dev-server webpack-merge -D
改写webpack配置文件, common文件导出一个可传参数的基本配置生成器, prod和dev文件使用webpack-merge将通用配置和各自模式下的配置进行合并导出 
config/webpack.common.js
        
        const path = require("path");

        function webpackCommonConfigCreator(options){
            /**
            * options: 
            *      mode // 开发模式
            */

            return {
                mode: options.mode,
                entry: "./src/index.js",
                output: {
                    filename: "bundle.js",
                    path: path.resolve(__dirname, "../build"),
                }
            }
        }

        module.exports = webpackCommonConfigCreator;

config/webpack.prod.js
        const webpackConfigCreator = require("./webpack.common");
        const merge = require("webpack-merge");

        const config = {

        }

        const options = {
            mode: "production"
        }

        module.exports = merge(webpackConfigCreator(options), config);

config/webpack.dev.js
        const webpackConfigCreator = require("./webpack.common");
        const merge = require("webpack-merge");

        const config = {

        }

        const options = {
            mode: "development"
        }

        module.exports = merge(webpackConfigCreator(options), config);

script/build.js
        const webpack = require("webpack");
        const webpackConfig = require("../config/webpack.prod.js");

        webpack(webpackConfig, (err, stats) => {
            if(err || stats.hasErrors()){
                console.log("编译失败");
            }
        });

yarn build 打包，输出正常

配置 webpack-dev-server 
config/webpack.dev.js

这里的contentBase选项是server模式下的output，开启server后，webpack会实时编译代码到内存

        ...
        + const path = require("path");

        const config = {
            + devServer: {
            +     contentBase: path.join(__dirname, "../dist")
            + }
        }
        ...

scripts/start.js
        const webpack = require("webpack");
        const webpackDevServer = require("webpack-dev-server");
        const webpackConfig = require("../config/webpack.dev.js");

        const compiler = webpack(webpackConfig);
        const options = Object.assign({}, webpackConfig.devServer, {
            open: true
        })
        const server = new webpackDevServer(compiler, options);

        server.listen(3000, "127.0.0.1", () => {
            console.log("Starting server on http://localhost:8080");
        })
运行命令 yarn start, 浏览器自动弹出窗口，访问 localhost:3000/bundle.js

相关链接

webpack4详细教程，从无到有搭建react脚手架（二）

webpack4详细教程，从无到有搭建react脚手架（三）

webpack4详细教程，从无到有搭建react脚手架（四）

源码github仓库： https://github.com/tanf1995/W...

云服务器 GPU云服务器 家用云服务器搭建详细教程 阿里云服务器搭建终端详细教程 阿里云服务器搭建app详细教程 webpack4教程

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

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

相关文章

  • webpack4详细教程，从无到有搭建react脚手架（二）

    摘要：相关链接详细教程，从无到有搭建脚手架一配置插件，这两个插件基本上是必配的了介绍每次打包时清理上次打包生成的目录官网指南关于这个插件部分内容已经过时没有更新，按照官网配置会出错，所以参考上这个插件文档来配置，文档地址生成打 相关链接 webpack4详细教程，从无到有搭建react脚手架（一） 配置插件 clean-webpack-plugin、 html-webpack-plugin...

    cuieney 评论0 收藏0

  • webpack4详细教程，从无到有搭建react脚手架（四）

    摘要：相关链接详细教程，从无到有搭建脚手架一详细教程，从无到有搭建脚手架二详细教程，从无到有搭建脚手架三管理打包后目录结构打包结构如下修改配置通过相对目录对资源命名前加上目录名，效果后面的步骤在这里需要安装一个大型的包，以为例安装为第三 相关链接 webpack4详细教程，从无到有搭建react脚手架（一） webpack4详细教程，从无到有搭建react脚手架（二） webpack4详细...

    chnmagnus 评论0 收藏0

  • webpack4详细教程，从无到有搭建react脚手架（三）

    摘要：相关链接详细教程，从无到有搭建脚手架一详细教程，从无到有搭建脚手架二安装配置创建，效果安装配置创建效果配置模式修改配置现在编译后的由动态内联在中，需要分离到单独的文件安装插 相关链接 webpack4详细教程，从无到有搭建react脚手架（一） webpack4详细教程，从无到有搭建react脚手架（二） Css 安装loader yarn add style-loader css...

    Sunxb 评论0 收藏0

  • 学习从零开始搭建React脚手架

    摘要：写在前面准备学习一下和相关的东西，官方的脚手架看起来太繁琐，所以打算自己来搭建一个，参考了这个文档从零搭建全家桶框架教程步骤上都差不多第一步，依赖总览完成到我现在半成品的过程中，目前完成开发模式的相关操作，添加了按需加载的地步。 写在前面 准备学习一下react和webpack相关的东西，官方的脚手架看起来太繁琐，所以打算自己来搭建一个，参考了这个文档从零搭建React全家桶框架教程;...

    cod7ce 评论0 收藏0

  • 如何搭建一个基于react、webpack4、babel7的项目（一）

    摘要：对的工作流程有点模糊，以及据官方文档称的升级，性能得到了极大的提升，而还是用的，于是决定从头开始搭建一个适合团队的脚手架。保证各文件获得一致的文件编码和缩进效果。这些在后面文章中，都会一个个涉及到，此处不做详细展开。 前言 写前端项目这么久了，以前用的 dva 框架，后来用过 create-react-app 框架，都需要针对团队做一些定制化的修改。对 webpack 的工作流程有点模...

    IamDLY 评论0 收藏0

发表评论

登陆后可评论

0条评论

zhkai

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<