安装方式
-
运行
npm i webpack -g
全局安装webpack,这样就能在全局使用webpack的命令,不建议使用 -
在项目根目录中运行
npm i webpack --save-dev
安装到项目依赖中
查看webpack版本信息
webpack -v
初始化项目
npm init-y
使用npm管理项目中的依赖包,在项目根目录中使用该命令
使用webpack的配置文件简化打包时候的命令
webpack.config.js 在项目根目录中创建该文件
由于运行webpack命令的时候,webpack需要指定入口文件和输出文件的路径,所以,我们需要在webpack.config.js
中配置这两个路径 就可以在根目录下直接使用 webpack命令打包:
// 导入处理路径的模块
var path = require('path');
// 导出一个配置对象,将来webpack在启动的时候,会默认来查找webpack.config.js,
// 并读取这个文件中导出的配置对象,来进行打包处理
module.exports = {
// 项目入口文件 __dirname当前模块根目录名
entry: path.resolve(__dirname, './src/index.js'),
// 多入口
// entry:['./src/js/index.js','./src/js/one.js'],
//entry: {
//ind: './src/js/index.js',
//on: './src/js/one.js'
//},
output: { // 配置输出选项
path: path.resolve(__dirname, './dist'), // 配置输出的路径
filename: 'bundle.js' // 配置输出的文件名
},
// 多出口
//output: {
// filename: 'js/webpack02.[name].js',
// path: path.resolve(__dirname, 'dist')
//},
}
index.js中需要把后面需要的文件作为模块引入 这里先引入后面更改webpack.config.js文件时直接运行npm run dev 即可
import $ from 'jquery';
import './index.css';//把css作为模块引入
import './demo.less';//把less作为模块引入
$(function(){
$('div').css({
width:'200px',
height:'300px'
// background:'skyblue'
});
})
实现webpack的实时重新加载(live reloading)
webpack-dev-server
由于每次重新修改代码之后,都需要手动运行webpack打包的命令,比较麻烦,所以使用来实现代码实时打包编译,当修改代码之后,会自动进行打包构建。
npm install webpack-dev-server --save-dev
安装到开发依赖
安装完成之后,在命令行直接运行webpack-dev-server
来进行打包,会报错
此时需要借助于package.json
文件中的指令,来进行运行webpack-dev-server
命令,在scripts
节点下新增"dev": "webpack-dev-server"
指令,发现报错,找不到对应的路径
因为cli4.0以后的版本,舍弃了config-yargs
npm install webpack-cli@3 安装3.0的版本
再次运行 npm run dev
在
根目录
下
可以进行实时打包(npm run dev),但是dist目录下并没有生成bundle.js
文件,这是因为webpack-dev-server
将打包好的文件放在了内存中
点击链接进入:
-
把
bundle.js
放在内存中的好处是:由于需要实时打包编译,所以放在内存中速度会非常快. -
生成的文件是在服务器根目录下
-
这个时候访问webpack-dev-server启动的
http://localhost:8080/
网站发现是一个文件夹的面板,需要点击到src目录下,才能打开我们的index首页,
此时引用不到bundle.js文件,
需要修改index.html中script的src属性为:
<script src="../bundle.js"></script>
-
为了能在访问
http://localhost:8080/
的时候直接访问到index首页,可以使用--contentBase src
指令来修改dev指令,指定启动的根目录:
var path = require('path');
module.exports = {
mode: 'development',
entry: path.resolve(__dirname, './src/index.js'),
output: {
path: path.resolve(__dirname, './dist'),
filename: 'bundle.js' // 配置输出的文件名
},
devServer: {
contentBase: './src', // 表示自动打开src下面的bundle.js
open: true, // 表示自动打开浏览器
port: 3003, // 表示打开的端口号为3003
host: '127.0.0.1' // 表示打开的域名位127.0.0.1
}
}
实现自动打开浏览器、热更新和配置浏览器的默认端口号
使用html-webpack-plugin
插件配置启动页面
npm i html-webpack-plugin --save-dev
安装到开发依赖
修改webpack.config.js
配置文件如下:
var path = require('path');
module.exports = {
mode: 'development',
entry: path.resolve(__dirname, './src/index.js'),
output: {
path: path.resolve(__dirname, './dist'),
filename: 'bundle.js' // 配置输出的文件名
},
devServer: {
contentBase: './src', // 表示自动打开src下面的bundle.js
open: true, // 表示自动打开浏览器
port: 3003, // 表示打开的端口号为3003
host: '127.0.0.1' // 表示打开的域名位127.0.0.1
},
plugins: [
new htmlWebpackPlugin({
//模板路径,即我们自己的html文件
template: path.resolve(__dirname, 'src/index.html'),
filename: 'index.html'//自动生成的HTML文件的名称
})
]
}
启动服务 根目录下:npm run dev
使用webpack打包css文件
npm i style-loader css-loader --save-dev
安装到开发依赖
修改webpack.config.js
配置文件如下:
var path = require('path');
module.exports = {
mode: 'development',
entry: path.resolve(__dirname, './src/index.js'),
output: {
path: path.resolve(__dirname, './dist'),
filename: 'bundle.js' // 配置输出的文件名
},
devServer: {
contentBase: './src', // 表示自动打开src下面的bundle.js
open: true, // 表示自动打开浏览器
port: 3003, // 表示打开的端口号为3003
host: '127.0.0.1' // 表示打开的域名位127.0.0.1
},
plugins: [
new htmlWebpackPlugin({
//模板路径,即我们自己的html文件
template: path.resolve(__dirname, 'src/index.html'),
filename: 'index.html'//自动生成的HTML文件的名称
})
],
module: { // 用来配置第三方loader模块的
rules: [ // 文件的匹配规则
{ test: /\.css$/, use: ['style-loader', 'css-loader'] }
//处理css文件的规则
]
}
}
这里需要注意:use
表示使用哪些模块来处理test
所匹配到的文件;use
中相关loader模块的调用顺序是从后向前调用的;
使用webpack打包less文件
npm i less-loader less --save-dev 安装到开发依赖
修改webpack.config.js
配置文件如下:
var path = require('path');
module.exports = {
mode: 'development',
entry: path.resolve(__dirname, './src/index.js'),
output: {
path: path.resolve(__dirname, './dist'),
filename: 'bundle.js' // 配置输出的文件名
},
devServer: {
contentBase: './src', // 表示自动打开src下面的bundle.js
open: true, // 表示自动打开浏览器
port: 3003, // 表示打开的端口号为3003
host: '127.0.0.1' // 表示打开的域名位127.0.0.1
},
plugins: [
new htmlWebpackPlugin({
//模板路径,即我们自己的html文件
template: path.resolve(__dirname, 'src/index.html'),
filename: 'index.html'//自动生成的HTML文件的名称
})
],
module: { // 用来配置第三方loader模块的
rules: [ // 文件的匹配规则
{ test: /\.css$/, use: ['style-loader', 'css-loader'] },
//处理css文件的规则
{ test: /\.less$/,
use: ['style-loader', 'css-loader','less-loader'] },
//处理less文件的规则
{test: /\.(png|svg|jpg|jpeg|gif)$/i,type: 'asset/resource'}
]
}
}
Sass文件和less文件同理
使用webpack处理css中的路径
npm i url-loader file-loader --save-dev 安装到开发依赖
在less中给div设置背景图片
body{
background-color: rgb(27, 98, 107);
div{
background: url(./girl.jpg) no-repeat;
}
}
添加处理url路径的loader模块 修改webpack.config.js
配置文件如下:
var path = require('path');
module.exports = {
mode: 'development',
entry: path.resolve(__dirname, './src/index.js'),
output: {
path: path.resolve(__dirname, './dist'),
filename: 'bundle.js' // 配置输出的文件名
},
devServer: {
contentBase: './src', // 表示自动打开src下面的bundle.js
open: true, // 表示自动打开浏览器
port: 3003, // 表示打开的端口号为3003
host: '127.0.0.1' // 表示打开的域名位127.0.0.1
},
plugins: [
new htmlWebpackPlugin({
//模板路径,即我们自己的html文件
template: path.resolve(__dirname, 'src/index.html'),
filename: 'index.html'//自动生成的HTML文件的名称
})
],
module: { // 用来配置第三方loader模块的
rules: [ // 文件的匹配规则
{ test: /\.css$/, use: ['style-loader', 'css-loader'] },
//处理css文件的规则
{ test: /\.less$/,
use: ['style-loader', 'css-loader','less-loader'] },
//处理less文件的规则
{
test:/\.(jpg|png|gif)$/,
use:[{
loader:'url-loader',
options:{
// limit :指定大小 hash: 添加hash值,防止重名 name: 原名显示 ext: 文件原后缀
limit:8 * 1024,
name:'[hash:8]-[name].[ext]',
esModule:false}
}],
type:'javascript/auto',
},
]
}
}
这里的写法是webpack5.以后的版本的写法,这里我使用下面的写法时,图片不能显示,查到的解决方法加上 type: 'asset' 不起作用
{ test: /\.(png|jpg|gif)$/, use: 'url-loader?limit=28340&name=[name].[ext]' }
后面的等待更新..