1、安装好nodejs，安装过程网上找。

2、在D盘、E盘或任意一个磁盘中新建文件夹，命名为webpack_demo：

3、在webpack_demo文件下按住Shift键后点击鼠标右键，再左键点击“在此处打开命令行窗口”：

在打开的命令行窗口中键入：

npm init

name表示项目名，version表示版本等等，不一一赘述了，看字段很容易明白，一一填完或直接一路按回车键，最后出现“is this ok？”时，敲击回车键后webpack_demo的文件夹下便生成了package.json文件。

4、在命令行中分别执行以下命令，安装对应的插件（--save-dev作用是安装的插件的同时，将插件名写入package.json的devDependencies列表中）：

npm install webpack --save-dev

npm install jquery --save-dev

npm install style-loader css-loader --save-dev

npm install extract-text-webpack-plugin –-save-dev

安装完成后package.json的代码如下（name、version、description等都是在npm init步骤中手动添加而成）：

{

　　"name": "webpackdemo",

　　"version": "1.0.0",

　　"description": "a webpack demo",

　　"main": "index.js",

　　"scripts": {

　　　　"test": "echo \"Error: no test specified\" && exit 1"

　　},

　　"author": "liqiyuan",

　　"license": "ISC",

　　"devDependencies": {

　　　　"css-loader": "^0.26.1",

　　　　"extract-text-webpack-plugin": "^1.0.1",

　　　　"jquery": "^3.1.1",

　　　　"style-loader": "^0.13.1",

　　　　"webpack": "^1.14.0"

　　}

}

5、此时查看webpack_demo文件夹，会发现多出了一个文件夹：

双击打开，文件夹下的内容如下：

说明所需要的插件都已安装成功。

6、在webpack_demo文件下新建文件webpack.config.js：

编辑代码如下：

var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {

　　entry: './js/main.js',

　　output: {

　　　　path: './dist',

　　　　filename: 'bundle.js'

　　},

　　plugins: [

　　　　new ExtractTextPlugin('./style.css')

　　],

　　module: {

　　　　//加载器配置

　　　　loaders: [

　　　　　　{

　　　　　　　　test: /\.css$/,

　　　　　　　　loader:ExtractTextPlugin.extract("style-loader","css-loader")

　　　　　　}

　　　　　　// {

　　　　　　　　// test: /\.(png|jpg)$/,

　　　　　　　　// loader: 'url-loader?limit=8192'

　　　　　　// }

　　　　]

　　}

};

以上代码的意思是：

引入extract-text-webpack-plugin这个插件（用于支持打包css文件，默认只支持打包js文件），读取当前目录下js文件夹中的main.js（入口文件）内容，把对应的js和css文件打包，打包后的文件放入当前目录的dist文件夹下，打包后的css文件命名为style.css，打包后的js文件名为bundle.js。

7、webpack_demo下新建js文件夹，里面新建main.js，代码编辑如下：

require('./index/index.js');

require('./index/index2.js');

require('../css/index/index1.css');

require('../css/index/index2.css');

require('../css/common/public.css');

以上代码意思为：引入当前目录index文件夹下的index.js，index2.js，引入上一层目录css文件夹下index文件下的index1.css，index2.css和common文件夹下的public.css。

8、新建上一步中对应路径的css、js、index、common文件夹，里面分别新建对应的css或js文件，每个css、js文件里写入不同的代码。

9、窗口命令行中执行代码：

webpack

出现如下提示索命打包成功：

此时打开webpack_demo文件夹，发现多了dist文件夹，打开，里面文件如下：

10、新建一个index.html文件，只引入bundle.js和style.css：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>webpack教程</title>

    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>

    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable = no"/>

    <link rel="stylesheet" type="text/css" href="./dist/style.css">

</head>

<body>

　　<div>webpack</div>

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

</body>

</html>

双击用浏览器打开这个html，会发现入口文件main.js里面引入的所有js和css文件都已经执行了。

