webpack 的使用教程

今天接触webpack，就着官网上的教程一步一步的玩，把自己的理解总结以便和大家交流

webpack的主要特点

1. 可以把js,css,image,甚至文本当成模块来处理，并通过require()的方法来调用。

2. 能够自动识别模块之间的依赖。

webpack的安装,通常是使用npm。

创建一个文件夹vue-webpack-basic,使用命令行进入该文件夹，输入npm install webpack,当然你也可以使用全局安装 npm install webpack -g

2. 配置

在项目的根目录上创建配置文件 webpack.config.js,它的作用如同常规的 gulpfile.js/Gruntfile.js。

其中：

dist是最终文件生成的目录
lib 一些公共的类库
node_modules目录是通过npm安装的一些模块的目录所在，如jquery，vue等一些框架
src 是源码目录，开发时的文件都放在此目录下
index.html 应用入口页面
package.json项目描述文件
README.md 项目说明文件
webpack.config.js wepack工具的配置文件

各个文件的内容分别如下

index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><script type="text/javascript" src="dist/app.js" charset="utf-8"></script>
</head>
<body><div class="name"></div>
</body>
</html>

只需要在html文件中引入入口文件entry

entry.js

require('../css/index.css');
var $ = require('jquery');
console.log($('body'));
$(function(){$('.name').text("通过jq录入的数据");
});document.write(require("../js/content.js"));

注意：webpack 内置的功能只能处理js，如果想要通过require()的方法来调用css，image等其他格式的文件，需要使用相应的插件：

使用css-loader和style-loader通过require()来调用css
- 安装插件 npm install css-loader style-loader
在webpack中使用第三方库，只需要在根目录使用npm install packageName 下载安装需要的库，然后在webpack页面中通过require()的形式加载进来，就可以直接使用了。如此处的jquery。

content.js

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

即便是文本也可以使用CommonJs的加载到js文件中。

index.css

body{background-color: green;
}

执行命令 `webpack src/js/entry dist/app.js --modulebind 'css=style!css'`,即可生成最终的打包文件.

运作的流程大概如下

通过入口文件entry.js加载content.js和style.css，然后把entry.js生成到dist/app.js中，在html中直接引入文件app.js即可。

附上效果图

是否觉得上面的命令太长了，感觉太土了？不用怕，那些参数我们都是可以通过配置文件来配置的。

module.exports = {entry: "./src/js/entry.js",output: {path: "./dist",filename: "app.js"},module: {loaders: [{ test: /\.css$/, loader: "style!css" }]}
};

entry:指定入口文件
output:指定输出文件
module.loaders:指定加载器，在webpack中，可以配置各种各样的加载器，这样我们就不需要担心sass，less，等一些文件的编译问题了。

现在我们就可以直接的使用命令webpack来编译和调试我们的应用了，另外，我们还可以加入--watch 参数,这样每次有改动的时候就不需要重新编译应用了。

接下来还会有更加详细的参数使用和说明，包括各种插件的使用，还有和glup的配合使用。我会在学习的过程中一一做记录,同时直播出来和大家共同交流学习

转载于:https://www.cnblogs.com/kevin1220/p/5654374.html

webpack 的使用教程相关推荐

webpack快速入门教程
webpack快速入门教程 1.webpack 介绍什么是webpackhttps://www.webpackjs.com/ Webpack是一个模块打包器(bundler) 在Webpack看来, ...
WebPack 简明学习教程
WebPack 简明学习教程字数1291 阅读22812 评论11 喜欢35 WebPack是什么一个打包工具一个模块加载工具各种资源都可以当成模块来处理网站 http://webpack. ...
create-react-app项目webpack配置修改教程
create-react-app脚手架,用于快速搭建react项目,但有些时候需要做一些配置修改以满足项目需求. 已同步更新 create-react-app 至v5.0.0版本一.配置首先需要调 ...
webpack轻松入门教程
webpack之傻瓜式教程及前端自动化入门接触webpack也有挺长一段时间了,公司的项目也是一直用着webpack在打包处理,但前几天在教新人的情况下,遇到了一个问题,那就是:尽管网上的webpa ...
新手入门，webpack入门详细教程
第一步,要使用webpack,首先要安装node.js,https://nodejs.org/en/ 官网直接下载即可,具体安装教程,可以参考菜鸟教程 https://www.runoob.com/n ...
webpack 极简教程(前端自动化构建)
Webpack 是什么模块打包器 (module bundler). 能够将任何资源如 JavaScript 文件.CSS 文件.图片等打包成一个或少数文件. Webpack 是一个前端资源加载/打 ...
webpack安装使用教程
写在前面的话阅读本文之前,先看下面这个webpack的配置文件,如果每一项你都懂,那本文能带给你的收获也许就比较有限,你可以快速浏览或直接跳过:如果你和十天前的我一样,对很多选项存在着疑惑,那花一段 ...
webpack - 基础配置教程
目录什么是webpack? 简要介绍 webpack中的模块打包(bundle)的概念 webpack的工作 webpack如何分析模块依赖关系 webpack五大核心概念 entry outpu ...
Webpack 入门教程
Webpack 是一个前端资源加载/打包工具.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源. 本章节基于 Webpack3.0 测试通过. 从图中我们可以看出,W ...
webpack简易入门
webpack简易学习教程 1.为什么要用webpack? 模块化开发代码压缩,合并,提取公共代码, 编译ES6,CoffeeScript: Scss,Less等css预处理器 2.webpack简 ...

webpack 的使用教程

webpack 的使用教程

今天接触webpack，就着官网上的教程一步一步的玩，把自己的理解总结以便和大家交流

webpack的主要特点

1. 可以把js,css,image,甚至文本当成模块来处理，并通过require()的方法来调用。

2. 能够自动识别模块之间的依赖。

webpack的安装,通常是使用npm。

2. 配置

index.html

entry.js

content.js

index.css

执行命令 `webpack src/js/entry dist/app.js --modulebind 'css=style!css'`,即可生成最终的打包文件.

运作的流程大概如下

通过入口文件entry.js加载content.js和style.css，然后把entry.js生成到dist/app.js中，在html中直接引入文件app.js即可。

是否觉得上面的命令太长了，感觉太土了？不用怕，那些参数我们都是可以通过配置文件来配置的。

现在我们就可以直接的使用命令webpack来编译和调试我们的应用了，另外，我们还可以加入--watch 参数,这样每次有改动的时候就不需要重新编译应用了。

webpack 的使用教程相关推荐

最新文章

热门文章

webpack 的使用教程

webpack 的使用教程

今天接触webpack，就着官网上的教程一步一步的玩，把自己的理解总结以便和大家交流

webpack的主要特点

1. 可以把js,css,image,甚至文本当成模块来处理，并通过require()的方法来调用。

2. 能够自动识别模块之间的依赖。

webpack的安装,通常是使用npm。

2. 配置

index.html

entry.js

content.js

index.css

执行命令 webpack src/js/entry dist/app.js --modulebind 'css=style!css',即可生成最终的打包文件.

运作的流程大概如下

通过入口文件entry.js加载content.js和style.css，然后把entry.js生成到dist/app.js中，在html中直接引入文件app.js即可。

是否觉得上面的命令太长了，感觉太土了？不用怕，那些参数我们都是可以通过配置文件来配置的。

现在我们就可以直接的使用命令webpack来编译和调试我们的应用了，另外，我们还可以加入--watch 参数,这样每次有改动的时候就不需要重新编译应用了。

webpack 的使用教程相关推荐

最新文章

热门文章

执行命令 `webpack src/js/entry dist/app.js --modulebind 'css=style!css'`,即可生成最终的打包文件.