webpack4.x+react+babel8.x+antd构建前端开发环境

43685945 2019-06-05 04:24:22

在此之前要先安装node.js和npm

1>新建一个文件夹，并快速初始化项目：运行npm init -y ；

2>在新建文件夹中创建目录结构：新建src(源代码)和dist(产品目录)文件夹；

3>在src文件夹中新建index.html和index.js（也可后面再新建）；

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>webpack学习</title>

    <!-- 引入打包输出的文件-->

    <script src="../dist/main.js"></script> 

</head>

<body>

    <!-- 创建一个容器，将来渲染虚拟dom会放到容器内显示 -->

    <div id="app"></div>

</body>

</html>

4>安装 webpack :运行npm i webpack webpack-cli -D/cnpm i webpack webpack-cli -D；
注意：安装cnpm的命令为 npm i cnpm -g

5>在根目录上新建webpack.config.js文件：

module.exports={

     mode:"development";   //也可以为"production"

}

注意：webpack 4.x 提供了约定大于配置的概念；目的是为了尽量减少配置文件的体积；
- 默认约定了：
- 打包的入口是`src` -> `index.js`（所以在webpack.config.js文件中可以不写入口文件，如果入口文件的名字不是index.js,则必须要写入口文件路径，假如入口文件是"main.js"）

module.exports = {

    mode : 'production',  //development是开发环境(不压缩代码) production是产品环境(压缩代码)

    entry : './src/main.js'   

}

- 打包的输出文件是`dist` -> `main.js`
- 4.x 中新增了 `mode` 选项(为必选项)，可选的值为：`development` 和 `production`;

还要注意：由于webpack是局部安装，所以webpack的打包命令是：npx webpack

6>安装webpack-dev-server实现页面的自动更新(不需要每次更新前必须先打包)，运行cnpm i webpack-dev-server -D
在packag.json文件夹中的scripts中加入：

"dev":"webpack-dev-server"

在index.html中将引入的打包文件改为根目录下的文件

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>webpack学习</title>

    <!-- 引入打包输出的文件-->

    <script src="./main.js"></script> 

</head>

<body>

    <!-- 创建一个容器，将来渲染虚拟dom会放到容器内显示 -->

    <div id="app"></div>

</body>

</html>

7>设置webpack-dev-server的配置实现自动打开浏览器：

"dev":"webpack-dev-server --open(自动打开浏览器) --port(指定端口号) --hot(热更新) --progress(打包进度) --compress(压缩) --host(指定域名)"

8>由于上面完成后浏览器显示的是我们文件夹的目录，如果想要直接打开index.html还要安装html-webpack-plugin
即运行cnpm i html-webpack-plugin -D
然后在webpack.config.js中添加



const path = require("path");//路径

const HtmlPluginWebpack = require("html-webpack-plugin");

const HtmlPlugin = new HtmlPluginWebpack({

         template : path.join(__dirname,"./src/index.html"),

         filename : 'index.html' ,//内存中生存的首页文件

})

module.exports={

     mode : 'production',  //development是开发环境(不压缩代码) production是产品环境(压缩代码)

     plugins: [

         htmlPlugin

    ]

}

现在运行[b]npm run dev即可展示index.html中的内容[/b]
另外在index.html中也可以不引用<script src="./main.js"></script>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>webpack学习</title>

</head>

<body>

    <!-- 创建一个容器，将来渲染虚拟dom会放到容器内显示 -->

    <div id="app"></div>

</body>

</html>

webpack可以自动引用

9>在项目中引入react，运行cnpm i react react-dom -D

10>安装babel插件，运行

cnpm i babel-loader @babel/core @babel/preset-env @babel/preset-react @babel/preset-stage-0 @babel/plugin-transform-runtime -D @babel/plugin-proposal-class-properties

在根目录下新建.babelrc文件

{

    "presets": ["@babel/preset-env", "@babel/preset-react"],

    "plugins":["@babel/plugin-transform-runtime","@babel/plugin-proposal-class-properties"]

}

在webpack.config.js中与plugins平级添加



