【Web前端基础】webpack如何配置

2021-02-07 09:49发布

站内问答 / Web前端
1371 3 3
发送
3条回答
kitidog2016
2楼 · 2021-02-07 18:15

本人刚开始也不会写webpack配置，刚开始在网上搜索了了一些，看的也是刚刚理解，所以准备自己写下来，已作纪念和贡献给像我一样不会配置的“童鞋”们！

1、创建webpack配置文件

　　在项目文件下创建一个webpack.config的js文件。

　　

2、配置文件创建好了，我们就开始正式配置webpack了。

　　1、我们要安装nodejs,应为webpack基于nodejs，nodejs可以点击这里下载；

　　2、安装完nodejs之后，我们打开命令窗口，找到你的项目文件，在项目文件webpack.config.js文件所在的目录下

　　　　输入npm install webpack --save-dev（下载webpack依赖插件到本地项目中），下载完成之后，在你们的项目文件中（与webpack.config.js文件同级目录下）会自动创建node_modules文件夹，里面装的就是所有要的本项目要用的依赖插件（当然，现在只有一个webpack插件），我们先用到什么先下载什么插件，如果有需要后面再下载。

 

　　说明：下图为在项目文件下，打开命名窗口，输入安装webpack插件

　　

　　说明：下图是下载webpack完成时

 

　　

 

　　说明：下图为项目文件下自动创建的node_modules

 　　

 

　　3、完成以上步骤之后，我们开始真正的配置webpack了。

　　　　　　

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
/*
 *@内容：webpack的配置
 *@作者：web前端小白
 *@时间：2016/7/4
 * */
 
var webpack = require('webpack');
moudle.exports = {
 
    //配置入口文件，入口文件可以以对象的形式配置，也可以以数组的形式配置,后缀名可以省略
    /*
     * 对象形式配置入口
     * */
    //entry:{
    //    index:'./index'       //'./index.js'
    //},
    /*
     * 数组形式配置入口
     * */
    entry: [
        './index'       //'index.js'
    ],
    //输出文件出口
    output: {
        /*
         输出路径，在这我们要手动创建一个文件夹，名字可以自己命名，
         输出的文件路径是相对于本文件的路径
         * */
        path: './dist',  //输出路径
        filename: '[name].bundle.js'     //输出文件名，文件可以自己定义，[name]的意思是与入口文件的文件对应，可以不用[name]，
    },
    /*
     * 标题：加载器（loaders）
     * 作用：需要下载不同别的加载器，如css，js，png等等
     * */
    loaders: [
        {test: /\.js?$/, loaders: ['babel-loader']} //babel加载器可以把jsx的语法转换为js的语法，也可以把es6的语法标准转换es5的语法标准
        /*
         * 你可以在这配置别的加载器，写法是一样的
         * */
 
    ],
    /*
     *
     * */
    resolve: {
        /*
         * 别名配置，配置之后，可以在别的js文件中直接使用require('d3')，将导入的文件作为一个模块导入到你需要的项目中，不用配置别也可会当作模块导入项目中，只是你要重复写路径而已。
         * */
        alias: {
            'd3': 'd3/d3.min.js'
        }
    }　　
}

4、以上是配置webpack的代码，配置完成之后，在你webpack.config.js文件所在的目录下打开命令窗口（可以借鉴第一步），输入webpack/webpack -w

 （编译，没改动一次代码，要重新再次输入webpack进行编译 / 自动编译，改动代码并保存之后，可以自动进行编译），希望对像我一样的小白有所帮助。

 

结语：就这样简单的webpack配置已经完成了，你可以安心写你的别的代码了


水默
3楼 · 2021-02-18 11:20

/webpack.config.js

module.exports= {

       entry: '', // 入口配置

       output: {}, // 输出配置

       module: {}, // 放置loader加载器，webpack本身只能打包commonjs规范的js文件，用于处理其他文件或语法

       plugins: [], // 插件，扩展功能

       // 以下内容进阶篇再涉及

       resolve: {}, // 为引入的模块起别名

       devServer: {} // webpack-dev-server

};


征戰撩四汸
4楼 · 2022-05-25 17:13

webpack是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)

1、在项目根目录中，创建名为 webpack.config.js 的 webpack 配置文件，并初始化如下的基本配置：

// 使用 Node.js 中的导出语法，向外导出一个 webpack 的配置对象module.exports = {

  mode: 'development' //mode 用来指定构建模式。可选有development和production}

webpack.config.js 是 webpack 的配置文件。webpack 在开始打包构建之前，会先读取这个配置文件，

并基于我们在配置文件中给定的配置，对项目进行打包，并生成dist文件夹，存储打包后的项目文件。

注意：由于 webpack 是基于 node.js 开发出来的打包工具，因此在它的配置文件中，支持使用 node.js 相关

的语法和模块进行 webpack 的个性化配置。

2、在 package.json 的 scripts 节点下，新增 dev 脚本如下：

"scripts": {
    "dev": "webpack",//scripts下的脚本可以通过npm run运行，如npm run dev，实际上是执行npm run webpack serve
    "build": "webpack --mode production"
  },
  

