一、安装和配置webpack

　　1、全局安装webpack

　　这样就安装好了webpack，可以再全局通过webpack -v来查看是否安装成功。

　　2、先创建项目目录结构，根目录是mywebpack。进入项目根目录，执行：npm init，生成package.json文件，内容就是一堆json数据，基本就是在终端里输入的信息。

　　3、进入项目根目录局部安装webpack，进入./mywebpack，执行：npm install webpack --save-dev，局部安装webpack成功了，根目录下会出现一个node_modules文件夹。

　　以后我们在根目录下通过npm安装的各种依赖包都会默认安装到这个文件夹下面。

　　然后，webpack -v可以查看webpack版本；或进入node交互环境，require("webpack")，看能不能获取到webpack

　　现在我们项目的webpack框架就准备好了，接下来我们要使用它来处理各种东西了。

　　4、进入根目录，建两个文件夹，分别为src和dist

　　（1）src文件夹：用来存放我们编写的javascript代码，可以简单的理解为用JavaScript编写的模块。

　　（2）dist文件夹：用来存放供浏览器读取的文件，这个是webpack打包成的文件。

　　在dist下建立一个index.html文件，写入以下代码

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">

    <title>Webpack Sample Project</title>

  </head>

  <body>

    <div id='root'>

    </div>

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

  </body>

</html>

　　这里引入的bundle.js 可以先不管，这个文件现在还没有，这是用webpack打包后生成的文件

　　src下建一个index.js文件，写入代码：

document.write("It works.");

　　5、在根目录新建一个webpack.config.js文件，然后开始配置：

const path = require('path');

module.exports={

    //入口文件的配置项

    entry:{

        entry:'./src/index.js'

    },

    //出口文件的配置项

    output:{

        //输出的路径，用了Node语法

        path:path.resolve(__dirname,'dist'),

        //输出的文件名称

        filename:'bundle.js'

    },

    mode:"development",//注意最新版本必须加mode，否则会报错

    //模块：例如解读CSS,图片如何转换，压缩

    module:{},

    //插件，用于生产模版和各项功能

    plugins:[],

    //配置webpack开发服务功能

    devServer:{}

}

　　6、然后在终端输入：webpack，进行打包，之后我们就可以在disc目录下看到打包生产的bundle.js文件，并能成功运行index.html文件。

　　注意：上面的mode项在最新版本是必须得加的，否则会给你报下面这个错误

二、多入口、多出口配置

const path = require('path');

module.exports={

    //入口文件的配置项

    entry:{

        entry:'./src/index.js',

        entry2:'./src/Greeter.js'

    },

    //出口文件的配置项

    output:{

        //输出的路径，用了Node语法

        path:path.resolve(__dirname,'dist'),

        //输出的文件名称

        filename:'[name].js'

    },

    mode:"development",

    //模块：例如解读CSS,图片如何转换，压缩

    module:{},

    //插件，用于生产模版和各项功能

    plugins:[],

    //配置webpack开发服务功能

    devServer:{}

}

　　在入口文件中，新增了一个entry.js的入口文件，这个文件需要手动建立，出口文件的filename，我们把原来的bundle.js修改成了[name].js

　　[name]的意思是根据入口文件的名称，打包成相同的名称，有几个入口文件，就可以打包出几个文件。

　　在终端输入 webpack 进行打包

