1.安装webpack命令环境
cnpm install webpack -g
使用cnpm代替默认的npm好处你懂的~
2.使用npm命令自动生成package.json文件
npm init
3.安装本地webpack
cnpm install webpack -D
4.小例子
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack-demo</title>
<script src="bundle.js"></script>
</head>
<body>
<div id="box">
</div>
</body>
</html>
bundle.js是webapp默认打包后的js文件，在html里引用这个script就行了，其他真正用到的js文件会打包到这个文件里
entry.js
var a = require('./a');
//require('style-loader!css-loader!./index.css');
//import modA from './b';
require('./index.css');
window.onload = function () {
var box = document.getElementById('box');
box.innerHTML='<h3>hello webpack</h3> '+a;
//box.innerHTML='<h3>hello webpack</h3> '+(modA.a+modA.b);
}
在项目目录下cmd运行命令webpack entry.js bundle.js
访问index.html，出现hello webpack说明webpack打包entry.js成功
5.css加载器loader
上面4的例子只是打包了一个js文件，下面尝试加载css文件，需要用到
首先使用npm安装一下style-loader和css-loader
cnpm install style-loader css-loader -D
上面entry.js加入require('style-loader!css-loader!./index.css');
index.css
body{
background: salmon;
color:#fff;
font-size: 40px;
}
访问index.html，出现hello webpack且背景颜色等样式设置成功
除了css外，webpack会自动解决依赖
定义一个a.js内容如下
module.exports = 'yilianxinyuan';
在entry.js里加入var a = require('./a');即可引入a.js获得里面的内容
6.webpack.config.js
显然上面在entry.js直接使用require js或者css，然后每次都要这么长的命令webpack entry.js bundle.js是不方便的
所以要通过配置文件webpack.config.js来简化这些操作
module.exports={
entry:'./entry.js',
output:{
filename:'bundle.js'
},
devServer:{
port:8088,
inline:true
},
module:{
loaders:[
{test:/\.css$/,loader:'style-loader!css-loader'},
{test:/\.js$/,loader:'babel-loader',exclude:/node_modules/}
]
},
resolve:{
"extensions":['.js','.css']
}
};
devServer和resolve可以先不看
entry----定义webpack的入口
output---定义webpack的出口
module---loaders定义js、css加载器loader
现在直接使用webpack就可以实现将entry.js打包成bundle.js
webpack -p 打包并压缩
webpack -w 监听，文件有改动自动编译
webpack -d 开启调试模式生成source maps,在浏览器中能看到打包之前的文件
7.webpack配置babel转化
配置babel预设
执行命令touch .babelrc
在.babelrc文件里写入
{
"presets":['es2015']
}
并在webpack.config.js里module增加
{test:/\.js$/,loader:'babel-loader',exclude:/node_modules/}
这样就可以放心大胆的写es6了
新建b.js
export default {
a:1,
b:2
}
在entry.js里获得b.js数据
import modA from './b';
box.innerHTML='<h3>hello webpack</h3> '+(modA.a+modA.b);
8.webpack-dev-server
这是一个基于webpack小型服务器，它的一个非常重要的作用就是定义端口号和代码改变自动刷新浏览器
首先安装命令环境cnpm install webpack-dev-server -g
下面就可以使用webpack-dev-server命令打包文件啦
webpack-dev-server --port 8088 设置端口号
webpack-dev-server --inline 改完代码后自动刷新浏览器
webpack-dev-server --hot 改完代码后自动刷新浏览器
当然每次执行命令都加这些参数显然也是不人道的，所以可以在配置文件里进行配置
devServer:{
port:8088,
inline:true
},
访问http://localhost:8080得到index.html页面结果
9.把运行命令放到package.json
"scripts": {
"dev": "webpack-dev-server"
},
这样在命令行输入npm run dev效果等同运行webpack-dev-server
分享到：
相关推荐
一款针对Webpack等前端打包工具所构造的网站进行快速、高效安全检测的扫描工具 安全服务中是否遇到越来越多以`Webpack打包器`为代表的网站？这类打包器会将整站的API和API参数打包在一起供Web集中调用，这也便于我们...
总的来说，Webpack作为一个强大的模块打包工具，通过灵活的配置和丰富的生态，极大地推动了前端开发的现代化进程。这个“Webpack打包实例测试代码”项目提供了一个学习和实践Webpack配置的起点，帮助我们更好地理解...
Packer-Fuzzer 是一款专为基于Webpack等前端打包工具构建的网站设计的安全扫描工具。该工具旨在帮助开发者快速发现并解决可能存在的安全漏洞，提高网站的整体安全性。通过自动化的方式，Packer-Fuzzer 可以对网站...
scss-flex flexbox，移动端flex布局神器，兼容微信，UC，webview等移动端主流浏览器，可以通过bower和npm下载参考使用SASS语法编写，使用gulp前端打包工具进行打包针对flexbox布局方式的详细介绍：下载git clone ...
因为字数限制 下面目录只是部分 01 Promise讲解.mp4 02 模块化、浏览器内置对象、事件.mp4 03 作用域 闭包 this指针...50 webpack前端打包工具2.mp4 51 前端-商城项目实战1.mp4 53 商城项目实战3.mp4 源码课件.rar
因为字数限制 下面目录只是部分 01 Promise讲解.mp4 02 模块化、浏览器内置对象、事件.mp4 03 作用域 闭包 this指针...50 webpack前端打包工具2.mp4 51 前端-商城项目实战1.mp4 53 商城项目实战3.mp4 源码课件.rar
因为字数限制 下面目录只是部分 01 Promise讲解.mp4 02 模块化、浏览器内置对象、事件.mp4 03 作用域 闭包 this指针...50 webpack前端打包工具2.mp4 51 前端-商城项目实战1.mp4 53 商城项目实战3.mp4 源码课件.rar
因为字数限制 下面目录只是部分 01 Promise讲解.mp4 02 模块化、浏览器内置对象、事件.mp4 03 作用域 闭包 this...50 webpack前端打包工具2.mp4 51 前端-商城项目实战1.mp4 53 商城项目实战3.mp4 源码课件.rar
webpack的基本概念：webpack是一个模块打包工具，可以把前端项目中的js、cs、scss/less、图片等文件都打包在一起，实现自动化构建，给前端开发人员带来了极大的便利。 1.3 webpack打包工具 安装webpack webpack的...
2014年，Webpack的出现标志着前端打包工具进入了一个新的时代。Webpack不仅能够处理文件的合并与压缩，还能支持复杂的前端架构。 **问题**：随着前端工程化的推进，简单的文件打包已经无法满足现代前端应用的需求。...
传统DOM处理需要编写繁杂的选择器,逐级操作还原服务器需要的JSON数据格式,不但操作...Vue.js与Vue-router路由结合开发,配合Webpack前端打包工具,基于团队模块化开发基于微信的SPA(Single Page Application,单页应用)。
Webpack 是一个强大的模块打包工具，尤其在前端开发中被广泛使用。它的工作原理是将JavaScript、CSS、图片等资源视为“模块”，通过一系列配置和插件进行编译、打包，生成适合生产环境的静态资源。在Vue.js项目中，...
webpack打包工具简介，常用的Loader、plugin配置介绍。
Webpack 作为一种强大的前端模块打包工具，对于提升前端开发效率、优化项目结构具有重要作用。通过了解 Webpack 的基本概念、特点及使用方法，可以帮助开发者更好地管理复杂的前端项目，提高开发质量和效率。
Webpack 是一个现代JavaScript应用程序的模块打包工具，它能够将各种资源（如JavaScript、CSS、图片等）转换并打包成浏览器可识别的格式。在前端开发中，Webpack 的配置是项目构建的重要环节，它允许开发者自定义...
webpack是目前使用范围最广范，功能最强大的前端打包工具，是现在mvvm框架开发避不开少的工具。webpack是前端程序人员必须具备的技能，webpack在最近几年内前端必不可少的的技术。 任何形式的资源都可以被视为模块，...
默认情况下，`Yarn` 使用 `package.json` 文件中的 `scripts` 字段来执行命令，如 `build` 或 `start`，这些命令通常与前端打包工具（如 `Webpack`、`Rollup` 或 `Parcel`）相关联。 当我们需要对打包过程进行定制...
**Webpack Dashboard：前端打包的可视化增强** Webpack，作为现代JavaScript应用程序的主流模块打包工具，它能够将各种资源，如JavaScript、CSS、图片等，高效地整合在一起，形成适合浏览器加载的静态资源。然而，...
在现代Web开发中，为了提高开发效率和优化网站性能，开发者经常使用Webpack这一强大的模块打包工具。本项目以HTML、JavaScript和CSS为基础，结合Webpack进行资源的管理和打包，使得项目结构清晰，易于理解和维护。...
Webpack 是一种流行的前端构建工具，它可以将多个 JavaScript 文件打包成一个文件，以便于浏览器加载。webpack 的核心概念是 Compiler 和 Compilation。 Compiler 是 webpack 的核心对象，在 webpack 的整个生命...