【后台管理系统】—— 开发环境的搭建之webpack的配置

最新推荐文章于 2024-04-25 17:52:06 发布
最新推荐文章于 2024-04-25 17:52:06 发布
阅读量321 收藏 1
点赞数
文章标签： vue less npm react nodejs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34235864/article/details/113788150
版权

前言：学习React16+React-Router4 从零打造企业级电商后台管理系统慕课网课程中的项目准备阶段，重点突破webpack的配置。

一、开发环境依赖

  • git -> gitee.com 课程官网的git仓库
  • webpack等 -> yarn -> nodejs
  • node-sass

二、webpack的配置

  • webpack的安装和配置
  • 系统里多个版本webpack项目共存的处理
  • webpack对各种类型文件的处理方式
  • webpack-dev-server的安装和配置

三、git的安装和项目的建立

四、Node.js和Yarn的安装

1.Yarn的介绍

  • 定位：包管理工具，替代npm
  • 安装速度快，版本锁定，缓存机制
  • Yarn的安装： 
    npm install yarn -g

    　　

五、webpack的安装和配置

1.webpack

  • 使用版本： 3.10.0 
    yarn add webpack@3.10.0 --dev
  • 多版本webpack共存解决方案

2.需要处理的文件类型

3.webpack常用模块

4.webpack-dev-server

  • 为webpack项目提供web服务
  • 使用版本：2.9.7
  • 更改代码自动刷新，路径转发 
    yarn add webpack-dev-server@2.9.7 --dev
  • 解决多版本共存问题

5.具体步骤

  1. 安装html-webpack-plugin 
    yarn add html-webpack-plugin@2.30.1 --dev

    配置：

    const HtmlWebpackPlugin = require('html-webpack-plugin');

// 处理html文件 
plugins: [
   new HtmlWebpackPlugin({
       template: './src/index.html'
   })
]
  2. 打包构建命令 
    node_modules/.bin/webpack

  3. 文件输入为./src/index.html

  4. 安装babel-loader相关 
    yarn add babel-core@6.26.0 --dev

yarn add babel-preset-env@1.6.1 --dev

yarn add babel-loader@7.1.2 --dev

    配置：

    // js语法的处理
{
   test: /\.js$/,
   exclude: /(node_modules)/,
      use: {
         loader: 'babel-loader',
         options: {
              presets: ['env']
         }
      }
},

    注意：文件输入为 entry:  './src/app.js',　

  5. 安装react(jsx)语法的处理相关 
    yarn add babel-preset-react@6.24.1 --dev

yarn add react@16.2.0 react-dom@16.2.0　

    // react(jsx)语法的处理
{
   test: /\.jsx$/,
   exclude: /(node_modules)/,
       use: {
           loader: 'babel-loader',
           options: {
               presets: ['env', 'react']
           }
       }
    },
}　

    注意：文件输入为 entry: './src/app.jsx',　

  6. 安装样式配置css-loader相关 
    yarn add style-loader@0.19.1 css-loader@0.28.8 --dev

    配置：

    // css文件的处理
{
   test: /\.css$/,
   use: [
       "style-loader",
       "css-loader"
   ]
},

  7. 安装extract-test-webpack-plugin

    它会将所有的入口chunk(entry chunks)中引用的*.css，移动到独立分离的CSS文件

    yarn add extract-text-webpack-plugin@3.0.2 --dev

    配置：

    const ExtractTextPlugin = require('extract-text-webpack-plugin');

// css文件的处理
{
   test: /\.css$/,
   use: ExtractTextPlugin.extract({
        fallback: "style-loader",
        use: "css-loader"
   })
},

plugins: [
   // 处理html文件 
   new HtmlWebpackPlugin({
       template: './src/index.html'
   })
   // 独立css文件
   new ExtractTextPlugin("css/[name].css"),
]
  8. 安装scss样式文件loader相关 
    yarn add sass-loader@6.0.6 --dev

    配置：

    // sass文件的处理
{
   test: /\.scss$/,
   use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: ['css-loader', 'sass-loader']
   })
},

    坑：sass-loader 依赖node-sass和webpack

    yarn add node-sass@4.7.2 --dev (安装出现问题，改用npm安装)

