1. webpack的基本使用
webpack是一个流行的前端项目构建工具(打包工具)提供:模块化支持,代码压缩混淆,处理js兼容问题,性能优化等功能
1.新建空白项目,运行
npm init -y
,初始化包管理配置文件package.json
2.新建src源代码项目
3.新建src -> index.html 首页
4.初始化首页基本结构
5.跑npm install jQuery -s
,安装jquery
6.通过模块化的形式,实现列表隔行变色
示例:
//index.html
<ul>
<li>这是第1个li</li>
<li>这是第2个li</li>
<li>这是第3个li</li>
<li>这是第4个li</li>
<li>这是第5个li</li>
<li>这是第6个li</li>
<li>这是第7个li</li>
<li>这是第8个li</li>
<li>这是第9个li</li>
</ul>
//index.js
import $ from 'jquery'
$(function () {
$('li:odd').css('backgroundColor', 'pink');
$('li:even').css('backgroundColor', 'red')
})
1.运行 npm install webpack webpack-cli -D
命令,安装 webpack 相关的包
2.在项目根目录中,创建名为 webpack.config.js
的 webpack 配置文件
3.在 webpack 的配置文件中,初始化如下配置
module.exports = {
mode:'development' //mode 指定构建模式(开发或生产)
}
4.在package.json
配置文件中的 script 节点下,新增 dev 脚本如下:
"script":{
"dev":"webpack" // script节点下的脚本,可以通过npm run执行
}
5.在终端运行 npm run dev
命令,启动 webpack 进行项目打包
默认:
- 打包的入口文件为
scr -> index.js
- 打包的输出文件为
dist -> mian.js
如果修改入口和出口,需在 webpack.config.js
中新增如下配置
const path = require('path')
module.exports = {
entry:path.join(__dirname,'./src/index.js'),//打包入口文件路径
output:{
path:path.join(__dirname,'./dist'),//输出文件的存放路径
filename:'bundle.js'//输出文件的名称
}
}
1.运行 npm install webpack-dev-server -D
命令,安装项目自动打包的工具
2.修改 package.json -> script
中的 dev 命令如下:
"script" : {
"dev":"webpack-dev-server"
}
3.将 src -> index.html
中,script 脚本的引用路径,修改为"/buldle.js"
4.运行 npm run dev
命令,重新打包
5.在浏览器中访问 http://localhost:8080
,查看自动打包的效果
注意:
- webpack-dev-server 会启动一个实时打包的 http 服务器
- webpack-dev-server 打包生成的输出文件,默认放在项目根目录中,是虚拟的
1.运行 npm i html-webpack-plugin -D
,生成预览页面的插件
2.修改 webpack.config.js
文件头部区域,配置:
//导入生成预览页面的插件,得到一个构造函数
const HtmlWebpackPlugin = require('html-webpack-plugin')
const htmlPlugin = new HtmlWebpackPlugin({//创建插件的实例对象
template:'./src/index.html',//指定要用到的模板文件
filename:'index.html'//指定生成的文件名称,
})
3.修改 webpack.config.js
文件中向外暴露的配置对象,新增如下配置节点
module.exports = {
plugins:[htmlPlugin] //plugins 数组是webpack打包期间会用到的一些插件列表
}
在package.json
中的配置
--open
打包后自动打开浏览器页面
--host
配置ip地址
--port
配置端口
"dev" : "webpack-dev-server --open --host 127.0.0.1 --port 8888"
2. webpack 中加载器的基本使用
通过 loader 打包非 js 模块
loader 加载器可以协助 webpack 打包处理特定的文件模块
1.运行 npm i style-loader css-loader -D
,安装处理css文件的loader
2.在 webpack.config.js
的 module -> rules
数组中,添加 loader规则如下:
module:{
rules:[
{test:/\.css$/,use:['style-loader','css-loader']}
]
}
注意:
- use 数组中指定的 loader 顺序是固定的
- 多个 loader 的调用顺序是:从后往前调用
1.运行 npm i less-loader less -D
,
2.在 webpack.config.js
的 module -> rules
数组中,添加 loader规则如下:
module:{
rules:[
{test:/\.less$/,use:['style-loader','css-loader','less-loader']}
]
}
1.运行 npm i sass-loader node-sass -D
,
2.在 webpack.config.js
的 module -> rules
数组中,添加 loader规则如下:
module:{
rules:[
{test:/\.scss$/,use:['style-loader','css-loader','sass-loader']}
]
}
1.运行 npm i postcss-loader autoprefixer -D
命令
2.在项目根目录中创建 postcss 的配置文件 postcss.config.js
,并初始化如下配置:
const autoprefixer = require('autoprefixer')//导入自动添加前缀的插件
module.exports = {
plugins:[autoprefixer]//挂载插件
}
3.在 webpack.config.js
的 module -> rules
数组中,修改css的 loader规则如下:
module:{
rules:[
{test:/\.css$/,use:['style-loader','css-loader','postcss-loader']}
]
}
1.运行 npm i url-loader file-loader -D
,
2.在 webpack.config.js
的 module -> rules
数组中,添加 loader规则如下:
module:{
rules:[
{
test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|wpff2$/,
use: 'url-loader?limit=16940'//?后是参数项,limit指图片大小,小于limit大小的图片,才会被转化为 base64 图片
}
]
}
1.安装 babel 转换器相关的包:npm i babel-loader @babel/core @babel/runtime -D
2.安装babel语法插件相关的包:npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
3.在项目根目录中,创建babel配置文件 babel.config.js
,并初始化如下配置:
module.exports = {
presets:['@babel/preset-env'],
plugins:['@babel/plugin-transform-runtime','@babel/plugin-proposal-class-properties']
}
4.在webpack.config.js
的module -> rules
数组中,添加loader规则如下:
{test:/\.js$/,use:'babel-loader',exclude:/node_modules///exclude为排除项 }
//webpack.config.js
const path = require('path')
//导入生成预览页面的插件,得到一个构造函数
const HtmlWebpackPlugin = require('html-webpack-plugin')
const htmlPlugin = new HtmlWebpackPlugin({ //创建插件的实例对象
template: './src/index.html', //指定要用到的模板文件
filename: 'index.html' //指定生成的文件名称,
})
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
//编译模式 development production
mode: 'development',
entry: path.join(__dirname, './src/index.js'),
output: {
path: path.join(__dirname, './dist'),
filename: 'bundle.js'
},
plugins: [htmlPlugin, new VueLoaderPlugin],
module: {
rules: [{
test: /\.css$/,
use: ['style-loader', 'css-loader', 'postcss-loader']
},
{
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader']
},
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
},
{
test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|wpff2$/,
use: 'url-loader?limit=16940' //?后是参数项,limit指图片大小,小于limit大小的图片,才会被转化为 base64 图片
},
{
test: /\.js$/,
use: 'babel-loader',
exclude: /node_modules/ //exclude为排除项
},
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
}
}
3. Vue 单文件组件
template
组件的模板区域
script
业务逻辑区域
style
样式区域(加scoped
)
//App.vue
<template>
<div>
<h1>这是 App 根组件</h1>
</div>
</template>
<script>
export default {
data() {
return {};
},
methods: {},
};
</script>
<style scoped>
h1 {
color: red;
}
</style>
1.运行 npm i vue-loader vue-template-compiler -D
命令
2.在 webpack.config.js
配置文件中 添加 vue-loader
的配置项如下:
const VueloaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
module:{
rules:[
{test:/\.vue$/,loader:'vue-loader'}
]
},
plugins:[
new VueloaderPlugin()
]
}
1.运行 npm i vue -s
安装 Vue
2.在 src -> index.js
入口文件中,通过 import Vue from 'vue'
来导入vue构造函数
3.创建vue的实例对象,并指定要控制的el的区域
4.通过render
函数渲染app根组件
import Vue from 'vue'
import App from './components/App.vue'
const vm = new Vue({
el:'#app',
render:h => h(App)
})
上线之前需要webpack对应用整体打包,通过package.json
文件配置打包命令
"script":{
//打包命令
"build":"webpack -p"
//用于开发调试的命令
"dev":"webpack-dev-server --open --host 127.0.0.1 --port 3000"
}
原文地址:https://blog.csdn.net/dairen_j/article/details/110369036
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。