webpack4.X(入门到入土)
作者：互联网
Learning webpack
安装webpack
npm init -y//建立默认手脚架
npm install webpack webpack-cli --save-dev
Demo
1.在根目录建立两个文件夹(src文件夹和dist文件夹)
src文件夹：用来存放javascript代码，可以简单的理解为用JavaScript编写的模块。
dist文件夹：用来存放供浏览器读取的文件，这个是webpack打包成的文件。
2.编写程序文件
(1)在dist文件下手动建立一个index.html文件(/dist/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>webpack</title>
</head>
<body>
<div id="title"></div>
<!-- bundle.js是webpack执行打包命令后生产的文件。 -->
<script src="./main.js"></script>
</body>
</html>
(2)在src文件夹下建立entery.js的文件用于编写JavaScript代码，也是入口文件(src/index.js)
document.getElementById('title').innerHTML='Hello Webpack';
3.Webpack打包输出
终端（命令行）中输入
npx webpack
将会在./dist把编译结果输出为main.js (没有 webpack.config.js 的默认配置)
目录结构:
|-- ./dist // 最终使用代码
|-- ./node_modules // 各个依赖开发包
|-- ./src // 源文件
|-- ./package.json // 配置脚手架
入口与出口
1.在项目根目录下创建webpack.config.js(webpack配置文件)
//写入 webpack 配置文件
const path = require('path')
module.exports={
//入口文件的配置项(可以是单一入口，也可以是多入口)
entry:{
//里面的entery是可以随便写的
main:'./src/index.js'
},
//出口文件的配置项(支持多出口配置)
output:{
//打包的文件名称
filename: 'bundle.js',
//打包的路径位置
//path.resolve(__dirname,’./dist’)就是获取了项目的绝对路径。
path: path.resolve(__dirname, './dist')
},
//模块：例如解读CSS,图片如何转换，压缩
module:{},
//插件，用于生产模版和各项功能
plugins:[],
//配置webpack开发服务功能
devServer:{}
}
终端（命令行）中输入
npx webpack
2.多入口、多出口配置
(1)src目录下新建index1.js(src/index1.js)
alert('welcome to jsfan.net')
(2)修改项目根目录下webpack.config.js为
//写入 webpack 配置文件
const path = require('path')
module.exports={
//入口文件的配置项(可以是单一入口，也可以是多入口)
entry:{
//里面的entery是可以随便写的
main:'./src/index.js',
//增加入口文件
index1:'./src/index1.js'
},
//出口文件的配置项(支持多出口配置)
output:{
//多出口打包的文件名称(修改后)
//[name]的意思是根据入口文件的名称，打包成相同的名称，有几个入口文件，就可以打包出几个文件。
filename:'[name].js',
//打包的路径位置
//path.resolve(__dirname,’./dist’)就是获取了项目的绝对路径。
path: path.resolve(__dirname, './dist')
},
//模块：例如解读CSS,图片如何转换，压缩
module:{},
//插件，用于生产模版和各项功能
plugins:[],
//配置webpack开发服务功能
devServer:{}
}
(3)终端（命令行）中输入
npx webpack
(4)在dist文件中index.html中引入
<script src='./index1.js'></script>
热更新
1.安装 webpack-dev-server
npm install webpack-dev-server --save-dev
2.配置webpack.config.js中的devServer为
devServer:{
//服务器的IP地址，可以使用IP也可以使用localhost
host:'localhost',
//配置服务端口号
port:'8080',
//自动打开浏览器
open:true,
//热加载
hot:true,
//服务端压缩是否开启
compress:true,
}
3.修改webpack.config.js
(1).引入webpack
const webpack=require('webpack');
(2).修改plugins
plugins:[
//热更新插件
new webpack.HotModuleReplacementPlugin()
],
(3).向output中添加publicPath
output:{
publicPath:'/dist',//必须加publicPath
filename:'[name].js',
path: path.resolve(__dirname, './dist')
},
4.修改package.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"server": "webpack-dev-server"
},
5.运行(终端中输入)
npm run server
注释:
运行出现Cannot find module 'webpack-cli/bin/config-yargs’时
npm install webpack-cli//(重新运行)
运行出现Cannot find module 'webpack’时
npm i webpack -D//(重新运行)
CSS文件打包
1.安装style-loader与css-loader
npm i style-loader css-loader -D
2.配置webpack.config.js中的module为
module:{
rules:[
{ //css使用
test:/\.css$/, //用于匹配处理文件的扩展名的表达式，这个选项是必须进行配置的；
use:[ //loader名称，就是你要使用模块的名称，这个选项也必须进行配置，否则报错
'style-loader',
'css-loader'
],
//include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）
//query：为loaders提供额外的设置选项（可选）
}
]
},
3.在src中新建css文件夹且创建index.css(src/css/index.css)
body{
background-color: red;
color: white;
}
4.在src中index.js内引用(src/index.js)
import './css/index.css'
5.运行
npm run server
打包HTML文件
1.安装html-webpack-plugin
npm install --save-dev html-webpack-plugin
2.在webpack.config.js中引入
const htmlPlugin= require('html-webpack-plugin')
3.配置webpack.config.js中的plugins为
plugins:[
//热更新插件
new webpack.HotModuleReplacementPlugin(),
//打包HTML插件
new htmlPlugin({
minify:{ //对html文件进行压缩
removeAttributeQuotes:true //removeAttrubuteQuotes去掉属性的双引号
},
hash:true, //开发中js有缓存效果，所以加入hash，这样可以有效避免缓存JS
template:'./src/index.html' //要打包的html模版路径和文件名称
})
],
4.在src目录下新建index.html(src/index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>webpack</title>
</head>
<body>
<div id='title'></div>
</body>
</html>
5.删除dist目录且重新打包
npx webpack
CSS中的图片处理
1.安装file-loader与url-loader
npm install --save-dev file-loader url-loader
2.修改src目录下index.html(src/index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>webpack</title>
</head>
<body>
<div id='tupian'></div>
<div id='title'></div>
</body>
</html>
3.修改src->css目录下index.css(src/css/index.css)
body{
background-color: red;
color: white;
}
#tupian{
/* 此处图片与文件路径自行创建 */
background-image: url(../images/全局npm.png);
width:500px;
height:500px;
}
4.配置webpack.config.js中的module为
rules:[
{ //css使用
test:/\.css$/, //用于匹配处理文件的扩展名的表达式，这个选项是必须进行配置的；
use:[ //loader名称，就是你要使用模块的名称，这个选项也必须进行配置，否则报错
'style-loader',
'css-loader'
],
//include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）
//query：为loaders提供额外的设置选项（可选）
},
{ //css中图片使用
test:/\.(png|svg|jpg|gif)$/,
use:[{
loader:'url-loader',
options:{
//大于此大小则打包成图片
limit:500000 //把小于500000B的文件打成Base64的格式，写入JS
}
}]
},
]
5.打包且检验
npx webpack
npm run server
处理HTML中的图片
1.安装html-withimg-loader
npm install html-withimg-loader --save
2.配置webpack.config.js中的module为
module:{
rules:[
{ //css使用
test:/\.css$/, //用于匹配处理文件的扩展名的表达式，这个选项是必须进行配置的；
use:[ //loader名称，就是你要使用模块的名称，这个选项也必须进行配置，否则报错
'style-loader',
'css-loader'
],
//include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）
//query：为loaders提供额外的设置选项（可选）
},
{ //css中图片使用
test:/\.(png|svg|jpg|gif)$/,
use:[{
loader:'url-loader',
options:{
limit:500, //把小于500B的文件打成Base64的格式，写入JS 大于此大小则打包成图片
outputPath:'images/', //输出的文件夹 大于此大小则打包成图片输出
esModule:false //html-webpack-plugin与html-withimg-loader发生了冲突解决方法
}
}]
},
{ //将html与htm中的img打包出来
test: /\.(htm|html)$/i,
use:[ 'html-withimg-loader']
},
]
},
注:file-loader升级到5.0了，所以需要在file-loader的options里使用一个配置:esModule:false(url-loader包含file-loader大多功能)
3.向src目录下的index.html中增加(图片自行添加)
<div><img src="images/孤独.png" alt=""></div>
4.打包及热更新
npx webpack
npm run server
Less文件的使用与打包
1.安装Less
npm install --save-dev less
2.在原有的基础上安装less-loader(原有基础:style-loader css-loader)
npm n install --save-dev less-loader
3.向webpack.config.js中的module增添
{
test:/\.less$/,
use:[
'style-loader',
'css-loader',
'less-loader',
]
},
4.编写black.less(/css/black.less)
@base :#000;
#gogo{
width:300px;
height:300px;
background-color:@base;
}
5.引入到index.js文件中
import './css/black.less'
6.打包及热更新
npx webpack
npm run server
Sass文件的使用与打包
1.安装Sass
npm install --save-dev node-sass
2.在原有的基础上安装sass-loader(原有基础:style-loader css-loader)
npm install --save-dev sass-loader
3.向webpack.config.js中的module增添
{
test: /\.scss$/,
use:[
'style-loader',
'css-loader',
'sass-loader',
]
}
4.编写Sass.scss(/css/Sass.scss)
$nav-color: #FFF;
#nav {
$width: 100%;
width: $width;
height:30px;
background-color: $nav-color;
}
5.引入到index.js文件中
import './css/Sass.scss'
6.打包及热更新
npx webpack
npm run server
css代码分离
1.安装mini-css-extract-plugin
npm install mini-css-extract-plugin -D
2.向webpack.config.js中增添
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
2.向webpack.config.js中的module增添
{
test: /\.css$/i,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: { //解决打包后背景图丢失问题
publicPath: '../',
},
},
'css-loader',
],
},
3.向webpack.config.js中的plugins增添
new MiniCssExtractPlugin({ //css分离
filename: 'style/[name].css',// 分离后的文件名
chunkFilename: '[id].css',
ignoreOrder: false//启用可删除有关顺序冲突的警告
}),
4.打包及热更新
npx webpack
npm run server
自动处理css前缀兼容不同浏览器
1.安装postcss-loader 和autoprefixer(自动添加前缀的插件)
npm install --save-dev postcss-loader autoprefixer
2.在项目根目录，建立postcss.config.js文件且写入
module.exports = {
plugins:[
require('autoprefixer')({
browsers : ['last 100 versions']//必须设置支持的浏览器才会自动添加添加浏览器兼容
//> 1% // 浏览器的市场占有 得超过 百分之1
//last 2 versions // 浏览器的最后俩个版本
})
]
}
3.修改webpack.config.js中的module为
{
test: /\.css$/i,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: { //解决打包后背景图丢失问题
publicPath: '../',
},
},
'css-loader',
'postcss-loader'
],
},
4.打包及热更新
npx webpack
npm run server
5.打包效果展示
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-box-shadow: 1px 1px 0 rgba(0, 0, 0, .25);
-moz-box-shadow: 1px 1px 0 rgba(0, 0, 0, .25);
box-shadow: 1px 1px 0 rgba(0, 0, 0, .25);
消除未使用的CSS
1.安装purify-css和PurifyCSS-webpack
npm i -D purifycss-webpack purify-css
2.在webpack.config.js中引入
const glob = require('glob');
const PurifyCSSPlugin = require('purifycss-webpack');
3.向webpack.config.js中的plugins增添
new PurifyCSSPlugin({
// 首先保证找路径不是异步的,所以这里用同步的方法
// path.join()也是path里面的方法,主要用来合并路径的
// 'src/*.html' 表示扫描每个html的css
paths: glob.sync(path.join(__dirname, 'src/*.html')),
})
4.打包及热更新
npx webpack
npm run server
集成babel支持
1.安装babel-loader、babel-core、babel-preset-env
npm install -D babel-loader babel-core babel-preset-env
注:babel-loader安装最新版本后博主出现打包错误
package.json中更改其版本为"^7.0.0"后恢复正常
2.在项目根目录下创建.babelrc文件且输入
{
"presets": ["env"]
}
3.向webpack.config.js中的module增添
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader"
}
4.向js文件中增添es6语法
5.打包及热更新
npx webpack
npm run server
开启打包调试
向webpack.config.js中entry的同级目录增添
//开发者模式 可调错
devtool:'source-map',
//开启调试功能,上线之前需将此行注释
1.source-map:在一个单独文件中产生一个完整且功能完全的文件。这个文件具有最好的source map,但是它会减慢打包速度；
2.cheap-module-source-map:在一个单独的文件中产生一个不带列映射的map，不带列映射提高了打包速度，但是也使得浏览器开发者工具只能对应到具体的行，不能对应到具体的列（符号）,会对调试造成不便。
3.eval-source-map:使用eval打包源文件模块，在同一个文件中生产干净的完整版的sourcemap，但是对打包后输出的JS文件的执行具有性能和安全的隐患。在开发阶段这是一个非常好的选项，在生产阶段则一定要不开启这个选项。
4.cheap-module-eval-source-map:这是在打包文件时最快的生产source map的方法，生产的 Source map 会和打包后的JavaScript文件同行显示，没有影射列，和eval-source-map选项具有相似的缺点。
上述选项由上到下打包速度越来越快，同时也具有越来越多的负面作用，较快的打包速度的后果就是对打包后的文件的的执行有一定影响。
引入第三方库
1.安装JQuery
npm install --save jquery
2.向index.js文件中增添
import $ from 'jquery';
3.当前文件中使用JQ
watch自动打包
运行watch
npx webpack --watch
--END--
标签：npm,webpack4,入门,入土,loader,webpack,打包,js,css 来源： https://blog.csdn.net/Youngster_yj/article/details/111960395