webpack 4.X版本的简单使用(处理js/css/less/scss/url(图片)/字体文件)
- 创建一个工程目录，在该目录下创建dist和src两个目录，并在src中创建一个index.js文件(其他目录随意)
- 在dos窗口进入该工程目录，安装webpack和webpack-cli(需要先安装npm，nodejs)
- 方法一：全局安装
npm install -g webpack
npm install -g webpack-cli
- 方法二：在工程目录中安装
npm install --save-dev webpack
npm install --save-dev webpack-cli
-
初始化 npm init -y 初始化成功后会出现一个package.json文件
-
下载jQuery npm install jquery -S
-
编写文件
index.html：
<body>
<ul>
<li>第1个</li>
<li>第2个</li>
<li>第3个</li>
<li>第4个</li>
<li>第5个</li>
</ul>
</body>
index.js
//导入jQuery
import $ from 'jquery'
$(function(){
$('li:odd').css('backgroundColor', 'lightblue')
})
- 打包编译index.js文件 webpack --mode development
注：使用该默认方法打包js文件，需保证文件名为index.js且在src目录下，打包成功后默认生成dist目录下的main.js文件
- 非默认：
- 在项目根目录下创建webpack.config.js文件并进行如下配置
const path = require("path")
module.exports = {
entry: {
app:"./index.js"
},
output: {
publicPath:__dirname + "/dist",
path:path.resolve(__dirname, "dist"),
filename:"bundle.js"
}
}
或：
entry:path.join(__dirname, './src/main.js'),
output:{
path: path.join(__dirname, './dist'),
filename: 'bundle.js'
}
- 执行 webpack --mode development
使用webpack-dev-server实现自动打包编译
-
npm i webpack-dev-server -D(i -D 是 install --save-dev 的简写)
注：想要webpack-dev-server能够正常运行，本地项目必须安装webpack -
在package.json文件下的dev中添加
-webpack-dev-server
执行npm run dev打包编译成功但是并未退出打包状态，在该状态下若index.js文件被改变，则会自动打包编译生成新的bundle.js文件
注：使用Ctrl + C退出
**
Webpack处理CSS样式表
**
- 在项目中安装 style-loader 和 css-loader
npm i style-loader css-loader -D
- 在webpack.config.js文件的module.exports中新建一个module节点(请看上面的非默认打包的配置)
module: {//用于配置所有第三方模块加载器
rules:[//第三方模块加载器的规则
//处理.css文件的第三方loader规则，后面的loader先处理
{test:/\.css$/, use: ['style-loader', 'css-loader']}
]
}
处理less文件
- 安装less-loader ：
npm i less-loader -D
需要安装less依赖：npm i less -D - 在webpack.config.js中配置
//处理.less文件的第三方loader规则
{test:/\.less$/, use: ['style-loader', 'css-loader', 'less-loader']}
处理scss文件
- 安装 sass-loader ：
npm i sass-loader -D
需要安装 node-sass 依赖：npm i node-sass -D(可能用npm安装不了，需要使用cnpm) - 在webpack.config.js中配置
//处理.scss文件的第三方loader规则
{test:/\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader']}
处理URL(图片)
- 安装url-loader(需要依赖file-loader)
npm i url-loader file-loader -D
- 在webpack.config.js中配置
//处理图片路径的loader
{test:/\.(jpg|jpeg|png|pneg|gif|bmp)$/, use: 'url-loader'}
处理bootstrap图标
- 下载boostrap(3.X版)：npm i [email protected] -D
- 在index.js中引入
import 'bootstrap/dist/css/bootstrap.css'
- 在webpack.config.js中配置
//处理字体文件
{test:/\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader'}
- 在html中调用(官网：https://v3.bootcss.com/components/)
<span class="glyphicon glyphicon-star" aria-hidden="true"></span>
4.x版(https://useiconic.com/open)：
- 下载：npm i [email protected] -D
由于4.x版本icon文件分离出去所以还需要下载open-iconic：npm i https://github.com/iconic/open-iconic.git -D(下载可能有点慢，要花个几分钟，可用cnpm下载) - 在index.js中引入
在3.x的基础上引入
import 'open-iconic/font/css/open-iconic-bootstrap.css'
- 在webpack.config.js中配置
//处理字体文件，在3.x的基础上多了一个otf
{test:/\.(ttf|eot|svg|woff|woff2|otf)$/, use: 'url-loader'}
- 在html中引用
<span class="oi oi-account-login"></span>
注：可在上边的网站中找到使用方法，如图，由于导入的Bootstrap Font的CSS文件所以只有第四种方式是可用的，每一种方式引用的文件不一样，请配套使用