webpack
webpack是一个现代的js应用的静态模块打包工具,简单理解就是用于模块化开发和打包。它的运行依赖于Nodejs环境
(前端模块化打包工具)
gulp和webpack的不同
gulp更加强调的是前端流程的自动化
,模块化不是它的核心。
webpack更加强调模块化开发管理
,而文件压缩合并,预处理等功能,是它附带的功能。
webpack的安装
安装webpack前首先需要安装Node.js,Node.js自带了软件包管理工具npm
利用npm install webpack安装。
webpack的基本使用
在命令行工具中使用:webpack ./src/main.js --output-filename ./dist/bundle.js --output-path . --mode development
loader
loader使用过程:
通过npm安装需要使用的路径,
在webpack.config.js
中的moudles关键字下进行配置
CSS文件的配置
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
],
},
}
css-loader 会对 @import 和 url() 进行处理,就像 js 解析 import/require() 一样
style-loader则会把 CSS 插入到 DOM 中
less文件的处理
module.exports={
// 入口:可以是字符串/数组/对象,这里我们入口只有一个,所以写一个字符串即可
entry:'./src/main.js',
// 出口:通常是一个对象,里面至少包含两个重要属性 filename和path
output:{
path:path.resolve(__dirname,'dist'),// path是一个绝对路径
filename:'bundle.js'
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.less$/,
use: [
{
loader: "style-loader",
},
{
loader: "css-loader",
},
{
loader: "less-loader"
}
]
}
]
}
}
将less转化为CSS中的loader
图片文件的处理
module.exports = {
module: {
rules: [
{
test: /\.(png|jpg|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
// 当加载的图片大小,小于limit时,会将图片编译成base64字符串格式
// 当加载的图片大小,大于limit时,则会报错 需要安装并使用file loader模块
limit: 8192,
},
},
],
},
],
},
};
ES6语法处理
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015']
}
}
}
想要了解更多的话,可以进入官网查询 https://webpack.docschina.org/