npm install --save-dev node-sass(5.0.0版本)

  9. 安装加载图片的loader相关 
    yarn add file-loader@1.1.6 url-loader@0.6.2 --dev

    功能类似于file-loader，但是在文件大小(单位byte)低于指定的限制时，可以返回一个DataURL (base64)

    // 图片的配置
{
  test: /\.(png|jpg|gif)$/,
  use: [
     {
        loader: 'url-loader',
        options: {
             limit: 8192,
             name: 'resource/[name].[ext]'
        }
     }
  ]
},

  10. 安装Font Awesome字体库文件 
    yarn add font-awesome

    引用压缩好的css文件

    //index.html
import React from 'react';
import ReactDOM from 'react-dom'

import 'font-awesome/css/font-awesome.min.css'
import './index.css'
import './index.scss'

ReactDOM.render(
    <div>
        <i className='fa fa-address-book'></i>
        <h1>Hello, world</h1>
    </div>,
    document.getElementById('app')
)

    配置：

    // 字体图标的配置
{
   test: /\.(eot|svg|ttf|woff|woff2|otf)$/,
   use: [
      {
           loader: 'url-loader',
           options: {
               limit: 8192,
               name: 'resource/[name].[ext]'
           }
      }
   ]
}

  11. 提出公共模块

    const webpack = require('webpack');

output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'js/app.js'
},

plugins: [
      // 处理html文件 
      new HtmlWebpackPlugin({
           template: './src/index.html'
      }),
      // 独立css文件
      new ExtractTextPlugin("css/[name].css"),
      // 提出公共模块 —— webpack自带插件
      new webpack.optimize.CommonsChunkPlugin({
          name : 'common',
          filename: 'js/base.js'
      })
] 

  12. 安装webpack-dev-server自动刷新

    不再重复使用node_modules/.bin/webpack命令打包构建文件

    yarn add webpack-dev-server@2.9.7 --dev

    启动命令：node_modules/.bin/webpack-dev-server

    配置：

    devServer: {

}

    Project is running at http://localhost:8080/　

    output: {
   path: path.resolve(__dirname, 'dist'),
   publicPath: '/dist/',
   filename: 'js/app.js'
},

devServer: {
   port: 8086        
}

    dist/index.html去掉/dist/前缀：src="js/app.js"

  13. package.json新增scripts配置 
    "scripts": {
      "dev" : "node_modules/.bin/webpack-dev-server",
      "dist" : "WEBPACK_ENV=online node_modules/.bin/webpack -p",
},
  14. webpack.config.js完整代码 
    const path = require('path');
const webpack           = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    entry: './src/app.jsx',
    output: {
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/dist/',
        filename: 'js/app.js'
    },
    module: {
        rules: [
            // react(jsx)语法的处理
            {
                test: /\.jsx$/,
                exclude: /(node_modules)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['env', 'react']
                    }
                }
            },
            // css文件的处理
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: "css-loader"
                })
            },
            // sass文件的处理
            {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader', 'sass-loader']
                })
            },
            // 图片的配置
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192,
                            name: 'resource/[name].[ext]'
                        }
                    }
                ]
            },
            // 字体图标的配置
            {
                test: /\.(eot|svg|ttf|woff|woff2|otf)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192,
                            name: 'resource/[name].[ext]'
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        // 处理html文件 
        new HtmlWebpackPlugin({
            template: './src/index.html'
        }),
        // 独立css文件
        new ExtractTextPlugin("css/[name].css"),
        // 提出公共模块
        new webpack.optimize.CommonsChunkPlugin({
            name : 'common',
            filename: 'js/base.js'
        })
    ],
    devServer: {
        
    }
}　　

六、代码提交

 注：项目来自慕课网 

