您的位置：首页 > Web前端 > Webpack

【webpack】学习记录（一）

2016-09-12 13:05 417 查看

简介
优势

劣势

类似框架

入门例子
安装依赖
nodejs 安装

webpack 模块依赖

项目下使用webpack
初始化

项目加入依赖
webpack

css-loader style-loader

目录结构

入口文件indexhtml

业务脚本contentjs

样式脚本stylecss

入口脚本entryjs

webpack配置webpackconfigjs

执行命令

结果

存在问题

简介

官网

webpack

是以模块依赖和生成静态资产代表这些模块。通俗一点理解就是，把所有依赖的脚本，样式，统一打包，减少前端请求，并且可压缩，可混淆

优势

支持ES6

支持AMD/CMD

插件丰富

并压/混淆，模块依赖

减少网络请求，加快前端渲染

利于模块化开发

劣势

需要了解node.js

存在学习成本

不利于入门学习

debug困难

类似框架

grunt

gulp

bower

karma

入门例子

依赖node.js

依赖webpack模块

安装依赖

node.js 安装

下载后执行

node -v

运行成功则安装成功

webpack 模块依赖

npm install webpack -g

-g
代表全局安装

项目下使用webpack

所有命令在项目根目录执行

初始化

npm init

执行该命令，会要求输入一些，如项目项目名，项目描述，作者，等信息，执行完后会出现一个

package.json

的文件在项目的根目录

项目加入依赖

webpack

npm install webpack --save-dev

改命令执行后会修改

package.json

，在devDependencies下加入了webpack

当然也可以通过

来指定其他版本如

npm install webpack@1.2.x --save-dev

css-loader style-loader

让项目支持css压缩和样式加载器

npm install css-loader style-loader

目录结构

入口文件（index.html）

bundle.js 是压缩之后的文件，是webpack自动生成，下面会说

<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript" src="../scripts/bundle.js" charset="utf-8"></script>
</body>
</html>

业务脚本（content.js）

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

样式脚本（style.css）

body {
background: yellow;
}

入口脚本（entry.js）

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

webpack配置（webpack.config.js）

module.exports = {
//入口脚本
entry: "./src/modules/main/scripts/entry.js",
//输出
output: {
//输出目录
path: './src/modules/main/scripts',
//输出脚本
filename: "bundle.js"
},
module: {
//压缩器
loaders: [
//css后缀的，采用style!css压缩器
{ test: /\.css$/, loader: "style!css" }
]
}
};

执行命令

webpack

结果

直接访问index.html

存在问题

每次需要执行命令打包繁琐

脚本多个时还不能加入依赖

目录结构配置困难

打包后文件名过于死板

该上面的问题会得到解决，在后面的博文进行写出

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航