webpack之傻瓜式教程（转载）的更多相关文章

  1. webpack之傻瓜式教程

    接触webpack也有挺长一段时间了,公司的项目也是一直用着webpack在打包处理,但前几天在教新人的情况下,遇到了一个问题,那就是:尽管网上的webpack教程满天飞,但是却很难找到一个能让新人快 ...

  2. webpack之傻瓜式教程及前端自动化入门

    原文地址:https://www.cnblogs.com/liqiyuan/p/6246870.html 接触webpack也有挺长一段时间了,公司的项目也是一直用着webpack在打包处理,但前几天 ...

  3. MacOS安装Docker傻瓜式教程

    最近电脑越来越卡了,为了减少系统开销,以及后期维护方便,所以考虑将本地安装一些服务迁移到docker中去管理,这一切的基础是要先有docker服务,所以本文就先记录怎样在mac上安装配置docker, ...

  4. 初识springboot(傻瓜式教程)

    初识springboot(傻瓜式教程) 项目所需的版本 IDEA 2018 maven 3.x jdk-1.8 IDEA创建spring-boot项目(maven方法) 1.创建一个maven工程 点 ...

  5. 如何使用win7自带的备份还原以及创建系统镜像------傻瓜式教程

    对于经常鼓捣电脑的童鞋来说,装系统是一件极其平常的事情,不过系统装多了之后,我们会感到比较烦躁,因为每一次装系统意味着驱动的重新安装,程序的重新安装,每次这么鼓捣几次,半天时间就花在这上面了,效率是在 ...

  6. Ogre 1.7.0，VS2005编译全过程傻瓜式教程

    最近下了最新版Ogre 1.7.0,从下载到最后编译运行成功Ogre自带的Sample花了将近一下午时间. 网上有很多编译Ogre的教程,这里整理我看过的教程,加上自己的经验再详细总结一遍. 第一步: ...

  7. iOS 消息推送(APNs) 傻瓜式教程

    也可以去我的简书页面查看这篇文章 首先: 1.做iOS消息推送需要真机测试 2.做iOS消息推送需要有付费的开发者账号 是否继续看帖? 先学习一下相关的知识吧! 因为中途可能会遇到一些问题,这篇文章或 ...

  8. Windows7部署WordPress傻瓜式教程（IIS7.5+MySQL+PHP+WordPress）

    http://www.cnblogs.com/vengen/archive/2010/01/01/WordPressInstall.html

  9. VS2017 community版使用码云（gitee）的一些过程，看图学习，傻瓜式教程

    首先你得有一个gitee账号,VS2017IDE开发工具 第一步,打开VS2017,点击菜单栏上->工具->扩展与更新,如图 然后点击 联机 然后输入 gitee 回车搜索 一定要选择我圈 ...

随机推荐

  1. cc.Button

    cc.Button 1:添加按钮的方法 (1)直接创建带Button组件的节点; (2)先创建节点,再添加组件;2:按钮组件, 按钮是游戏中最常用的组件, 点击然后响应事件;3: 按钮的过渡效果:  ...

  2. 笔试算法题（15）：-1到N中包含1的数字的个数 & 连续和为N的序列

    出题:输入一个整数N,求从1到N这N个整数的十进制表示中‘1’出现的次数: 分析: 从左向右处理string表示的数字:当前数字长度为n,判断最左边一位数字字符: 如果是0,则直接递归下一位: 如果是 ...

  3. mysql主从同步，主库宕机解决方案

    链接:https://blog.csdn.net/zfl589778/article/details/51441719

  4. [Python3网络爬虫开发实战] 6-Ajax数据爬取

    有时候我们在用requests抓取页面的时候,得到的结果可能和在浏览器中看到的不一样:在浏览器中可以看到正常显示的页面数据,但是使用requests得到的结果并没有.这是因为requests获取的都是 ...

  5. 测试Mysql悲观锁

  6. cogs1752[boi2007]mokia 摩基亚 (cdq分治)

    [题目描述] 摩尔瓦多的移动电话公司摩基亚(Mokia)设计出了一种新的用户定位系统.和其他的定位系统一样,它能够迅速回答任何形如“用户C的位置在哪?”的问题,精确到毫米.但其真正高科技之处在于,它能 ...

  7. ppt_旋转抽奖_制作步骤

    1 ppt制作抽奖转盘 插入饼状图,更改比例,更改颜色(一般选取相邻的一组颜色匹配比较好看): 插入竖文本框,编辑每一个部分为特等奖.一等奖.二等奖.三等奖: 全部选中,ctrl+G组合: 添加陀螺旋 ...

  8. [luoguP1578] 奶牛浴场（DP）

    传送门 O(s2)算法 详见论文 王知昆--浅谈用极大化思想解决最大子矩形问题 我就复制你能把我怎么样QAQ #include <cstdio> #include <iostream ...

  9. 【bzoj3747】[POI2015]Kinoman - 线段树（经典）

    Description 共有m部电影,编号为1~m,第i部电影的好看值为w[i]. 在n天之中(从1~n编号)每天会放映一部电影,第i天放映的是第f[i]部. 你可以选择l,r(1<=l< ...

  10. MongoDB小结10 - update【upsert】

    upsert是一个选项,它是update的第三个参数,并不是一个方法.它是一种特殊的更新,要是没有文档符合匹配,那么它就会根据条件和更新文档为基础,创建新的文档,如有匹配,则正常更新.咱们之前见到的所 ...