柳柳Elena
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
详解webpack与SPA实践之开发环境搭建
08-28
主要介绍了详解webpack与SPA实践之开发环境搭建,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Webpack3 环境配置篇 | React + Webpack3 后台管理项目搭建（1）
赫拉莉的博客
09-21 1334
React + Webpack3 后台管理项目搭建（1）| webpack3 配置篇 最近的前端开发实践中，接触最多就是React后台管理的开发项目，多次对公司React项目配置进行优化升级，下面介绍的是基本的React + React-router4 + Webpack3 + less + Antd单页面应用程序的项目搭建方法。 目录 React + Webpack3 后台管理项目搭建（1...
webpack 配置 流程
gg大白的博客
09-19 711
webpack 配置
./node_modules/.bin/webpack指令出错,该如何解决???
Lmeijuan的博客
04-28 5447
很多初学者在学习webpack或者guip的过程中,尽管按照相应的指令操作,还是不可避免的出现一些小意外,导致无法运行下去. 比如在运行webpack时都会进行全局安装,然后再局部安装,安装成功后按照webpack指令: 运行指令:./node_modules/.bin/webpack. 然而却出现这样的报错信息: ’node_modules’ 不是内部或外部命令，也不是可运行的程序 或批处理文件...
C1——node+webpack搭建cesium网站
GIS特战兵
05-20 410
C1——node+webpack搭建cesium网站
webpack-dev-server使用方法
02-03 2205
webpack-dev-server使用方法 首先来回顾以下webpack的内容 首先，我们来看看基本的webpack.config.js的写法 const path=require('path') //这个配置文件，其实就是一个JS文件，通过Node中的模块操作，向外暴露了一个配置对象 module.exports={ //在配置文件中需要手动指定入口和出口 entry:path.join(__dirname,'./src/main.js'),//入口，表示要使用webpack打包哪个文件
详解Webpack + ES6 最新环境搭建与配置
08-27
主要介绍了详解Webpack + ES6 最新环境搭建与配置，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
详解webpack4.x之搭建前端开发环境
10-17
主要介绍了详解webpack4.x之搭建前端开发环境，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
webpack4.x开发环境配置详解
10-18
主要介绍了webpack4.x开发环境配置方法,结合实例形式详细分析了webpack4.x的具体安装、项目创建、打包操作等相关问题与处理技巧,需要的朋友可以参考下
webpack手动配置React开发环境的步骤
08-27
本篇文章主要介绍了webpack手动配置React开发环境的步骤，webpack手动配置一个独立的React开发环境, 开发环境完成后, 支持自动构建, 自动刷新, sass语法 等功能...感兴趣的小伙伴们可以参考一下
webpack+vue+iview搭建管理后台
01-24
前端技术Vue2+iView2.0实践-后台管理系统，利用webpack进行项目打包，为开发者提供一个完整的项目结构和案例
webpack开发服务器(webpack-dev-server)的简单配置使用
wangbin的博客
12-04 1568
webpack开发服务器(webpack-dev-server)的简单配置使用
学习笔记1--环境
ws6637790的博客
08-18 169
*【Yarn】 1.定位：包管理工具，替代 2.优点 安装速度快：服务器速度快，并行下载； 版本锁定：安装过后会形成锁文件； 缓存机制：在本地缓存，可以断网使用 3.安装 npm install -g yarn 4.语法 yarn init --- npm init yarn ...
vue运行项目出现webpack-dev-server错误解决
qq_41082746的博客
06-24 2238
解决： npm install
webpack搭建php服务器,【webpack】webpack-dev-server生猛上手——让我们来搭一个webpack的微服务器吧！...
weixin_32056343的博客
03-26 274
[导读][前言]:因为最近在搞百度地图API的时候用到了webpack的externals，才发现我之前都只是用webpack做一些搭建完项目后的“收尾工作”——即打包，而没有把它纳入到项目开发的“主体过程”中来，真是“物不尽其用”。于是就有了我今[前言]:因为最近在搞百度地图API的时候用到了webpack的externals，才发现我之前都只是用webpack做一些搭建完项目后的“收尾工作”—...
在react配置使用less的最优解
qq_45706352的博客
04-19 360
react默认支持用scss，不支持less，直接使用less时会报错，因此当使用less的时候需要进行额外配置。至于技术选型选择less或scss完全取决于你的个人偏好。你当然可以采取别的方式去实现对less的配置。但是我这里只提供了一种方式用于解决问题，主要是为了记录，便于自己日后查看。
less和scss循环生成margin和padding
最新发布
正一品程序员的博客
04-25 149
less和scss循环生成margin和padding。
npx\pnpm 镜像过期解决方法
gaohongfeng1的博客
04-19 347
到这里就可以正常使用npm命令安装需要的工具了。如( npm install -g cnpm )// 2. 关闭SSL验证。// 1. 清空缓存。
npm install CERT_HAS_EXPIRED解决方法
邓邓子的博客
04-19 456
【代码】npm install CERT_HAS_EXPIRED解决方法。
webpack搭建开发环境
10-14
要使用webpack搭建开发环境，需要进行以下步骤： 1. 安装Node.js和npm 2. 在项目根目录下初始化npm：`npm init` 3. 安装webpack和webpack-cli：`npm install webpack webpack-cli --save-dev` 4. 创建webpack配置...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值