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 条评论
登录 后参与评论

相关文章

  • 4、webpack从0到1-打包图片资源

    Ewall
  • 11、webpack从0到1-CodeSplitting代码分割

    Ewall
  • 5、webpack从0到1-处理css文件

    Ewall
  • try webpack

    前不久把 sf 前端的构建工具进行了改进和优化,用上了目前非常火的 webpack 、babel 和 es6 等等新技术。

    前端博客 : alili.tech
  • 从零搭建一个 webpack 脚手架工具(一)

    webpack 是一个现代 JavaScript 应用程序的静态模块打包器,已经成为前端开发不可获取的工具。特别是在开发大型项目时,项目太大,文件过多导致难以维...

    多云转晴
  • webpack4 入门

    源码地址 https://github.com/lilugirl/learn-webpack4/tree/master/3

    lilugirl
  • webpack入门——webpack的安装与使用

    一、简介 1、什么是webpack webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX)、coffee、样式(含less/s...

    用户1174387
  • 【Webpack】320- Webpack4 入门手册(共 18 章)(下)

    最近和部门老大,一起在研究团队【EFT - 前端新手村】的建设,目的在于:帮助新人快速了解和融入公司团队,帮助零基础新人学习和入门前端开发并且达到公司业务开发水...

    pingan8787
  • webpack4带来了什么

    在开发人员还在体会webpack3.x的余韵时,webpack4.x已经悄然而来。

    前端博客 : alili.tech
  • Webpack前世今生

    在网页开发的早期,js制作作为一种脚本语言,做一些简单的表单验证或动画实现等,那个时候代码还是很少的。那个时候的代码是怎么写的呢?直接将代码写在<script>...

    说故事的五公子

扫码关注云+社区

领取腾讯云代金券