webpack4.x安装以及简单使用
webpack4.x安装以及简单使用
- 中文官网
- 安装
- 使用
- hello world
- webpack-dev-server
- html-webpack-plugin
- 自动打开浏览器、热更新和配置浏览器的默认端口号
- webpack打包css
- webpack打包less
- webpack 打包sass
- webpack 打包图片
中文官网
https://www.webpackjs.com/
安装
注意：webpack4.x的命令行工具被单独分离出来，需要单独安装webpack-cli
全局安装：
npm i webpack -gnpm i webpack-cli -g
使用
hello world
- 本地新建一个文件夹，webpack-study（你也可以起别的）
- 进入该文件夹，
npm init，初始化package.json文件，如果想快速创建，可以npm init -y - 安装项目依赖
npm i webpack webpack-cli --save-dev - 新建src文件夹，进入，为了测试打包效果，新建index.js，math.js，index.html
- index.js
import add from './math.js'
console.log(add(1,2));
- math.js
//math.js
export default function add(num1,num2)=>{num1+num2}
- index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack-studytitle>
head>
<body>
<script type="../dist/bundle.js">script>
body>
html>
- 创建配置文件webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',//入口文件
output: {
path: path.resolve(__dirname, 'dist'),//从根目录查找，输出文件的位置
filename: 'bundle.js'//输出文件的名称
},
mode: 'development' // 设置mode，这是新增属性，不设置会有警告，具体的可以参考官方文档
};
- 打包前，目录结构
打包
打包后
打开index.html，查看控制台
- webpack干了什么事？
- 首先，它根据文件之间的依赖关系，将多个文件打包成一个文件
- webpack具有编译es6高级语法的能力，可将es6编译为浏览器认识的es5语法
- webpack还有很多厉害之处…
webpack-dev-server
- 代码改动，每次手动敲命令行重新打包，很麻烦，所以我们需要让他智能一点，实现自动构建
- 安装：
npm i webpack-dev-server --save-dev - 配置：进入package.json文件，在script脚本里边加上一项
"dev":"webpack-dev-server" - 运行:
npm run dev
-
浏览器地址栏输入127.0.0.1:8080
-
这种感觉很像Apache，点开src，默认加载index.html，然后我们发现报错404，仔细一看，竟然dist目录都没有
-
实际上不是没有，是放在了内存中，这样调用快，但是index.html的script的引用路径就得改一下，去掉dist
，此时发现，控制台可以输出预期数据了 -
然而还是有问题，访问8080端口后进入的是一个根目录面板，进入src需要手动去点，很麻烦，我们希望它智能点
-
在上述package.json文件的script里边做些修改，指定访问路径
"dev": "webpack-dev-server --contentBase src" -
当然，对应的index.html里边的script的引用路径也得改一下，
，此时发现，控制台可以输出预期数据了 -
注意，需要重新
npm run dev -
试着改变两个加数的值，你会发现，保存的一瞬间，webpack同步编译，且不需要手动刷新界面，控制台就能实时显示新数据
html-webpack-plugin
由于使用–contentBase指令的过程比较繁琐，需要指定启动的目录，同时还需要修改index.html中script标签的src属性，所以推荐大家使用html-webpack-plugin插件配置启动页面.
- 安装插件：
npm i html-webpack-plugin --save-dev - 修改配置文件
const path = require('path');
// 导入自动生成HTMl文件的插件
var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
mode: 'development', // 设置mode
plugins: [ // 添加plugins节点配置插件
new htmlWebpackPlugin({
template: path.resolve(__dirname, 'src/index.html'), //模板路径
filename: 'index.html' //自动生成的HTML文件的名称
})]
};
- 别忘了，还有两个事
- 修改package.json中script节点中的dev指令，此时不需要手动指定启动目录
"dev": "webpack-dev-server" - 将index.html中script标签注释掉，删了也行，因为html-webpack-plugin插件会自动把bundle.js注入到index.html页面中
- 运行：
npm run dev,此时，你会发现之前的麻烦事已经被解决了 - 查看源代码，确实自己加上了，webpack很优秀，本地查看，是被注释的，或者body是空的
自动打开浏览器、热更新和配置浏览器的默认端口号
-
其实这个很简单，修改一下package.json文件的script脚本dev指令即可
"dev": "webpack-dev-server --hot --port 3000 --open" -
–open表示自动打开浏览器，–port 3000表示打开的端口号为3000，–hot表示启用浏览器热更新
-
当然，也可以在webpack的配置文件里修改
- 打开控制台，你会发现和之前的有点不一样
webpack打包css
- 安装依赖
npm i style-loader css-loader --save-dev - 修改配置文件webpack.config.js
const path = require('path');
// 导入自动生成HTMl文件的插件
var htmlWebpackPlugin = require('html-webpack-plugin');
var webpack = require('webpack');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
mode: 'development' ,// 设置mode
plugins:[ // 添加plugins节点配置插件
new htmlWebpackPlugin({
template:path.resolve(__dirname, 'src/index.html'),//模板路径
filename:'index.html'//自动生成的HTML文件的名称
}),
new webpack.HotModuleReplacementPlugin()
],
devServer:{
hot:true,
open:true,
port:3000
},
module: { // 用来配置第三方loader模块的
rules: [ // 文件的匹配规则
{ test: /\.css$/,
use: ['style-loader', 'css-loader'] //处理css文件的规则
}
]
}
};
- 在之前的src文件夹下新建css文件夹，在css文件夹新建style.css，随便写点样式
- 修改index.js文件，引入对应的样式，并使用
import style from "./css/style.css"
document.querySelector("h1").classList.add("style");
- 在index.html里边加个h1标签，随便写点东西
npm run dev,运行后查看- 审查元素发现，样式已经加上了
webpack打包less
- 大同小异，不再细化
- 安装：
npm i less-loader less -D,-D和之前的–save-dev效果一样 - 修改配置文件
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
webpack 打包sass
- 安装：
npm i sass-loader node-sass --save-dev - 修改配置文件：
{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }
webpack 打包图片
- 安装：
npm install --save-dev file-loader - 配置
{test: /\.(png|svg|jpg|gif)$/, use: ['file-loader'] }
学习资源推荐：https://blog.csdn.net/qq_42813491/article/details/90213353