Webpack安装和配置的更多相关文章

  1. webpack安装与配置初学者踩坑篇

    webpack是基于nodejs开发出来的前端工具 webpack可以处理js文件的依赖关系,webpack能够处理js的兼容问题,把高级浏览器不识别的语法转换成浏览器正常识别的语法 (jnlp是基于 ...

  2. webpack安装与配置（window）

    最近几天也是刚刚学习webpack工具,所以就要从安装开始我的学习的第一步.在网上搜索了找到webpack官网,在下载webpack就要先安装nodejs,在nodejs里用集成的npm下载webpa ...

  3. Webpack安装配置及打包详细过程

    引言 前端经过漫长的发展,涌现出了很多实践方法来处理复杂的工作流程,让开发变得更加简便,其中,模块化可以使复杂的程序细化成为各个小的文件,而webpack并不强制你使用某种模块化方案,而是通过兼容所有 ...

  4. webpack安装配置使用教程详解

    webpack安装配置使用教程详解 www.111cn.net 更新:2015-09-01 编辑:swteen 来源:转载 本文章来为各位详细的介绍一下关于webpack安装配置使用教程吧,这篇文章对 ...

  5. webpack学习笔记—webpack安装、基本配置

    文章结构: 什么是webpack? 安装webpack 'webpack基本配置 一.什么是webpack? 在学习react时发现大部分文章都是react和webpack结合使用的,所以在学reac ...

  6. webpack安装配置

    webpack安装 1.安装之前你必须要安装node.js,如果你没安装可以在node.js网去下载node.js 2.全局安装webpack,打开cmd输入npm install webpack - ...

  7. Webpack 2 视频教程 002 - NodeJS 安装与配置

    原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲 ...

  8. Webpack的详细配置，[Webpack中各种loader的安装配置]

    在使用webpack的时候,你是不是被以下这种报错所困扰: 注意看 黄色框中标注的 You may need an appropriate loader to handle this file typ ...

  9. webpack安装大于4.x版本(没有配置webpack.config.js)

    webpack安装大于4.x版本(没有配置webpack.config.js) webpack 输出参数-o 高版本  如果安装的webpack版本大于4+,还需要安装webpack-cli.在没有配 ...

随机推荐

  1. HDU1503(LCS,记录路径）

    Advanced Fruits Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)T ...

  2. Selenium2+python自动化65-js定位几种方法总结【转载】

    前言 本篇总结了几种js常用的定位元素方法,并用js点击按钮,对input输入框输入文本 一.以下总结了5种js定位的方法 除了id是定位到的是单个element元素对象,其它的都是elements返 ...

  3. hdu 2215 & hdu 3932(最小覆盖圆)

    Maple trees Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...

  4. MySQL存储IP地址

    mysql没有提供IP类型,常见的存储多为使用varchar类型.其实使用int型更好,主要原因是便于计算IP段. 具体应用时应设置字段类型为unsigned int.否则无法存储128.x.x.x及 ...

  5. Python与数据结构[4] -> 散列表[0] -> 散列表与散列函数的 Python 实现

    散列表 / Hash Table 散列表与散列函数 散列表是一种将关键字映射到特定数组位置的一种数据结构,而将关键字映射到0至TableSize-1过程的函数,即为散列函数. Hash Table: ...

  6. 【转】vector用法

    原博地址:http://www.cnblogs.com/wang7/archive/2012/04/27/2474138.html 在c++中,vector是一个十分有用的容器,下面对这个容器做一下总 ...

  7. 【2-SAT】【并查集】ICM Technex 2017 and Codeforces Round #400 (Div. 1 + Div. 2, combined) D. The Door Problem

    再来回顾一下2-SAT,把每个点拆点为是和非两个点,如果a能一定推出非b,则a->非b,其他情况同理. 然后跑强连通分量分解,保证a和非a不在同一个分量里面. 这题由于你建完图发现都是双向边,所 ...

  8. 【二维单调队列】BZOJ1047-[HAOI2007]理想的正方形

    [题目大意] 有一个a*b的整数组成的矩阵,现请你从中找出一个n*n的正方形区域,使得该区域所有数中的最大值和最小值的差最小. [思路] 裸的二维单调队列.二维单调队列的思路其实很简单: (1)对于每 ...

  9. [POI2018]Plan metra

    题目大意: 一棵$n(n\le5\times10^5)$个结点的树,每条边的边权均为正整数,告诉你$2\sim n-1$号结点到$1$号点和$n$号点的距离$d1[i]$和$d2[i]$.求是否存在这 ...

  10. (转)[Unity3D]计时器/Timer

    http://blog.sina.com.cn/s/blog_5b6cb9500101aejs.html 项目中管理计时器太混乱难看了,用好听点的话来说就是代码不优雅.   想了下就随手简单写了个时间 ...