3、在终端中运行 npm run dev 命令，启动 webpack 进行项目的打包构建

相关问题推荐

  • 现在的web开发的要求高吗？2020-11-01 21:57
    回答 120

    相对前几年来说，要高上不少了，毕竟入行的人也是越来越多了，基础的工作对应想要参与的人群基数越来越大，但是对于高端人才的需求还是很多，人才还是相对稀缺性的。所以，想要学web或者其他技术也一样，别等，别观望。web前端就业方向特别多包括web前端开发...

  • 相对定位和绝对定位的区别是什么呢2021-04-09 11:10
    回答 25

    相对定位和绝对定位是定位的两种表现形式，区别如下：一、主体不同1、相对定位：是设置为相对定位的元素框会偏移某个距离。2、绝对定位：absolute 脱离文档流，通过 top,bottom,left,right 定位。二、特点不同1、相对定位：在使用相对定位时，无论是否进行移...

  • 抓包是什么意思？2020-04-01 17:36
    回答 7
    已采纳

    抓包（packet capture）就是将网络传输发送与接收的数据包进行截获、重发、编辑、转存等操作，也用来检查网络安全。抓包也经常被用来进行数据截取等。抓包可以通过抓包工具来查看网络数据包内容。通过对抓获的数据包进行分析，可以得到有用的信息。目前流行的...

  • 前端常用的框架有哪些？2020-11-27 10:54
    回答 89

    常用的前端框架有Bootstrap框架、React框架、Vue框架、Angular框架、Foundation框架等等

  • 前端自学的效果怎么样2020-11-19 13:46
    回答 65
    已采纳

    前端是目的就业前景非常不错的一个计算机技术，但是自学的话还是有一定难度的，网络上自学是碎片化的，同时互联网技术跟新换代快，自己的话比较吃力也学习不到最新的技术。

  • SSR 是什么意思？2020-03-20 18:56
    回答 6

    SSR就是一台服务器，可以利用 SSR 在远程的服务器上配置 SSR，使其能够成为 SSR 节点，这样本地电脑或者其它设备利用 SSR 节点实现 VPN 或者远程上网及游戏加速等方面。ShadowsocksR（简称 SSR）是 Shadowsocks 分支，在 Shadowsocks 的基础上增加了一些数据...

  • 现在计算机培训都有什么课程？2020-10-31 14:36
    回答 52
    已采纳

    计算机培训方向比较多，建议找适合自己的方向选择培训编程类：JAVA、WEB、Python、C/C++、C#等测试类：软件测试运维类：云计算、网络安全设计类：UI设计、3D建模等

  • echarts 图表类型设置为time 时 ，设置2021-01-07 11:14
    回答 11

    1、代码判断xAxis: {type: 'time',splitLine: {show: false},interval: 3600, // 设置x轴时间间隔axisLabel: {formatter: function(value, index) {return liangTools.unix2hm(value)}}},首先要把xAxis 显示类型设置成time，然后设置对应X轴......

  • 移动跨平台开发框架有哪些HTML5移动框架 2022-04-01 18:57
    回答 8

    HTML5 + CSS + JavaScript 开发 跨平台重用代码 

  • miniMobile移动端框架有什么特点HTML5移动框架 2022-04-01 18:57
    回答 4

    采用rem单位自动响应,并提供独有栅格化系统快速定义宽高、边距节省css代码量,同时总结各大型移动端网页,提供一套ui颜色搭配规范,尺寸规范,字体规范等。

  • 求推荐界面比较漂亮的移动开发框架HTML5移动框架 2022-03-15 16:12
    回答 10

    iView UI、ioni、SUI

  • 移动端开发用什么JS框架好HTML5移动框架 2022-03-11 18:19
    回答 6

     jQTouch 

  • 现在移动端开发都用的什么框架HTML5移动框架 2022-03-11 18:19
    回答 4

    如果只是普通的移动端用vue react 或者dva 如果是要编译成小程序什么的或者混生 就用uni-app（对应vue语法）taro（对应react） 或者纯原生 这个没有限制的，自己怎么舒服怎么来

  • 为什么说atom和sublime都是前端开发者用的HTML编辑器 2022-01-06 15:12
    回答 4

    因为可以运用在网页和小程序的开饭中，而且开源，用着便宜，企业都很喜欢

  • 前端开发用的文本编辑器有哪些？HTML编辑器 2022-01-06 15:10
    回答 10

    一、Visual Studio Code下载地址：https://code.visualstudio.com/微软在2015年4月30日Build 开发者大会上正式宣布了 Visual Studio Code 项目：一个运行于 Mac OS X、Windows和 Linux 之上的，针对于编写现代 Web 和云应用的跨平台源代码编辑器。Visual Stud...

  • 如何循环淡入淡出图片css样式 2021-12-08 11:25
    回答 9

    jQuery自带淡入淡出效果 https://www.w3school.com.cn/jquery/jquery_fade.asp 看看这个 

没有解决我的问题，去提问