module.exports={

     mode : 'production',  //development是开发环境(不压缩代码) production是产品环境(压缩代码)

     plugins: [

         htmlPlugin

     ],

     module: {//所有第三方模块的配置规则

          rules : [ //第三方匹配规则

              {test : /\.js|jsx$/,use:'babel-loader',exclude:/node_modules/},//一定要添加exclude排除项

     ]

}

11>配置css/scss/less样式：运行

cnpm i style-loader css-loader -D

cnpm i sass-loader node-sass -D

cnpm i less less-loader -D

在webpack.config.js中rules 中添加



{test : /\.css$/,use:['style-loader','css-loader']},//打包处理css样式的第三方loader

{test:/\.scss$/,use:['style-loader','css-loader','sass-loader']}, //scss样式文件解析

{test:/\.less$/,use:['style-loader','css-loader','less-loader']}, //less样式文件解析

12>配置图片，字体以及json文件：

cnpm i file-loader url-loader json-loader -D

在webpack.config.js中rules 中添加



{test : /\.jpg|png|gif|bmp$/,use:'file-loader'}, //打包处理图片样式的文件

{test:/\.ttf|woff|woff2|eot|svg|otf$/,use:'url-loader'},//打包处理字体文件得到loader

{test:/\.json$/,use:'json-loader'},//json文件解析

13>配置webpack.config.js文件，使得在引用js/jsx/json文件时可省略文件后缀名，在module平级增加



resolve: {

        extensions : ['.js','.jsx','.json'] ,  //表示这几个类型的文件可省略后缀

        alias : {

            '@' : path.join(__dirname,'./src'), //用@表示项目根目录中的src这层根路径

        }

    },

14>引入ant design，运行cnpm i antd -D
然后运行

cnpm babel-plugin-import -D   //使用 babel-plugin-import 来进行按需加载

需要在.babelrc文件中增加



"plugins":["@babel/plugin-transform-runtime","@babel/plugin-proposal-class-properties",

        ["import", { "libraryName": "antd","libraryDirectory": "es", "style": true }]],

即可实现antd的引用

15>如果需要配置主题，可将webpack.config.js文件中的less样式规则改为



{test:/\.less$/,use:[{loader:'style-loader'},{loader:'css-loader'},{loader:'less-loader',

                options: {

                    modifyVars: {

                        'primary-color': '#1DA57A',

                        // 'link-color': '#1DA57A',

                        // 'border-radius-base': '2px',

                    },

                    javascriptEnabled: true,

                }}]},//less样式文件解析

即可实现less样式文件的加载

16>注意：
可能会出现的问题有：
1）json文件大小超过500k：在.babelrc文件中与plugins平级增加

"compact": false

2）WebPack警告WARNING in asset size limit:The following asset(s) exceed the recommended size limit：
webpack.config.js文件中与plugins平级增加



performance: {

        hints:false

    },

以上基本实现了前端框架的搭建，如有问题后续更新

...全文

38 回复打赏收藏转发到动态举报

写回复

用AI写文章

切换为时间正序

请发表友善的回复…

发表回复

react v16.8 + webpack v4.x+ typescript + babel v7 + antd 环境目录 env 安装 npm install 运行(开发模式) npm run start || npm run dev 构建 npm run build env==production 打包在dist 目录下自动化最初是用...

react-project-template 如需使用 TypeScript, 请使用 typescript 分支 Have Fun !...webpack@4 babel@7 react-router-dom@5 react-redux@7 antd@4 关于 jest 单测接口mock 网络请求基于 axios 封装

项目技术栈node10.15.3 + react@16.12.0 + redux@3.7.2 + react-router@3.2.0 + webpack@4.41.2 + axios@0.19.0 + less@2.7.1 + antd@3.25.2交流QQ群：159697743项目运行git clone --depth 1 ...那么可以最好挂在一个vp

react版本升级到16，webpack版本升级4，babel升级到7，antd升级到3，同时yarn缓存下载的每个包以及happypack利用了多进程，同时还利用了缓存来重新构建重建等 Redux使用调整路由模式更改为浏览器模式前言本工程...

#基于 react、antd、dva 的前端架子ui 框架 Ant Design,状态管理 dva，而木有用它自带的 roadrc（感觉封装化太强不是很喜欢）npm installsrc components 公共组件 constants 常量 layouts 全局布局 models model ...

HTML5

39,084

社区成员

5,548

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章