webpack 搭建 react

最新推荐文章于 2022-11-26 17:07:44 发布

原创最新推荐文章于 2022-11-26 17:07:44 发布 · 178 阅读

0 ·

CC 4.0 BY-SA版权

React 专栏收录该内容

7 篇文章

订阅专栏

本文深入探讨Webpack作为模块化工具的角色，以及其在代码打包、合并与压缩方面的强大功能。对比Gulp，Webpack不仅实现了多文件到单文件的转换，还支持多种文件格式的处理，如JS、CSS、HTML等。通过配置loader，Webpack能够处理非JS文件，实现从开发到发布的全流程自动化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

webpack

基于nodeJS,来实现模块化的

gulp自动化构建工具，打包合并压缩重命名等…

webpack其实也是一套自动化构建工具，在打包代码的时候也是跟gulp很想的

webpack功能相对多

左边比较多的文件（模块），也比较多的格式（js,css,html,jsx,scss）

右边文件比较少，大部分都是转为JS格式，还有一些图片格式

webpack其实处理各种类型的文件，最终想把他们尽可能的转为JS类型的文件（打包，合并，压缩）

webpack 多变少（一个）多进少出

gulp 多变多多进多出

webpack它默认只能处理JS类型文件，它不自带处理其他非JS文件的功能
如果你想webpack处理非JS类型文件，必须安装其他第三方插件来实现，webpack里面这种插件称之为loaders(加载器)

loader = 处理各种非JS类型文件

gulp要拓展功能需要装第三方插件

gulp-sass
gulp-minify
gulp-concat

开发是在entry里面,发布是在output文件夹

安装

在根目录下新建webpack.config.js

gulp gulpfile.js
webpack webpack.config.js

用npm安装webpack的依赖包,全局安装一次，本地也安装一次

npm install gulp -g //全局
npm install gulp    //本地


npm install webpack -g
npm install webpack-cli -g
npm install webpack

往配置文件里面写对应的配置

四大概念

入口(entry)
输出(output)
loader
插件(plugins)

entry

跟我们的gulp的gulp.src()，入口其实就是要导入需要处理的文件，放文件名

在webpack.config.js同级目录下，新建entry文件夹

// 配置参数
module.exports = {
    // 入口 把index.js导入进来处理
    entry: './entry/index.js'
};

output

在webpack.config.js同级目录下，新建output文件夹

const path = require('path');
// 配置参数
module.exports = {
    // 入口 把index.js导入进来处理
    entry: './entry/index.js',
    output: {
        // 写一段路径，寻找output文件夹
        path: path.resolve(__dirname, 'output'),
        // 在output文件夹里面导出文件名为bundle.js
        filename: 'bundle.js'
    }
};

在入口文件夹entry的index.js里面写入以下代码

import $ from "jquery";//记得先安装 npm install jquery
$("body").html("helloworld");

编译

在webpack.config.js文件夹的命令行里面执行webpack命令,如果成功的话会在output文件夹下生成一份新的bundle.js

webpack

require.js模块化，分开模块管理项目，并且能重复使用模块

webpack = gulp + requirejs

既做打包合并也做模块化，相对于gulp，它就是更偏重于模块化

vue-cli基于webpack,它就的模块化就是基于webpack的

要实现vue的组件

因为.vue组件是非JS类型文件，我们需要安装vue-loader来处理

npm install vue-loader
npm install sass-loader
npm install html-loader
npm install css-loader
npm install json-loader

配置loader

安装完对应的loader之后，还需要在webpack.config.js文件里面进行配置

这些loader都是帮你处理不同类型的文件(非JS类型文件)，test是正则，匹配文件名字，use是加上你对应loader的名字

module: {
    rules: [{
        test: /\.vue$/,
        use: 'vue-loader'
    }, {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
    }, {
        test: /\.png|jpg|jpeg$/,
        use: ['url-loader']
    }]
},