webpack之傻瓜式教程（转载）
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之傻瓜式教程（转载）的更多相关文章
- webpack之傻瓜式教程
接触webpack也有挺长一段时间了,公司的项目也是一直用着webpack在打包处理,但前几天在教新人的情况下,遇到了一个问题,那就是:尽管网上的webpack教程满天飞,但是却很难找到一个能让新人快 ...
- webpack之傻瓜式教程及前端自动化入门
原文地址:https://www.cnblogs.com/liqiyuan/p/6246870.html 接触webpack也有挺长一段时间了,公司的项目也是一直用着webpack在打包处理,但前几天 ...
- MacOS安装Docker傻瓜式教程
最近电脑越来越卡了,为了减少系统开销,以及后期维护方便,所以考虑将本地安装一些服务迁移到docker中去管理,这一切的基础是要先有docker服务,所以本文就先记录怎样在mac上安装配置docker, ...
- 初识springboot(傻瓜式教程)
初识springboot(傻瓜式教程) 项目所需的版本 IDEA 2018 maven 3.x jdk-1.8 IDEA创建spring-boot项目(maven方法) 1.创建一个maven工程 点 ...
- 如何使用win7自带的备份还原以及创建系统镜像------傻瓜式教程
对于经常鼓捣电脑的童鞋来说,装系统是一件极其平常的事情,不过系统装多了之后,我们会感到比较烦躁,因为每一次装系统意味着驱动的重新安装,程序的重新安装,每次这么鼓捣几次,半天时间就花在这上面了,效率是在 ...
- Ogre 1.7.0，VS2005编译全过程傻瓜式教程
最近下了最新版Ogre 1.7.0,从下载到最后编译运行成功Ogre自带的Sample花了将近一下午时间. 网上有很多编译Ogre的教程,这里整理我看过的教程,加上自己的经验再详细总结一遍. 第一步: ...
- iOS 消息推送(APNs) 傻瓜式教程
也可以去我的简书页面查看这篇文章 首先: 1.做iOS消息推送需要真机测试 2.做iOS消息推送需要有付费的开发者账号 是否继续看帖? 先学习一下相关的知识吧! 因为中途可能会遇到一些问题,这篇文章或 ...
- Windows7部署WordPress傻瓜式教程（IIS7.5+MySQL+PHP+WordPress）
http://www.cnblogs.com/vengen/archive/2010/01/01/WordPressInstall.html
- VS2017 community版使用码云（gitee）的一些过程，看图学习，傻瓜式教程
首先你得有一个gitee账号,VS2017IDE开发工具 第一步,打开VS2017,点击菜单栏上->工具->扩展与更新,如图 然后点击 联机 然后输入 gitee 回车搜索 一定要选择我圈 ...
随机推荐
- vlmcsd-1111-2017-06-17
Source and binaries: http://rgho.st/6c6R7RwMZ 全部编译好了 https://www.upload.ee/files/7131474/vlmcsd-11 ...
- 简单的linux看门狗脚本
watchdog.sh #!/bin/bash now=`date '+%Y-%m-%d %H:%M:%S'` baseDir=$(cd `dirname $0`; pwd) sleepTime=10 ...
- 常见的awk内建变量
FS: 输入字段分隔符变量 语法: $ awk -F 'FS' 'commands' inputfilename 或者 $ awk 'BEGIN{FS="FS";}' OFS: 输 ...
- Reparameterization Trick
目录 Sample() is not differentiable Reparameterization trick Too Complex Sample() is not differentiabl ...
- LeetCode（47）Permutations II
题目 Given a collection of numbers that might contain duplicates, return all possible unique permutati ...
- [bzoj2005][Noi2010][能量采集] (容斥 or 欧拉函数)
Description 栋栋有一块长方形的地,他在地上种了一种能量植物,这种植物可以采集太阳光的能量.在这些植物采集能量后, 栋栋再使用一个能量汇集机器把这些植物采集到的能量汇集到一起. 栋栋的植物种 ...
- bzoj3262陌上花开 cdq分治入门题
Description 有n朵花,每朵花有三个属性:花形(s).颜色(c).气味(m),又三个整数表示.现要对每朵花评级,一朵花的级别是它拥有的美丽能超过的花的数量.定义一朵花A比另一朵花B要美丽,当 ...
- matplotlib的使用--折线图--入门
目录 matplotlib应用介绍 一天天气变化图 两小时随机温度图 中文显示问题 个人交往统计图 多人交往统计图 总结 介绍: 举个例子(一天天气变化图): 假设一天中每隔两个小时(range(2, ...
- W3C Blog: HTML－下一步是什么？
HTML5.1 草稿版: 地址:https://www.w3.org/TR/html51/introduction.html#a-quick-introduction-to-html 2016年3月0 ...
- Windows 10 & Game Bar & YouTube & video records
Windows 10 & Game Bar & YouTube & video records Windows 10 C:\Users\xgqfrms\Videos\Captu ...