1. webpack的基本使用
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 进行项目打包
默认：
如果修改入口和出口，需在 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 ，查看自动打包的效果
注意：
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打包期间会用到的一些插件列表
}
-
1.6 配置自动打包相关的参数
在package.json中的配置
"dev" : "webpack-dev-server --open --host 127.0.0.1 --port 8888"
2. webpack 中加载器的基本使用
通过 loader 打包非 js 模块
loader 加载器可以协助 webpack 打包处理特定的文件模块
-
2.1 打包处理css文件
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']}
]
}
注意：
-
2.2 打包处理less文件
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']}
]
}
-
2.3 打包处理scss文件
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']}
]
}
-
2.4 配置postCSS自动添加css的兼容性前缀
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 图片
}
]
}
-
2.6 打包处理js文件中的高级语法
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"
}
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
