1. 安装
webpack是基于node所以首先要安装node环境和npm
安装webpack 4 需要 安装webpack 和webpack-cli
全局安装 :
npm install webpack -g
npm install webpack-cli -g
局部安装：
npm install webpack -S
npm install webpack-cli -S
同时局部安装：
npm install webpack webpack-cli -S
安装完成后可以运行 webpack -v 查看webpack 版本
运行项目需要全局安装 webpack 然后在项目跟目录内局部 安装
二、webpack 打包
1、首先我们创建个 demo1文件夹作文项目目录 然后在demo1里创建 src 文件夹
默认出口entry : src/index.js
默认出口output : dist/main.js
2、局部安装webpack
npm install webpack wabpack-cli -S
3、初始化项目生成package.json 执行以下命令
npm init
4、在src 目录下创建一个 index.js 表示默认的入口文件，此时的目录结构如下
image.png
5、在index.js 写入
alert("webpack")
6、启动命令行，进入项目目录 运行webpack命令进行打包
image.png
执行完成出现以下内容表示成功，同时项目根目录多出dist目录
image.png
此时的项目目录结构 mian.js 就是打包后的文件
image.png
此时我们新建 index.html 并引入 mian.js
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript" src="dist/main.js"></script>
</body>
</html>
打开html将弹出 webpack
webpack配置
在根目录新建 webpack.cofig.js
var path = require('path');
module.exports = {
mode: 'development', //模式
//入口
entry: './src/index.js',
//入口
output: {
path: path.resolve(__dirname, 'dist'), //出口路径
filename: 'main.js' //打包好的文件名
},
//模块：例如解读css，图片，html的转换压缩
module:{},
//插件
plugins:[],
//本地服务器
devServer:{}
};
webpack-dev-server 本地服务器
安装 webpack-dev-server
npm install webpack-dev-server -S
修改package.json文件 在scripts 对象下添加以下属性
"scripts": {
//运行 npm run dev 启动服务器 --自动打开浏览器 --并且实时刷新
"dev": "webpack-dev-server --open --inline"
},
配置webpack.config.js devServer对象最简单的devServer配置项只有四个
//本地服务器
devServer:{
//服务器的路径，相当于phpStudy的www目录
contentBase:'./',
//服务器ip地址，不指定该选项默认就是localhost
host:'localhost',
//端口，不指定自动生成，默认8080
port：8080,
//实时刷新
inline:true
}
执行 npm run dev 将自动打开浏览器
npm run dev
loader
webpack 自身只理解 JavaScript,所以要打包非js文件如html、css、图片等需要使用loader，可以吧loader看做是转换器
- css 打包
让webpack识别 css 需要用到css-loader和style-loader
首先我们先不安装 css-loader和style-loader，在src目录下新建 css目录并创建 style.css
body{
background-color: red;
}
在入口文件index.js中引入
import css from './css/style.css'
打包会报错，大致意思是你缺少对应loader来识别下面的样式
image.png
然后安装 css-loader 和 style-loader
npm install css-loader style-loader -S
配置 webpack.config.js
//模块：例如解读css，图片，html的转换压缩
module:{
rules: [
{
test:/\.css$/,
use:[
{loader:'style-loader'},
{loader:'css-loader'}
]
}
]
}
然后打包就成功了
image.png
css 图片处理
我们在css里给body一个背景图
body{
background-color: red;
background-image: url(../image/img2.png);
}
然后打包，会报错，依然是缺少解析图片的loader，file-loader 和 url-loader
image.png
解释下：
file-loader：解决引用路径的问题，拿background样式用url引入背景图来说，我们都知道，webpack最终会将各个模块打包成一个文件，因此我们样式中的url路径是相对入口html页面的，而不是相对于原始css文件所在的路径的。这就会导致图片引入失败。这个问题是用file-loader解决的，file-loader可以解析项目中的url引入（不仅限于css），根据我们的配置，将图片拷贝到相应的路径，再根据我们的配置，修改打包后文件引用路径，使之指向正确的文件。
url-loader：如果图片较多，会发很多http请求，会降低页面性能。这个问题可以通过url-loader解决。url-loader会将引入的图片编码，生成dataURl。相当于把图片数据翻译成一串字符。再把这串字符打包到文件中，最终只需要引入这个文件就能访问图片了。当然，如果图片较大，编码会消耗性能。因此url-loader提供了一个limit参数，小于limit字节的文件会被转为DataURl，大于limit的还会使用file-loader进行copy。
安装url-loader和file-loader
npm install url-loader file-loader -S
配置 webpack.config.js
{
test: /\.(png|jpg|gif|jpeg)/,
use: [{
loader: 'url-loader',
options:
{
limit: 100000 //小于100kb 转base64
}
}]
}
注意：只需配置 url-loader 即可，因为url-loader封装了file-loader，
插件
html-webpack-plugin （用于模板生成html，自动引入output文件）
该插件会自动生成html入口文件并自动引入 出口 文件
安装
npm install html-webpack-plugin -S
配置 webpack.config.js
1、导入插件
var HtmlWebpackPlugin = require('html-webpack-plugin')
2、实例化插件
//插件
plugins:[
new HtmlWebpackPlugin({
template:'index.html',//本地模板文件的位置
minify:{
removeAttributeQuotes:true,//去除引号
removeComments:true,//去除注释
removeEmptyAttributes:true,//去除空属性
collapseWhitespace:true//去除空格
}
})
]
image.png
我们将html 的引用 出口文件 的script标签删掉在打包
<html>
<head>
<title></title>
</head>
<body>
<div class="warp"></div>
</body>
</html>
此时dist目录会多出一个index.html 文件，并且此时已自动引入了出口文件，并进行了代码压缩、去除多余引号、去除注释、去除空属性、去除空格一系列操作
<!DOCTYPE html><html><head><title></title></head><body><div class=warp></div><script type=text/javascript src=main.js></script></body></html>
注意：如果不配置template 那么生成的index.html将没有 内容(<div class="warp"></div>)仅仅只是
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type=text/javascript src=main.js></script>
</body>
</html>
html的img
我们在index.html中引用一个图片打包后路径是不对的，这时就需要 html-withimg-loader，来解决引用图片路径不对问题，
安装 html-withimg-loader
npm install html-withimg-loader -S
配置webapck.config.js loader
{
test: /\.html$/,
use: [{
loader: 'html-withimg-loader'
}]
}
最后打包html图片路径问题已解决
加载字体
那么，像字体这样的其他资源如何处理呢？file-loader 和 url-loader 可以接收并加载任何文件，然后将其输出到构建目录。这就是说，我们可以将它们用于任何类型的文件，包括字体
-
下载奥森图标 放入 src目录下
image.png
- 入口文件 index.js中引入 font-awesome.css
import './css/font-awesome.css';
index.html里 添加个图标
<i class='fa fa-shield'></i>
-
打包这时候会报错，无法识别字体，需要配置loader
image.png
-
配置webapck.config.js
{
test: /\.(woff|woff2|eot|ttf|otf|svg)$/,
use: [
'url-loader'
]
}
最后打包一切ok，
提取css
如果不想 css 打包在js里可以使用插件 extract-text-webpack-plugin
- 安装
npm install extract-text-webpack-plugin@next -S
注意 webpack4.x要加 @naxt
- 入口文件index.js导入插件
var ExtractTextPlugin = require('extract-text-webpack-plugin')
- 配置webapck.config.js
- 初始化插件 传入一个参数 打包后的css文件名
//插件
plugins: [
new HtmlWebpackPlugin({
template: 'index.html', //本地模板文件的位置
minify: {
removeAttributeQuotes: true, //去除引号
removeComments: true, //去除注释
removeEmptyAttributes: true, //去除空属性
collapseWhitespace: true //去除空格
}
}),
new ExtractTextPlugin("css/[name].css"),
]
- 重新配置 css-loader 和 style-loader
{
test: /\.css$/,
use: ExtractTextPlugin.extract(
{
fallback: "style-loader",
use: [
{
loader: 'css-loader',
options:
{
minimize: true, //启用压缩
}
}],
publicPath: "../" //解决打包后 背景图片路径不对问题
})
}
ES6语法装换 babel
核心：
babel-core
功能：
babel-loader
babel-preset-env
babel-preset-react
- 下载
npm install babel-core babel-loader babel-preset-env babel-preset-react -S
babel配置有两种方式
v1：配置webpack.config.js
{
test: /(\.jsx|\.js)$/,
use:
{
loader: "babel-loader",
options:
{
presets: ["env", 'react']
}
},
//不需要转换的目录
exclude: /node_modules/
}
v2：根目录新建.babelrc文件
{
"presets":['env','react']
}
同时 webapck.conifg.js去除对应代码
{
test: /(\.jsx|\.js)$/,
use:
{
loader: "babel-loader",
},
//不需要转换的目录
exclude: /node_modules/
}
网友评论