webpack入门

前言:这两天在网上找了些视频和资料学习webpack,最后发现官网上的教程原来就写得很好,只是都是全英文的一开始不想去看。。。。今天认真看了下官网教程,然后总结下这两天的对webpack入门的学习,写一下互相学习,英语好的就直接去官网看吧webpack官方入门教程。(话说很久没学英语了,学好英语真的很重要) 1、安装 打开node,敲入命令行 ①全局安装

$ npm install webpack -g

②安装在项目中,将依赖写入package.json

$ npm init
$ npm install webpack --save-dev

2、编译 在项目文件下 ①新建一个文件entry.js并输入内容:

document.write("hello world!");

②新建一个index.html

<html>    
<head>       
<meta charset="utf-8">    
</head>    
<body>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
<!--这里src引用的bundle.js是webpack打包entry.js后生成的-->
</body>
</html>

③node里敲命令,编译文件

$ webpack ./entry.js bundel.js

3、组件 entry.js是入口文件,一般还有各个组件模块,从而引用实现复用。 ①新建一个component.js文件,输入

module.exports = "It works from component.js";

②修改入口文件entry.js

//document.write("hello world!");
document.write(require("./component.js"));

③node敲命令重新编译,然后去浏览器里刷新查看

$ webpack ./entry.js bundel.js

4、css-loader和style-loader以及wepack.config.js css-loader用来处理CSS文件;style-loader将样式应用在CSS文件上 ①node里敲命令安装这两个模板

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

②新建一个style.css文件

body{
     background:red;
}

③更新修改entry.js

require("./style.css");
document.write(require("./content.js"));

④在项目文件下新建一个webpack.config.js文件并输入

module.exports = {
    entry: "./entry.js",
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style-loader!css-loader" }
            //注意:这里的style和css后面都要加"-loader"后缀,官网上教程没有更新,详情:https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed
        ]
    }
};

⑤node里敲命令编译 这个时候只需要敲webpack就可以了,因为Webpack 在执行的时候,除了在命令行传入参数,还可以通过指定的配置文件来执行。默认情况下,会搜索当前目录的webpack.config.js

$ webpack

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏木子昭的博客

OneTab一键分享Chrome当前打开的所有标签页

当你发现自己有太多的标签页时,单击OneTab图标,所有标签页会转换成一个列表,当你需要再次访问这些标签页时,点击OneTab图标唤出列表,点击列表恢复标签页

27230
来自专栏魏艾斯博客www.vpsss.net

WordPress 后台编辑主题无“更新文件”按钮的解决办法

14820
来自专栏Linux驱动

23.QT记事本

源码下载地址: https://download.csdn.net/download/qq_37997682/10453294

15930
来自专栏FreeBuf

前端黑魔法之远程控制地址栏

由于今天看到一篇文章《危险的 target=”_blank” 与 “opener”》,里面提到了一个老知识点,就是target=”_blank”的时候,新打开的...

36640
来自专栏网络

那些年,我们用过的fiddler

在测试中,不管是做手工测试,还是接口测试,我们都需要查看后端返回的数据。有的时候,我们也需要调试,或者mock一下后端的返回,来验证前端是否达到预期。 为了捕获...

198100
来自专栏前端说吧

Compass(更新中。。。)

26560
来自专栏从零开始学自动化测试

selenium+python自动化78-autoit参数化与批量上传

前言 前一篇autoit实现文件上传打包成.exe可执行文件后,每次只能传固定的那个图片,我们实际测试时候希望传不同的图片。 这样每次调用的时候,在命令行里面加...

39330
来自专栏编程

手把手教 Vue-环境搭建

1 教程简介 1、阅读对象 本篇教程适合新手阅读,老手直接略过 2、教程难度 初级,本人水平有限,文章内容难免会出现问题,如果有问题欢迎指出,谢谢 3、Demo...

43850
来自专栏web前端

smartClient 1--框架介绍

    快速构建 大型企业应用开发(无需过多关注UI),适合基于云技术的应用,主要关注业务的发展和营销,加快开发进程

12500
来自专栏大闲人柴毛毛

架构高性能网站秘笈(五)——Web组件分离

什么是Web组件? 网站的静态网页HTML、JavaScript脚本、CSS样式、图片、动态数据称为网站的Web组件。也就是说,一个Web应用由各种各样的We...

40980

扫码关注云+社区

领取腾讯云代金券