webpack之傻瓜式教程

接触webpack也有挺长一段时间了,公司的项目也是一直用着webpack在打包处理,但前几天在教新人的情况下,遇到了一个问题,那就是:尽管网上的webpack教程满天飞,但是却很难找到一个能让新人快速入手的、接地气的、傻瓜式的教程,自己手把手教又太浪费时间。想了一想,决定自己写一篇webpack的傻瓜式教程,旨在教会尚未了解webpack的人迅速入手。

对于webpack的概念、用途、好处等等一律省略,想了解的上网搜索即可,这里直接演示如何新建一个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文件都已经执行了。

时间: 2024-10-11 10:44:27

webpack之傻瓜式教程的相关文章

初识springboot(傻瓜式教程)

初识springboot(傻瓜式教程) 项目所需的版本 IDEA 2018 maven 3.x jdk-1.8 IDEA创建spring-boot项目(maven方法) 1.创建一个maven工程 点击Create New Project 选择新项目的SDK,按图中步骤操作.第一次创建会要求选择jdk位置 按图中顺序填写GroupId和ArtifactId,点击next 接下来会看到IDEA已经帮我们填写好项目名了,也就是我们填写的ArtifactId,直接finish. finish后IDEA

Ogre 1.7.0,VS2005编译全过程傻瓜式教程

最近下了最新版Ogre 1.7.0,从下载到最后编译运行成功Ogre自带的Sample花了将近一下午时间. 网上有很多编译Ogre的教程,这里整理我看过的教程,加上自己的经验再详细总结一遍. 第一步:准备好如下所有东西: 1.VS2005 + SP1补丁包. 我用的是VS2005(VC8).一定要打上SP1补丁包(几百兆的那个补丁包...),否则无法编译Ogre 2.Ogre 1.7.0,官网链接https://sourceforge.net/projects/ogre/files/ogre/1

添加react-native-icons中文傻瓜式教程

icon的好处我就不多说了,直接看教程: 上图是英文版教程,我们按着他的步骤来做:1,先打开xcode,这不用教了吧 对着你的项目右键选择Add Files to"里面显示的是你的项目名称": 2,选择路径node_modules ? react-native-icons? ios ? addReactNativeIcons.xcodeproj 点Add 3,选中项目目录,右边的Build Phases ? Link Binary With Libraries,并点击+,如图: 4,如

GitHub傻瓜式教程(一、创建仓库)

一个小小码农的崛起从git开始 一下步奏都是在拥有GitHub账号的前提下进行... 工具:GitHub for Windows 在操作git的过程中有可能失败,那时因为你没有创建密钥 新建仓库 在Web端新建仓库(创建完成之后会生成仓库地址) ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 在本地新建仓库并上传(上传完生成仓库地址) ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

GitHub傻瓜式教程(二、对本地仓库中修改后的文件做同步上传)

前一片博客讲了本地仓库的创建,现在是不是想写写代码分享呢? 博客中涉及的git命令 GUI的操作 最初美好 添加自己的新代码,同步到本地仓库(123.txt) 将本地仓库中的代码提交到github仓库中 欣赏结果 代码行操作 初始状态 添加自己的代码文件(456.txt) 命令行操作 最后的结果

关于window上的github 上传本地文件--傻瓜式教程

因为自己一直也搞不懂,网上到处找了很多资料, 参考一些好的转过来,然后集合到一起,整理一下. 第一步:创建Github新账户 第二步:新建仓库 第三部:填写名称,简介(可选),勾选Initialize this repository with a README选项,这是自动创建REAMDE.md文件,省的你再创建. 第四步:安装window 版本Github bash程序, 第五步:打开Git bash,输入以下命令生成密钥来验证身份 ssh-keygen -C '[email protecte

CentOS系统 Amoeba+MySql主从读写分离配置 适合新手傻瓜式教程!-----仅供参考!

废话不说,直接开始: 一.安装mysql的三种方式,这里采用第2种(安装方式不再详解,请参照) http://www.cnblogs.com/babywaa/articles/4837946.html 1.rpm安装2.源码安装3.通用二进制源码安装 环境准备 192.168.5.10 master1 192.158.5.20 slave1 二.配置master服务器,192.168.5.101.第一步:登陆mysql,给root账号添加密码     //参考命令:SETPASSWORD = P

分享“傻瓜”式教程~怎么看YouTube的方法

YouTube又称油管,优土鳖,是世界上最大的视频分享和上传网站,根据最新的Alexa排名,YouTube已经晋升全球第二了,第一不用说大家都知道. 在国内与 YouTube 类似的网站有不少, 优酷.B站.爱奇艺等等,但每一家又都有不同的特色.YouTube 则不同,它的用户群体非常庞大,除了中国等少数几个国家之外,全世界的人都可以访问这个网站,而它也确实垄断了很多国家的自主平台. 上几个牛逼数据: 1.每分钟有300小时的YouTube视频被上传 2.每天有数量达30亿的视频被观看 3. 借

navicat 导入execl数据 傻瓜式教程

需求:将execl中的数据导入到指定表中几个字段数据 1.选中表右键--->选择导入向导 选择Excel点击下一步 下一步 直接下一步 因为有表直接下一步 点击下一步 下一步 点击开始 出现这个恭喜你成功了! 原文地址:https://www.cnblogs.com/zhangdke/p/12425026.html