webpack的简单配置
本人刚开始也不会写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了。
/*
*@内容: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配置已经完成了,你可以安心写你的别的代码了
webpack的简单配置的更多相关文章
- webpack前端简单配置
每次用webpack创建项目时,总是要安装一堆包,还要配置一系列文件解析规则,webpack打包规则等,烦不胜烦.网上找的很多webpack配置里面很多里面的配置或者引入包都是被弃用的,因此自己总结了 ...
- 使用webstorm+webpack构建简单入门级“HelloWorld”的应用&&引用jquery来实现alert
使用webstorm+webpack构建简单入门级"HelloWorld"的应用&&构建使用jquery来实现 1.首先你自己把webstorm安装完成. 请参考这 ...
- webpack + vuejs 基本配置(一)
开始之前 本文包含以下技术,文中尽量给与详细的描述,并且附上参考链接,读者可以深入学习: 1.webpack2.Vue.js3.npm4.nodejs —- 这个就不给连接了,因为上面的连接都是在你实 ...
- webpack react基础配置一
简单介绍webpack react基本配置,入门型: 环境配置: 依赖nodejs,官网下载最新版的nodejs:nodejs.org/en 安装完nodejs npm便自动集成了,通过npm安装其 ...
- react+webpack开发环境配置
react是目前非常热门的前端框架,提倡组件化开发.所谓的组件,简单理解,就是一个独立的页面部件(包括页面模版,样式,逻辑等),它是一个独立的整体. webpack,是一个模块打包工具,其主要功能,就 ...
- webpack 4 简单介绍
webpack是什么? webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler). 为什么要使用webpack呢? 随着web技术的发展,前端开发不再仅仅是 ...
- [转] vue&webpack多页面配置
前言 最近由于项目需求,选择使用vue框架,webpack打包直接使用的vue-cli,因为需要多页面而vue-cli只有单页面,所以就决定修改vue-cli的配置文件来满足开发需求. html-we ...
- vue.js+webpack在一个简单实例中的使用过程demo
这里主要记录vue.js+webpack在一个简单实例中的使用过程 说明:本次搭建基于Win 7平台 Node.js 安装官网提供了支持多种平台的的LTS版本下载,我们根据需要来进行下载安装.对于Wi ...
- webpack中babel配置 --- runtime-transform和babel-pollfill
webpack - babel配置 babel是一个javascript编译器,是前端开发中的一个利器.它突破了浏览器实现es标准的限制,使我们在开发中可以使用最新的javascript语法. 通过构 ...
随机推荐
- 转:Redis使用认证密码登录
Redis默认配置是不需要密码认证的,也就是说只要连接的Redis服务器的host和port正确,就可以连接使用.这在安全性上会有一定的问题,所以需要启用Redis的认证密码,增加Redis服务器的安 ...
- maven私服nexus搭建(windows)
1.下载nexus 地址:https://www.sonatype.com/download-oss-sonatype 下载相应版本的zip包. 2.安装nexus 下载完成后,解压到本地任意目录. ...
- dubbo+zookeeper+springmvc+mybatis+shiro+redis架构
内容管理(CMS)系统,包括内容管理,栏目管理.站点管理.公共留言.文件管理.前端网站展示等功能: 在线办公(OA)系统,主要提供简单的流程实例. Jeesz提供了常用工具进行封装,包括日志工具.缓存 ...
- 基于TypeScript的FineUIMvc组件式开发(开头篇)
了解FineUIMvc的都知道,FineUIMvc中采用了大量的IFrame框架,对于IFrame的优缺点网上也有很多的讨论,这里我要说它的一个优点“有助于隔离代码逻辑”,这也是FineUIMvc官网 ...
- 130行C语言实现个用户态线程库——ezthread
准确的说是除掉头文件,测试代码和非关键的纯算法代码(只有双向环形链表的ADT),核心代码只有130行左右,已经是蝇量级的用户态线程库了.把这个库取名为ezthread,意思是,这太easy了,人人都可 ...
- Palindrome Number 2015年6月23日
题目: 判断一个数是不是回文数 Determine whether an integer is a palindrome. Do this without extra space. 思路:借助上一道求 ...
- .Net程序员学用Oracle系列(29):PLSQL 之批量应用和系统包
1.批量数据操作 1.1.批量生成数据 1.2.批量插入数据 2.批量生成脚本 3.生成数据字典 4.常见系统包 4.1.DBMS_OUTPUT 4.2.DBMS_RANDOM 4.3.其它系统包及常 ...
- Unity游戏程序员面试题及解答
典型的一些如手写排序算法.一些基本数学问题,在此就不列举了.以下整理出一些代表性的.有参考价值的题,真实面试题,附有本人的解答,欢迎讨论. 题1.指出下列哪些属于值类型? int System.Obj ...
- 今天重装系统后,Wdows更新提示“windows update当前无法检查更新,因为未运行服务。您可能需要重新启动计算机”
到百度搜了常用的解决方法,就是用命令提示符,但对我的情况不管用,提示“拒绝访问”.后来在08绿软站的一篇文章中找到了解决办法.原文如下(我本人也是用的第四种方法解决的): 试了下面几种解决方法,第四种 ...
- js循环给li绑定事件实现 点击li弹出其索引值 和内容
代码如下: html代码 <ul> <li>房产</li> <li>家居</li> <li>二手房</li> < ...