还不打算去认识一下webpack?
前言
随我来,去看看webpack!(
为时未晚
)============》第一版(较浅显的知识,懂得可忽略本文)
方向
- 安装,起步搭建运行.
(粗略代过)
- 对于资源的管理,对于输出的管理.
(举例介绍)
- 本地开发
(基础服务)
- 热更新=[模块热替换]
(初步认识)
1.初步构建
mkdir webpack_demo && cd webpack_demo // 新建一个文件 并进入更目录 `mkdir 是linux命令`
npm init -y // 初始一个packjage.json文件 -y 表示跳过询问步骤...
//安装webpack
npm install webpack --save-dev // 添加webpack-cli依赖到"devDependencies"
//webpack4.0+ 需要安装webpack-cli
npm install webpack-cli --save-dev // 添加webpack-cli依赖到"devDependencies"
</pre>
//生成如下目录
├── package.json
├── src //源目录(输入目录)
│ ├── index.js
├── dist // 输出目录
│ ├── index.html
// 修改 `dist/index.html`
< !DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack_demo</title>
</head>
<body>
<script src="main.js"></script> //为什么是main.js下面会解释
</body>
</html>
//修改`src/index.js `
function component() {
var element = document.createElement('div');
element.innerHTML = "整一个盒子"
return element;
}
document.body.appendChild(component());</pre>
<blockquote>
<code> npx webpack</code> (Node 8.2+ 版本提供的 npx 命令) <br><code>node node_modules/.bin/webpack</code> (8.2-版本)</blockquote>
<h5>会将我们的脚本作为<code>入口起点</code>,然后 输出 为 <code>main.js</code>.</h5>
<blockquote>
<code>打开dist/index.html 你将会看到 </code>整一个盒子<code> 几个字样~</code>
</blockquote>
<h3>2.资源管理,输出管理.基本开发起步</h3>
//生成如下目录
├── package.json
- |── webpack.config.js //webpack配置文件
├── src //源目录(输入目录)
│ ├── index.js
├── dist // 输出目录
│ ├── index.html
先介绍一个
Lodash
库 它是一个一致性、模块化、高性能
的 JavaScript 实用工具库 模块化处理非常适合值操作和检测
(说白了就是webpack用了我也试试...
)
lodash相关文档
npm install lodash --save //非仅在开发的时候使用的依赖 就是需要打包到生产环境的包 不加-dev
// src/index.js
import _ from 'lodash';
function component() {
var element = document.createElement('div');
element.innerHTML = _.join(['lodash','webpack'],''); //join将 array 中的所有元素转换为由''分隔的字符串 其它函数可以自己实践
return element;
}</pre>
<blockquote><code>打开index页面输出 loadshwebpack</code></blockquote>
//webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js', //入口
output: { //出口
filename: 'main.js', //打包之后脚本文件名称
path: path.resolve(__dirname, 'dist') //路径指向执行 js 文件的绝对路径 此处为/dist
}
};
执行
npx webpack --config webpack.config.js (把之前dist目录下main.js删除)
新的脚本生成(其实没多大变化..)
// 配置一下package.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack" //添加此行命令 下次执行打包就是 npm run build 相当于上面的npx webpack --config webpack.config.js
},
// 资源的配置 css 图片 js等等.. 举例 css 图片
</pre>
<blockquote>
<code>npm install --save-dev style-loader css-loader</code> css的loader<br><code>npm install --save-dev file-loader</code> file(图片)对象的 loader</blockquote>
//生成如下目录
├── package.json
- |── webpack.config.js //webpack配置文件
├── src //源目录(输入目录)
│ ├── index.js - │ ├── index.css
- │ ├── icon.jpg
├── dist // 输出目录
│ ├── index.html
//修改webpack.config.js
const path = require('path'); //path路径模块
module.exports = {
entry: './src/index.js', //入口
output: { //出口
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.css$/, //检测正则匹配.css结尾的文件
use: [ //使用俩个loader
'style-loader',
'css-loader'
]
},
{
test: /\.(png|svg|jpg|gif)$/, //正则匹配.png svg jpg gif结尾的文件
use: [ //使用file-loader
'file-loader'
]
}
]
}
};
//修改src/index.css
div{
color:red;
}
//修改src/index.js
import _ from 'lodash';
import "./index.css";
import Icon from './icon.jpg';
function component() {
var element = document.createElement('div');
element.innerHTML = _.join(['loadsh', 'webpack'], ' ');
var myIcon = new Image();
myIcon.src = Icon;
element.appendChild(myIcon);
return element;
}
document.body.appendChild(component());
</pre>
<blockquote>
<code>npm run build(删除之前的dist目录下main.js) 你会看红字和图片</code> 以上就是资源管理的简短介绍</blockquote>
<blockquote>
<code>npm install --save-dev html-webpack-plugin 安装html-webpack-plugin模块</code> 模块用到功能:<br> 1: 动态添加每次compile后 js css 的hash<br> 2: 可配置多页面 单页面 这些 <br> 3: 其它没涉及到<br><code>npm install clean-webpack-plugin --save-dev 清除dist文件夹(每次删除麻烦了..)</code>配置一下</blockquote>
//修改目录
├── package.json
|── webpack.config.js //webpack配置文件
├── src //源目录(输入目录)
- │ ├── app.js
- │ ├── print.js
│ ├── index.css
│ ├── icon.jpg
├── dist // 输出目录
│ ├── index.html
//webpack.config.js ===============================================
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: {
app: './src/index.js',
print: './src/print.js'
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: 'webpack_demo'
})
],
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
}
]
}
};
//修改src/index.js ===================================================
import _ from 'lodash'; //引入lodash模块
import "./index.css"; // index.css
import Icon from './icon.jpg'; // 图片
import printMe from "./print.js" // printJS
function component() {
var element = document.createElement('div'); //创建一个元素
element.innerHTML = _.join(['loadsh', 'webpack'], ' '); // lodash中_.join方法
var myIcon = new Image(); //创建一个图片
myIcon.src = Icon; //src赋值
element.appendChild(myIcon); //追加图片
var btn = document.createElement('button'); //创建按钮
btn.innerHTML = 'Click me and check the console!'; //内容赋值
btn.onclick = printMe; //添加事件
element.appendChild(btn); //追加元素
return element;
}
document.body.appendChild(component()); //追加元素到body中
//修改src/print.js ==========================================
export default function printMe() {
console.log('from print.js');
}
npm run build 会发现基本webpack的配置之后 ,有点模样(意思)了
打开页面index.html正常访问
3.本地开发
npm install --save-dev webpack-dev-server
"webpack-dev-server" 为你提供了一个简单的 web 服务器,并且能够实时重新加载
//修改webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');
module.exports = {
entry: {
app: './src/index.js'
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
devServer: {
contentBase: './dist'
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: 'webpack_demo'
})
],
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
}
]
}
};
//修改package.json
...
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --open", //start命令
"build": "webpack"
},
...
npm run start 本地起了8080端口的服务,你也可以看到自己的页面
4.热更新
//修改webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');
module.exports = {
entry: {
app: './src/index.js'
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
devServer: {
contentBase: './dist',
hot: true
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: 'webpack_demo'
}),
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin()
],
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
}
]
}
};
npm run start 运行http://localhost:8080/ 然后你去修改print js的console(或者添加其他代码) 会发现命令行输出updated. Recompiling... 字样
这就是简单的实现了热更新
最后
本文只是大概从几个demo来对于webpack的基础概念 入口entry 出口 output
loader
plugins mode(没有直面涉及)
几大模块的梳理于实践,让大家对于webpack不在那么陌生!
后续文章会从更深入的角度去学习webpack! 暂定下周1 发表文章(内容 详细介绍
hot
实现一个简易的vue-cli
等等)demo的代码我会同步github
原文地址:https://segmentfault.com/a/1190000016927436
最新文章
- 如何写出高质量的技术博客 这边文章出自http://www.jianshu.com/p/ae9ab21a5730 觉得不错直接拿过来了 好东西要大家分享嘛
- Android开发之Toast
- Learning Bayesian Network Classifiers by Maximizing Conditional Likelihood
- 使用Python将Excel中的数据导入到MySQL
- js 遮罩层 loading 效果
- spring 配置定时任务
- 0422 Step2-FCFS调度
- 用postgreSQL做基于地理位置的app(zz)
- LIS 最长递增子序列
- 数的n次方 s.match(reg) marquee滚动效果
- XML 序列化与PULL解析
- 转载,crtmpserver文件夹结构分析
- 浅谈android的selector,背景选择器
- 2014年TI杯大学生电子设计竞赛地区赛使用仪器及器件、设备
- 携程Java工程师——一道面向对象面试选择题(转)
- MT4 做指标模版
- Vold工作流程分析学习
- Eclipse工程有乱码
- Android 实现个性的ViewPager切换动画 实战PageTransformer(兼容Android3.0以下)
- Storm入门-Storm与Spark对比
热门文章
- Android开发之PullToRefresh的Click点击事件的监听实现长按删除Item
- hibernate实战笔记1---初探
- @ConfigurationProperties注解
- 飘逸的python - 极简的二叉树前中后序通杀函数
- 用Arduino+OSC建立一个iPad铁路王国巡视机
- C# Path 有关于文件路径等问题类(转)
- 麦森数--NOIP2003
- Redis学习笔记(二):Redis集群
- [NOI2015,LuoguP2146]软件包管理器------树剖
- Spark2.0.2+Zeppelin0.6.2 环境搭建 初探