本文详细介绍Webpack的基本使用方法，包括安装配置、加载不同类型的静态资源、使用插件和搭建本地服务器等核心功能。
Webpack
webpack是一个现代的js应用的静态模块打包工具，依赖于node环境
从图中我们可以看出，webpack将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求
（一）webpack安装
1、先检测是否安装了node.js
2、安装webpack
全局安装
npm i webpack -g
在项目中安装
npm i webpack --save-dev
（二）创建项目
1、建两个文件夹分别为src和dist建一个文件为index.html,在src下建一个文件main.js，在建一个文件夹js，里面建一个mathUtils.js
2、在mathUtils.js里写入简单函数并导出，在main.js中导入
mathUtils.js:
function add(num1, num2) {
return num1 + num2
}
function mul(num1, num2) {
return num1 * num2
}
module.exports = {
add,
mul
}
main.js:
//使用commonjs模块化的规范
const {
add,
mul
} = require('./js/mathUtils')
console.log(add(20, 13));
console.log(mul(20, 30));
3、用webpack命令打包
webpack ./src/main.js -o ./dist/bundle.js
如果webpack版本较低
webpack ./src/main.js ./dist/bundle.js
4、在dist文件夹下会多一个文件bundle.js,在index.html中引用这个文件
<script src="./dist/bundle.js"></script>
打开浏览器
5、我们可以通过配置文件来使用webpack
1）在终端中使用npm init命令自动创建这个package.json文件
npm init
2）在文件的根目录下建一个webpack.config.js文件
webpack.config.js
const path = require('path')
module.exports = {
entry: './src/main.js', //入口文件
output: {
//绝对路径
//_dirname是node.js中的全局变量，指向当前执行脚本所在的目录
path: path.resolve(__dirname, 'dist'), //打包后文件存放的位置
filename: 'bundle.js',//打包后的文件名
},
}
我们可以通过webpack代替 webpack ./src/main.js -o ./dist/bundle.js 的命令进行打包，这样就方便很多
3）我们还可以通过npm的命令对文件进行打包，不过要在package.json文件进行配置，在script对象中添加命令
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
我们就可以通过npm run build对文件进行打包
（三）配置Loader
Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。loader可以加载css、图片，也包括一些高级的，将ES6转成ES5代码，将TypeScript转成ES5代码，将scss、less转成css，将.jsx、.vue文件转成js文件等等。
1、css文件
1）在src文件夹下再建一个css文件，在css文件夹下建一个normol.css文件
normol.css
body {
background-color: aqua;
}
2）在main.js中导入
require('./css/normol.css')
3）用npm命令来安装 css-loader 和 style-loader
npm install style-loader --save-dev
npm install css-loader --save-dev
4）在webpack.config.js中的modules关键字下进行配置
webpack.config.js
module.exports = {
module: {
rules: [{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}]
}
}
5）用npm run build 进行打包后，打开浏览器
2、less文件
1）在css文件夹下建一个special.less文件
special.less
@fontSize:50px;
@fontColor:red;
body{
font-size: @fontSize;
color: @fontColor;
}
2）在main.js中导入
require('./css/special.less')
document.writeln("<h2>你好啊hhhghfgkg</h2>")
3）用npm命令来安装 less-loader 和 less
npm install --save-dev less-loader less
4）在webpack.config.js中的modules关键字下进行配置
webpack.config.js
module.exports = {
module: {
rules: [{
test: /\.less$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "less-loader" // compiles Less to CSS
}]
}]
}
}
5）用npm run build 进行打包后，打开浏览器
3、图片
1）在src文件夹下再建一个img文件，在img文件夹下放两张图片，一张图片较大（大于limit），一张图片较小（小于limit），在normol.css中使用较小的图片
normol.css
body{
background: url("../img/1.jpg");
}
2）用npm命令来安装 url-loader
npm install --save-dev url-loader
4）在webpack.config.js中的modules关键字下进行配置
webpack.config.js
module.exports = {
module: {
rules: [{
test: /\.(png|jpg|gif)$/,
use: [{
loader: 'url-loader',
options: {
limit: 130000,
},
}]
}]
}
}
5）用npm run build 进行打包后，打开浏览器
打开看图片
当加载的图片小于limit时，会将图片编译成base64字符串形式
6）修改normol.css文件，将较大图片替换较小图片
normol.css
body{
background: url("../img/2.jpg");
}
在用npm run build 打包，发现开始报错
报错说没有file-loader的模块，所以进行下载
npm install --save-dev file-loader
再次用npm run build 进行打包，却发现浏览器进行报错
dist文件下却多了一张图片，名字为hash:6127b9bcf1ab0d897b0837b6f2360217.jpg
打开浏览器发现图片的地址路径错误
所以在webpack.config.js中进行配置
const path = require('path')
module.exports = {
entry: './src/main.js',
output: {
//绝对路径
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: 'dist/'
},
module: {
rules: [{
test: /\.(png|jpg|gif)$/,
use: [{
loader: 'url-loader',
options: {
limit: 130000,
name: 'img/[name].[hash:8].[ext]' //图片的命名及路径
},
}]
}]
}
}
7）再次进行打包发现，dist文件下多了一个img的文件夹，里面有一张图片，打开浏览器
3、babel文件
1）用npm命令来安装 babel-loader和 babel-core及babel-preset-env还有webpack
npm install babel-loader babel-core babel-preset-env webpack
npm i @babel/core --save-dev
npm i @babel/preset-env --save-dev
2）在webpack.config.js中的modules关键字下进行配置
webpack.config.js
module.exports = {
module: {
rules: [{
test: /\.js$/,
//exclude：排除 include：包含
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}, ]
}
}
3）用npm run build 进行打包后，打开bundle.js文件发现代码都是用es5写的
4 、.vue文件
1）在src文件夹下再建一个vue文件，在vue文件夹下建一个App.vue文件
App.vue
<template>
<div>
<h2 class="title">{{message}}</h2>
<button @click="btn">按钮</button>
<h3>{{name}}</h3>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
message: "hello world",
name: "hhhhhh"
};
},
methods: {
btn() {}
}
};
</script>
<style>
.title {
color: yellow;
}
</style>
2）在main.js中写入
import Vue from 'vue'
import App from './vue/App.vue'
new Vue({
el: '#app',
template: `<App></App>`,
components:{
App
}
})
3）用npm命令来安装 vue-loader和vue-template-compiler及vue
npm i vue --save
npm i vue-loader vue-template-compiler --save-dev
4）在webpack.config.js中的modules关键字下进行配置
webpack.config.js
module.exports = {
module: {
rules: [{
test: /\.vue$/,
use: ['vue-loader']
}]
}
}
5）在webpack.config.js中的plugins关键字中引入插件
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
plugins: [
new VueLoaderPlugin(),
],
}
6）在webpack.config.js中的resolve中进行别名的配置
module.exports = {
resolve: {
//别名
alias: {
'vue$': 'vue/dist/vue.esm.js'
},
extensions: ['.js', '.css', '.vue']
},
}
6）在index.html中写入
<body>
<div id="app"></div>
</body>
7）用npm run build 进行打包后，打开浏览器
（四）使用插件plugin
1）plugin是插件的意思，通常是用于对某个现有的架构进行扩展。
2）webpack中的插件，就是对webpack现有功能的各种扩展，比如打包优化，文件压缩等等。
3）loader和plugin区别
- loader主要用于转换某些类型的模块，它是一个转换器。
- plugin是插件，它是对webpack本身的扩展，是一个扩展器。
4）plugin的使用过程∶
- 步骤一︰通过npm安装需要使用的plugins(某些webpack已经内置的插件不需要安装)
- 步骤二︰在webpack.config.js中的plugins中配置插件。
例：HtmlWebpackPlugin插件
作用是依据一个简单的index.html模板，生成一个自动打包后的文件index.hml
1）用npm命令安装此插件
npm i html-webpack-plugin --save-dev
2）在webpack.config.js中进行配置
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
output: {
//绝对路径
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
// publicPath: 'dist/'
},
plugins: [
new HtmlWebpackPlugin({
template: 'index.html' //模板
}),
],
}
3）在index.html中删除引用script的代码
4）npm run build 打包后发现dist下多了一个index.html文件
（五）搭建本地服务器
webpack提供了一个可选的本地开发服务器，这个本地服务器基于node.js搭建，内部使用express框架，可以实现我们想要的让浏览器自动刷新显示我们修改后的结果。
devserver也是作为webpack中的一个选项，选项本身可以设置如下属性∶
- contentBase:为哪一个文件夹提供本地服务，默认是根文件夹，我们这里要填写./dist
- port:端口号
- inline:页面实时刷新
- historyApiFallback :在SPA页面中，依赖HTML5的history模式
1）用npm命令来安装webpack-dev-server
npm i webpack-dev-server --save-dev
2）在package.json文件中进行配置
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"dev": "webpack-dev-server --open" //--open参数表示直接打开浏览器
},
3）用npm run dev运行项目
npm run dev
完整目录
webpack.config.js文件的完整内容：
const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: './src/main.js',
mode: 'development',
output: {
//绝对路径
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
// publicPath: 'dist/'
},
module: {
rules: [{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.less$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "less-loader" // compiles Less to CSS
}]
},
{
test: /\.(png|jpg|gif)$/,
use: [{
loader: 'url-loader',
options: {
limit: 130000,
name: 'img/[name].[hash:8].[ext]' //图片的命名及路径
},
}]
},
{
test: /\.js$/,
//exclude：排除 include：包含
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
},
{
test: /\.vue$/,
use: ['vue-loader']
}
]
},
plugins: [
new VueLoaderPlugin(),
new HtmlWebpackPlugin({
template: 'index.html'
}),
],
resolve: {
//别名
alias: {
'vue$': 'vue/dist/vue.esm.js'
},
extensions: ['.js', '.css', '.vue']
},
}
main.js的完整内容
//使用commonjs模块化的规范
const {
add,
mul
} = require('./js/mathUtils')
console.log(add(20, 13));
console.log(mul(20, 30));
require('./css/normol.css')
require('./css/special.less')
document.writeln("<h2>你好啊hhhghfgkg</h2>")
import Vue from 'vue'
// // import App from './vue/app'
// //先下载npm i vue-loader vue-template-compiler --save-dev
import App from './vue/App.vue'
new Vue({
el: '#app',
template: `<App></App>`,
components:{
App
}
})
扫一扫
2125
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
