webpack4 入门（一）
一、简介
WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，less, TypeScript等），并将其转换和打包为合适的格式供浏览器使用。
Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。
二、起步
1.打开cmd，创建一个demo
mkdir webpack4-demo && cd webpack4-demo
2.初始化package
npm init -y
3.安装webpack及webpack-cli
npm i webpack webpack-cli -D
4.创建index.html和index.js
mkdir src dist && touch src/index.js dist/index.html
index.html
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>webpack4</title>
</head> <body>
<script src="./bundle.js"></script>
</body> </html>
index.js
let h1 = document.createElement('h1');
h1.innerHTML = 'hello webpack4';
document.body.appendChild(h1);
5.创建webpack.config.js
mkdir config && touch config/webpack.config.js
webpack.config.js
const path = require('path');
const modules = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, '../dist')
}
}
module.exports = modules;
entry入口js，output输出文件，filename文件名称，path文件存放位置
6.修改package.json
"scripts": {
"build": "webpack --config config/webpack.config.js"
},
7.打包
npm run build
打开index.html，能够看到Hello webpack4
三、常用API
1.加载css
1）安装并添加 style-loader 和 css-loader
npm install --save-dev style-loader css-loader
2）在src文件下添加style.css
h1 {
color: red;
}
3）在index.js引入style.css
import './style.css';
4）在webpack.config.js添加module，和output同级
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
2.加载less
1）安装并添加less less-loader
npm install --save-dev less less-loader
2）在webpack.config.js配置
rules: [
{
test: /\.(css|less)$/,
use: [
'style-loader',
'css-loader',
'less-loader'
]
}
]
3）在index.js引入less文件
import './style.less'
3.加载scss
1）安装并添加node-sass sass-loader
npm install node-sass sass-loader --save-dev
如果node-sass安装不成功，请尝试
npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/ -D
2）配置webpack.config.js
{
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
}
3）在index.js里引入style.scss文件
import './style.scss'
4.css分离
1）安装extract-text-webpack-plugin
npm install --save-dev extract-text-webpack-plugin@next
对于webpack4版本，必须装extract-text-webpack-plugin最新版本
2）配置webpack.config.js
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},
{
test: /\.less$/i,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'less-loader']
})
},
{
test: /\.scss$/i,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'sass-loader']
})
}
]
},
plugins: [
new ExtractTextPlugin('style.css'),
]
3）在index.js引入.css .less .scss 文件打包即可
5.加载图片
1）安装并添加file-loader
npm install --save-dev file-loader
2）在webpack.config.js中配置
module: {
rules: [
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
},
]
}
3）在src文件夹下添加icon.png，在index.js引入
import Icon from './icon.png';
4）在js或css引用图片
var myIcon = new Image();
myIcon.src = Icon;
element.appendChild(myIcon);
// css
background: url('./icon.png');
6.加载字体
1）在webpack.config.js配置
module: {
rules: [
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [
'file-loader'
]
}
]
}
2）在src文件夹下添加my-font.woff，在style.css中添加如下代码
@font-face {
font-family: 'MyFont';
src: url('./my-font.woff') format('woff');
font-weight: ;
font-style: normal;
}
h1 {
font-family: 'MyFont';
}
通过配置好 loader 并将字体文件放在合适的地方，你可以通过一个 @font-face 声明引入。本地的 url(...) 指令会被 webpack 获取处理，就像它处理图片资源一样
7.es6/es7转换为es5
1）安装@babel/core @babel/preset-env babel-loader
npm i -D @babel/core babel-loader @babel/preset-env
注意：对于babel-loader@7.x，要安装babel-core 和 babel-preset-env；对于babel-loader@8.x，要安装@babel/core @babel/preset-env
2）配置.babelrc
{
"presets": [
"@babel/preset-env"
]
}
3）配置webpack.config.js
module: {
rules: [
{
test: /\.js$/,
exclude: '/node_modules/',
loader: 'babel-loader'
}
]
}
4）@babel/polyfill
Babel 默认只转换新的 JavaScript 句法（syntax），而不转换新的 API，比如数组的find、includes、from都不会转码。如果想使用这些方法，必须使用babel-polyfill，为当前环境提供一个垫片。
npm install --save-dev @babel/polyfill
在index.js引入或者在webpack.config.js的entry引入
// index.js
import '@babel/polyfill';
// 或者在 webpack.config.js
entry: ['@babel/polyfill', './src/index.js'],
补充：
1.babel-polyfill 和 babel-runtime
babel-polyfill：当运行环境中并没有实现的一些方法，babel-polyfill中会给做兼容
babel-runtime：将es6编译成es5
优缺点：
babel-polyfill：引入polyfill，前端就可以放心的在代码里用es6的语法来写；但是这样会造成全局空间污染，代码量比较大。
babel-runtime：不会污染全局对象和内置的对象原型。比如当前运行环境不支持promise，可以通过引入babel-runtime/core-js/promise来获取promise，或者通过babel-plugin-transform-runtime自动重写你的promise。缺点是不支持find、includes、Object.assign等方法。
2.babel-plugin-transform-runtime 和 babel-runtime
在babel编译es6到es5的过程中，babel-plugin-transform-runtime这个插件会自动polyfill es5不支持的特性，这些polyfill包就是在babel-runtime这个包里
8.压缩js
1）配置webpack.config.js
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
plugins: [
new UglifyJSPlugin()
],
2）如果报错 Cannot find module 'uglifyjs-webpack-plugin'，需要安装uglifyjs-webpack-plugin
npm install uglifyjs-webpack-plugin --save-dev
9.配置typescript
1）安装typescript ts-loader
npm install --save-dev typescript ts-loader
2）在根目录下添加tyconfig.json index.ts
tyconfig.json
{
"compilerOptions": {
"outDir": "./dist/",
"noImplicitAny": true,
"module": "es6",
"target": "es5",
"jsx": "react",
"allowJs": true
}
}
index.ts
let isTs: boolean = true;
console.log(isTs)
3）配置webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.ts',
mode: 'production',
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
}
]
},
resolve: {
extensions: ['.tsx', '.ts', '.js']
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, '../dist')
}
};
参考：
1.https://www.webpackjs.com/guides/
2.https://www.jianshu.com/p/d2c5d5190641
3.http://es6.ruanyifeng.com/#docs/intro#Babel-转码器
4.https://www.jianshu.com/p/a16a34eb597e
5.https://segmentfault.com/q/1010000012041869/a-1020000012044930
webpack4 入门（一）的更多相关文章
- webpack4入门
前提 已安装node(版本号>4.0,已自带NPM) mac机器 有一个空目录 无webpack.config.js配置打包 快速构建package.json文件. npm init -y 安装 ...
- webpack4入门到进阶案例实战课程
愿景:"让编程不在难学,让技术与生活更加有趣" 更多教程请访问xdclass.net 第一章 webpack4前言 第一集 webpack4入门到进阶案例实战课程介绍 简介:讲述w ...
- webpack4入门配置
下面是抄过来的,方便自己翻越 webpack4.x入门配置 1.首先npm install webpack webpack-cli webpack-dev-server -g (mac电脑用超级管 ...
- 显微镜下的webpack4入门
前端的构建打包工具很多,比如grunt,gulp.相信这两者大家应该是耳熟能详的,上手相对简单,而且所需手敲的代码都是比较简单的.然后webpack的出现,让这两者打包工具都有点失宠了.webpack ...
- 【Cute-Webpack】Webpack4 入门手册（共 18 章）
介绍 1. 背景 最近和部门老大,一起在研究团队[EFT - 前端新手村]的建设,目的在于:帮助新人快速了解和融入公司团队,帮助零基础新人学习和入门前端开发并且达到公司业务开发水平. 本文也是属于[E ...
- webpack4 入门配置研究
1. 全局安装 npm install webpack webpack-cli webpack-dev-server -g 1.1)输密文的密码(电脑开机) 1.2)安装成功 2. 输入命令mkdir ...
- webpack4.*入门笔记
全是跟着示例做的.看下面文章 入门 1.nodejs基础 http://www.runoob.com/nodejs/nodejs-tutorial.html 2.NPM 学习笔记整理 https:// ...
- webpack4 入门（二）
一.管理输出 1.多入口配置 entry: { index1: './src/index.js', index2: './src/index2.js' }, output: { filename: ' ...
- 【Redis】349- Redis 入门指南
点击上方"前端自习课"关注,学习起来~ 1. 概述 1.1. Redis 简介 Redis 是速度非常快的非关系型(NoSQL)内存键值数据库,可以存储键和五种不同类型的值之间的映 ...
随机推荐
- (转)SC Create 创建一个Windows系统服务
本文转载自:http://blog.sina.com.cn/s/blog_62b8fc330100l9px.html C:\Users\sophiaX>sc 描述: SC 是用于与服务控制管理器 ...
- Regexp：目录
ylbtech-Regexp:目录 1.返回顶部 1. http://www.runoob.com/regexp/regexp-tutorial.html 2. 2.返回顶部 3.返回顶部 4 ...
- xcopy 命令行
https://www.cnblogs.com/yang-hao/p/6003308.html xcopy-参数详解 XCOPY——目录复制命令 1．功能:复制指定的目录和目录下的所有文件连同目 ...
- buntu下shell脚本运行异常：bash和…
转载于:http://www.51testing.com/?uid-225738-action-viewspace-itemid-208702 我用bash到语法写了一个shell脚本(准确的说是把书 ...
- div+css学习笔记一（转）
div+css学习笔记一 (2011-05-12 07:32:08) 标签: div css 居中 背景图片 ie6 ie7 margin 杂谈 分类: 网页制作 1.IE6中用了float之后导致m ...
- Codeforces 57C (1-n递增方案数，组合数取模，lucas)
这个题相当于求从1-n的递增方案数,为C(2*n-1,n); 取模要用lucas定理,附上代码: #include<bits/stdc++.h> using namespace std; ...
- css 层叠式样式表（3）
样式分类 大小 -- 调整div大小,长 width,高 height.长可以直接100%横向沾满屏幕,高不可以. 背景 background-color 背景色 background-image ...
- 基于Opengl的太阳系动画实现
#include <GL\glut.h> float fEarth = 2.0f;//地球绕太阳的旋转角度float fMoon = 24.0f;//月球绕地球的旋转角度 void Ini ...
- 并发调试和JDK8新特性
- 4.传统的MVC
通过document view设计,我们把应用程序的状态(clicktimes)从一个简单的类设计中抽取出来.下一个目标是抽取转化主要的事件(这个例子里面是鼠标点击之后释放)为应用程序逻辑从而改变应用 ...