webpack的教程

Zhuxy 发布于2019-08-19 17:14 / 562人阅读

摘要：有时候觉得一个工具的学习成本还是很大的，所以唯一的感觉就是随随便便放弃一个工具是多么的难。指定执行的方法命令。这时候我们再看一下目录会多出来一个目录说明你的处女终于破了。

唠唠嗑

前几天在学习webpack时,踩过很多坑，也听过webapck是多么的哔哔哔哔~~，本人学习的工具有很多,比如sass的初级工具compass,自动化工具gulp,grunt,一起其他杂七杂八的工具。有时候觉得一个工具的学习成本还是很大的，所以唯一的感觉就是随随便便放弃一个工具是多么的难。鉴于webpack死粉所说的,不全用webpack的人不是一个好前端,我想我会送你 老中医歌里面的一句--一顿五毒排逼掌,把脑袋打放屁~ -.-~ 所以后面会介绍使用gulp和webpack的结合使用。

废话不多说,小伙子，让我们来一起谈谈webapck;

webapck的基本认识

webpack 最大的好处就是, 在前端的世界里,js才是王~简而言之就是, 其他的资源都可以在js里面引入,并且打包,比如: CSS, .SCSS, .LESS, .JSX,image 等等其他的资源。当然，为了处理scss,jsx在浏览器端的使用，还需要另外一个重要的东西,xxx-loader;
就像这样:

//在main.js
require("./style.css");
require("./c.css");
require("./a.js");

另外就是他的module打包的工具, 无论你是在后端的commonJS 的写法, 还是browser 端的CMD/AMD,requireJS/seaJS等,统统一键搞定。接下来让我使用webpack吧. just do it;

初识webpack

我们一步一步来:

下载webpack

npm install webpack -g;

这样就可以在gitBash里面使用webpack命令;
webpack的基本命令:

// webpack 命令行的几种基本命令

$ webpack  // 最基本的启动webpack方法
$ webpack -w // 提供watch方法，实时进行打包更新
$ webpack -p // 对打包后的文件进行压缩，提供production
$ webpack -d // 提供source map，方便调试。

建立工程目录:
为了方便，我们来建立一个简单的目录:
大家可以按照我下面的目录建立~

我们来解释一下:
example.js就是你写的主文件，可以各种引用。
webpack.config.js就是webpack的核心文件.

webpack.config.js的配置:
请先下载:
npm i loader-css file-loade;
这两个模块都会用到

var path = require("path");
module.exports = {
     entry: {
      example:"./example.js"
    }, //演示单入口文件
    output: {
        path: path.join(__dirname, "out"), //打包输出的路径 
        filename: "[name].entry.js", //打包后的名字
    },
    module: {
        loaders: [  //这就是前面所提到的loader
            {
                test: /.css$/,
                loader:"css"
            },
            { test: /.png$/, loader: "file-loader" }
        ]
    }
    
};

其中
test用来指定执行哪些文件的后缀.。
loader指定执行的方法命令。
按照上面的写就可以了，你也可以直接贴到你的代码中去.

我们看看example.js有哪些东西~

//example.js
require("./style.css");
require("./a.js");

就这俩个
然后我们看看a.js里面写的是什么哈~

//a.js
console.log("this is my first webpack project");

运行命令

webpack

接下来请紧盯着你的bash，你会看见一些花花绿绿的带出出来了, 这时候请在心里默念三遍:
no error!
no error!
no error!
如果最后，你的屏幕会是这样的话

恭喜啊~隔壁的老王，你的webpack好了。这时候我们再看一下目录:

会多出来一个目录:out!!!, 说明你的处女webpack终于破了。

我就呵呵了,还有谁!!!(Ps:小智)

GPU云服务器云服务器 webpack教程 webpack4教程 webpack的作用 webpack的cdn

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78329.html

webpack-demos：全网最贴心webpack系列教程和配套代码

摘要：全网最贴心系列教程和配套代码欢迎关注个人技术博客。所以我花费了个多月整理了这份教程，一共分成节，每节都有讲解，并且准备了配套代码。奈何深感水平不够，只有一腔热情，所以直接开放了教程和源码。 webpack-demos：全网最贴心 webpack 系列教程和配套代码欢迎关注个人技术博客：godbmw.com。每周 1 篇原创技术分享！开源教程(webpack、设计模式）、面试刷题（偏前...

LMou 2019-08-23 12:25 评论0 收藏0
webpack 教程资源收集

学习的过程中收藏了这些优秀教程和的项目，希望对你有帮助。 github地址, 有不错的就更新官方文档中文指南初级教程 webpack-howto 作者：Pete Hunt Webpack 入门指迷作者：题叶　 webpack-demos 作者：ruanyf 一小时包教会 —— webpack 入门指南作者：VaJoy Larn　　 webpack 入门及实践作者：...

Backache 2019-08-21 14:05 评论0 收藏0
webpack4系列教程（十）：总结

摘要：传送门系列教程一初识系列教程二创建项目，打包第一个文件系列教程三自动生成项目中的文件系列教程四处理项目中的资源文件一系列教程五处理项目中的资源文件二系列教程六使用分割代码系列教程七使用系列教程八使用审查代码系列教程九开发环境和生产环境在前端开发日益复杂的今天，我们需要一个工具来帮助我们管理项目资源，打包、编译、预处理、后处理等等。webpack的出现无疑是前端开发者的福音，我的博文只...

hqman 2019-08-26 13:29 评论0 收藏0
webpack4详细教程，从无到有搭建react脚手架（一）

摘要：是一个现代应用程序的静态模块打包器，前端模块化的基础。作为一个前端工程师切图仔，非常有必要学习。官网的文档非常的棒，中文文档也非常给力，可以媲美的文档。建议先看概念篇章，再看指南，然后看和配置总览。 webpack 是一个现代 JavaScript 应用程序的静态模块打包器，前端模块化的基础。作为一个前端工程师（切图仔），非常有必要学习。 showImg(https://segment...

zhkai 2019-08-23 18:35 评论0 收藏0
webpack 教科书式入门教程

摘要：教程最近刚用完又来捣鼓捣鼓，这只是个简单的新手入门教程不多说注意安装前检查的安装目录路径是否存在空格，建议安装在无空格文件夹目录下。 Webpack4.x 教程最近刚用完 gulp 又来捣鼓捣鼓 webpack ，这只是个简单的新手入门教程...不多说；注意：安装webpack前检查nodejs的安装目录路径是否存在空格( Program Files (x86) )，建议安装在无空格...

13651657101 2019-08-19 18:12 评论0 收藏0
webpack4 系列教程: 前言

摘要：课程地址全部课程地址立即进入课程源码目录截至按照知识点，目录分成了个文件夹之后还会持续更新。个人网站原文链接系列教程前言本文档已经过时，最近内容请看：https://godbmw.com/passage/76。一共16节课程和代码。谢谢支持。 1. 什么是webpack? 前端目前最主流的javascript打包工具，在它的帮助下，开发者可以轻松地实现加密代码、多平台兼容。而最重要的...

DevWiki 2019-08-23 10:25 评论0 收藏0