锐客网

  1. 首页 > it技术 > >

webpack随笔纪要

webpack安装前提条件：
安装node.js环境
webpack安装过程：
npm install -g webpack安装webpack到全局环境中(缺点：webpack官方不建议安装到全局，这样会影响项目，如果之前的项目使用的是webpack低版本，那会导致低版本使用了安装在全局环境中的webpack版本)
webpack安装到局部环境(注意：项目目录名称不能是webpack关键字)
1.cd 进入项目目录
2.npm init(初始化环境，默认需要填写一堆基本信息)
3.npm install --save-dev webpack(使用--save-dev是开发环境，如果需要使用生产环境则直接使用--save)
webpack打包项目过程(以下目录都要有的目录)
1.dist(用于生产环境，也就是打包后的文件目录)
2.src(用户开发环境，也就是书写的代码都放在此目录下)
3.在dist目录下新建一个index.html文件并在里面书写html代码，同时在结尾加上一段
4.在src目录下新建一个entery.js并写入document.getElementById("title").innerHTML = "Hello World"; (其中entery.js为入口文件)
5.命令行使用webpack src/entery.js dist/bundle.js(解析：webpack 要打包的文件打包后的目标文件，webpack最新版需要使用webpack -o 要打包的文件打包后的目标文件)
6.安装live-server(nmp install -g live-server)
7.运行live-server会打开浏览器进行预览
△真正项目上不是上面这样用，上面是简单的做一下打包，下面是在项目中会用到的方式进行打包的过程
注意：要使用webpack.conf.js配置文件,需要在package.js中的scripts选项加入"build": "webpack --config webpack.conf.js",然后直接使用npm run build即可进行打包
1.在项目根目录下新建webpack.conf.js,该文件里的内容：
//引入node的path模块
const path=require("path");
module.exports={
//入口配置项
entry:{
//入口文件路径
index1:path.join(__dirname, "./src/index1.js"),
index2:path.join(__dirname, "./src/index2.js"),
},
//出口配置项
output:{
//输入的目标路径
filename: "[name].bundle.js",
path:path.resolve(__dirname, "dist")
},
//模块配置项
module:{},
//插件配置项
plugins:[],
//webpack开发服务项
devServer:{}
}
△webpack的热更新
1.在webpack.conf.js的devServer中加入以下参数：
devServer:{
//需要热更新的目录路径
contentBase:path.resolve(__dirname, "dist"),
//热更新访问地址
host:"192.168.3.10",
//热更新端口
port:1717,
//热更新是否压缩(服务器端)
compress:true
}
2.使用热更新需要环境中安装webpack-dev-server服务,如果该服务需要安装到当前项目中,直接使用nmp install webpack-dev-server --save-dev(开发环境,--save安装到上线环境),
安装完成之后,需要在目录中的package.json中的scripts选项中配置一个别名
"dev": "webpack-dev-server --config webpack.conf.js"
3.运行npm run dev,
如果不这样配置会报错，说找不到入口(完成后,直接访问http://192.168.3.10:1717即可,就可以完成热更新操作)
△打包CSS3文件
1.打包css文件需要安装style-loader、css-loader模块(执行npm install style-loader --save-dev、npm install css-loader --save-dev)
2.在入口文件所在目录中新建css文件夹并在该文件夹中新建样式文件,然后在入口js文件中使用import css from 路径(该路径必须为相对路径)
3.在webpack.conf.js文件的modules选项中配置如下参数:
rules:[
{
//正则表达式,匹配对应后缀名的文件
test:/\.css$/,
//使用什么loader模块进行打包
use:['style-loader', 'css-loader']
}
]
例外两种写法:
rules:[
{
//正则表达式,匹配对应后缀名的文件
test:/\.css$/,
//使用什么loader模块进行打包
loader:['style-loader', 'css-loader']
}
]
rules:[
{
//正则表达式,匹配对应后缀名的文件
test:/\.css$/,
//使用什么loader模块进行打包
loader:[{
loader:"style-loader"
},{
loader:"css-loader"
}]
}
]
△打包压缩js文件
1.执行npm install uglifyjs-webpack-plugin --save-dev进行安装并保存到package.json中
2.在webpack.conf.js顶部中引入：
const uglify = require("uglifyjs-webpack-plugin");
3.plugins中写上new uglify();
4.执行打包指令进行打包
△打包html文件
1.执行npm install html-webpack-plugin --save-dev
2.在webpack.conf.js中引入const htmlPlugin = require('html-webpack-plugin');
3.将原来在dist目录下的index.html剪切到src目录下并将index.html文件中引入的js文件去掉(因为打包出来的文件webpack会自动引入js文件，无须我们手动添加)
4.在webpack.conf.js中的plugins属性中输入如下：
new htmlPlugin({
minify:{
//去掉html文件中引号(单引号、双引号都会去除)
removeAttrubuteQuotes:true
},
//防止js文件有缓存，所以会在js文件后加入?hash值(热更新的时候hash值会改变)
hash:true,
//需要打包的html文件
template:"./src/index.html"
});
△CSS文件中的图片处理
1.执行npm install file-loader url-loader --save-dev , (这两个是解析图片用的loader,这两个loader只需要引入url-loader即可,以为url-loader里已经包含了file-loader,他们之间会自动转换)
2.在webpack.conf.js中module中添加(如果图片小于limit的大小会把图片转成base64的格式打包进js中,如果大于limit会直接把图片放入dist目录中,outputPath指的是超出limit大小会把图片放到该目录下,并将该路径打包到js文件中):
module:{
rules:[{
test:/\.(png|jpg|gif)$/,
use:[{
loader:"url-loader",
options:{
limit:500000,
outputPath:'images/'
}
}]
}]
}
3:在src下新建一个images文件夹,并把背景图片bg.jpg放入该文件夹中
4:在src/css/style.css文件中设置一个背景图片：
body{
background:url(../images/bg.jpg) no-repeat;
}
5.运行live-server查看结果
△解决图片路径问题
1.运行npm install extract-text-webpack-plugin --save-dev
2.定义const extractTextPlugin = require("extract-text-webpack-plugin");
3.在webpack.conf.js定义一个变量(这里的地址需要定义成devServer上的地址和端口)
var websit = {
publicPath:"http://127.0.0.1:8080"
};
4.在webpack.conf.js中出口文件配置output选项中加入：
publicPath:website.publicPath
4.webpack.conf.js中将module中的值：
rules:[
{
test:/\.css$/,
use: extractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
}
]
5.webpack.conf.js中plugins的值增加(意思就是将抽离出来的css文件放入dist目录下的css文件夹中)：
new extractTextPlugin("css/style.css")
4.然后打包,会发现打包出来的index.html中的路径会变成绝对路径
注意:安装extract-text-webpack-plugin,如果webpack版本小于4.0可以直接使用npm install extract-text-webpack-plugin --save-dev进行安装,
如果是webpack4.0之后的版本需要使用npm install extract-text-webpack-plugin@next --save-dev进行安装即可
△解决html图片的问题
1.运行npm install html-withimg-loader --save-dev
2.在webpack.conf.js中的module加入：
{
test: /\.(htm|html)$/i,
use:[ 'html-withimg-loader']
}
3.在src/index.html加入webpack随笔纪要
文章图片

4.运行打包操作,打包完成后会发现src的url也会打进去了
注意：此模块要结合extract-text-webpack-plugin进行使用，就可以解决图片的路径问题
△分离less文件到css文件中
1.运行npm install less less-loader --save-dev
2.在src/css目录下新建style.less文件,写入：
@bgcolor:red;
#div-title{
width:100px;
height:100px;
background-color:@bgcolor;
}
3.在入口文件(index.js)中引入该less文件：import less from "./css/style.less";
4.在webpack.conf.js中module中将加入：
{
test:/\.(less)$/,
use: extractTextPlugin.extract({
fallback: "style-loader",
use: extractTextPlugin.extract({
fallback: "style-loader",
use: [{
loader:"css-loader"
},
{
loader:"less-loader"
}]
})
})
}
5.打包测试
注意:less打包也需要配合extract-text-webpack-plugin进行使用与输出
△分离sass文件到css文件中
sass中分两种语法：
sass语法：不能带大括号、分号，不然会出现语法错误，如，
#abc
width: 100px
height: 100px
注意：width: 100px中:后必须要有空格否则会出现语法错误，这点值得注意
scss语法：跟原来css写法一样
1.运行npm install node-sass sass-loader --save-dev
2.在src/css目录下新建style.scss文件,写入：
$fontColor:red;
#div-title{
color:$fontColor;
}
3.在入口文件(index.js)中引入该sass文件：import sass from "./css/style.scss";
4.在webpack.conf.js中module中将加入：
{
test:/\.(sass|scss)$/,
use: extractTextPlugin.extract({
fallback: "style-loader",
use: extractTextPlugin.extract({
fallback: "style-loader",
use: [{
loader:"css-loader"
},
{
loader:"sass-loader"
}]
})
})
}
5.打包测试
注意:sass打包也需要配合extract-text-webpack-plugin进行使用与输出
△给需要css3属性加上前缀
1.执行npm install postcss-loader autoprefixer --save-dev
2.在项目根目录下新建名为postcss.config.js文件,并在里面写入：
module.exports={
plugins:[
//安装的插件名称
require("autoprefixer")
]
}
3.在webpack.conf.js的module的rules下.css规则下加入:
{
loader:"postcss-loader"
}
这种写法可以在后面加入其它参数选项,还可以使用这种方式:
"postcss-loader"
4.在.css文件中加入存在兼容问题的属性:
transform: rotate(45deg);
appearance: none;
5.打包测试
注意：如果打包没问题，一般css文件中就会自动给需要加前缀的属性加上前缀，如：
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
△删除没用使用过的css样式(冗余样式)
1.执行npm install purifycss-webpack purify-css --save-dev(--save-dev等价于-D)
2.在webpack.conf.js文件中加入:
const glob = require("glob");
const PurifyCSSPlugin = require("purifycss-webpack");
3.在webpack.conf.js的plugins中加入：
new PurifyCSSPlugin({
//通过这个插件检索src下所有html文件没有使用到的css属性进行删除
paths:glob.sync(path.join(__dirname, "src/*.html"))
})
4.打包测试
△使用devtool进行调试
在webpack.conf.js中加入参数：
devtool:'cheap-source-map'
具体的参数值参考https://blog.csdn.net/qq_39963971/article/details/78218970
△引入jquery
方法一(局部引入)：
1.执行npm install jquery --save-dev
2.在入口文件引入jquery
import $ from 'jquery';
3.使用jquery进行常规操作即可
方法二(全局引入)：
1.执行npm install jquery --save-dev
2.在webpack.conf.js中引入
const webpack = require('webpack');
3.在webpack.conf.js的plugins中使用：
new webpack.ProvidePlugin({
$:"jquery"
})
4.使用jquery进行常规操作即可
△使用BannerPlugin声明版权信息
1.在webpack.conf.js中引入webpack:
const webpack = require("webpack");
2.在webpack.conf.js中plugins中声明版权信息：
new webpack.BannerPlugin('JS版权所有，看官方免费视频到js.com收看')
△使用ProvidePlugin引入插件
1.执行npm install jquery --save-dev
2.webpack.conf.js中entry中加入：
jquery:'jquery'
2.在webpack.conf.js中引入webpack
const webpack = require("webpack");
3.在webpack.conf.js的entry中引用：
jquery:'jquery'
4.在webpack.conf.js的plugins中引入插件：
//(4.0之前版本)
new webpack.optimize.CommonsChunkPlugin({
//name对应入口文件中的名字，我们起的是jQuery,多个插件用['jquery', 'vue']
name:'jquery',
//把文件打包到哪里，是一个路径,多个插件用filename:"dist/js/[name].js",
filename:"dist/js/jquery.js",
//最小打包的文件模块数，这里直接写2就好
minChunks:2
})
//(4.0版本之后),要与entry和devServer平级
optimization:{
splitChunks:{
cacheGroups:{
commons:{
name:'jquery',
filename:"dist/js/jquery.js",
minChunks:2
}
//如果抽离多个类库写在这里
}
}
}
△静态资源集中输出
1.执行npm install copy-webpack-plugin --save-dev
2.在webpack.conf.js引入安装好的插件
const copyWebpackPlugin = require("copy-webpack-plugin");
3.在webpack.conf.js中plugins中引入：
new copyWebpackPlugin([{
//需要打包的目录
from: __dirname + "/src/public",
//目标目录,使用相对路径即可,相对于打包后的路径
to: "./public"
}])
4.在项目根目录下新建public目录,随便新建一个文件,进行打包测试
△引入json文件
1.在src下新建一个文件名叫config.json,内容为：
{
"name":"张三",
"age":24,
"sex":"男"
}
2.在入口文件使用:
var json = require("./config.json");
3.使用alert打印json里的属性
△启动webpack中的热更新
1.在webpack.conf.js引入：
const webpack = require("webpack");
2.在webpack.conf.js中的plugins加入：
【webpack随笔纪要】new webpack.HotModuleReplacementPlugin()

    推荐阅读


    上一篇：CSS3|CSS3 transform 属性 旋转

    下一篇：68/70|68/70 想念