Vue学习----第三天_webpack(学习webpack看这一篇就够了1.8w字)【6.7】
一、认识webpack官方网址:https://www.webpackjs.com/1.什么是webpackwebpack是一个前端模块化打包工具2.前端模块化3.和grunt/gulp打包工具的对比grunt/gulp更强调的是自动化、定义一些任务webpack更强调模块化二、webpack安装1.webpack安装webpack为了正常运行,必须依赖node环境node环境为了正常执行代码,必
目录
一、认识webpack
官方网址:https://www.webpackjs.com/
1.什么是webpack
webpack是一个前端模块化打包工具
2.前端模块化
3.和grunt/gulp打包工具的对比
grunt/gulp更强调的是自动化、定义一些任务
webpack更强调模块化
二、webpack安装
1.webpack安装
webpack
为了正常运行,必须依赖node环境
node
环境为了正常执行代码,必须依赖其包含的各种依赖的包
npm(node packages manager)
包管理工具,为了管理node的各种依赖包
如果安装webpack4+版本,则可以运行以下命令:
npm install webpack webpack-cli -D
2.cmd中输入webpack -v显示webpack不是命令
- 创建文件夹
我的nodejs默认安装路径为:D:\program\nodejs
在此文件夹下创建两个文件用于全局存放依赖包路径和缓存路径
- 配置路径
在cmd中输入以下代码,配置缓存路径:
npm config set cache "D:\program\nodejs\node_cache"
回车后再输入以下代码后,回车,配置全局依赖包:
npm config set cache “D:\program\nodejs\node_global”` - 安装webpack
和上面内容相同,请查看1.webpack安装 - 环境变量配置
我的电脑→右键属性→高级系统设置→高级→环境变量
或:控制面板→系统和安全→系统→高级系统设置→高级→环境变量
- 查看webpack版本
三、webpack起步
1.准备工作
使用commonJS
module.exports = {}
导出
const { } = require('')
导入,括号里为导入文件路径
2.js文件打包
在文件根目录打开命令行工具,输入:
webpack ./src/main.js ./dist/main.js --mode development
意思是把src目录中main文件,打包到dist中以main命名的文件
3.使用打包后的文件
然后再index.html文件中,引入刚打包好的dist中main文件,浏览器打开即可。
四、webpack配置
1.命令行输入npm init
目的生成package.json
文件
2.入口和出口
const path = require('path')
module.exports = {
entry: './src/main.js',
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js'
}
}
3.局部安装webpack、webpack-cli
第二步不推荐使用,更好的方法往下看
4.package.json
在script中配置了build:webpack,表示如果执行打包:npm run build
,则会优先使用本地webpack打包而不是全局的webpack。
五、css-loader的使用
1.什么是loader
webpack中loader网址:https://www.webpackjs.com/loaders/
2.css文件处理-准备工作
3.css文件处理-打包报错信息
安装css-loader即可解决
4.css文件处理-css-loader
css-loader只负责加载css文件,不负责把具体样式嵌入到css文件中。
需要安装style-loader
在webpack.config.js中加上以下代码:
5.css文件处理-style-loader
1.安装style-loader,命令行运行:npm install style-loader --save-dev
2.配置,在webpack-config-js文件中,css-loader前面输入:style-loader
webpack读取使用loader是从右到左
6.配置postCSS自动添加css的兼容前缀
自动添加浏览器兼容前缀
-moz-
:代表Firefox火狐浏览器私有属性
-ms-
:代表IE浏览器私有属性
-webkit-
:代表Safari、Chrome私有属性
-o-
:代表Opera私有属性
具体操作如下:
1.运行npm install postcss-loader autoprefixer -D
命令
2.在项目根目录创建postcss
配置文件postcss.config.js
,并初始化如下配置
// 导入自动添加前缀的插件
const autoprefixer = require('autoprefixer')
module.exports = {
// 挂载插件
plugin: [ autoprefixer ]
}
3.在webpack.config.js的module→rules数组中,修改css的loader规则如下:
六、less文件处理
1.less文件处理-准备工作
2.less文件处理-less-loader
1.命令行安装:npm install --save-dev less-loader less
2.webpack.config.js中配置:
七、图片文件处理
1.图片处理-资源准备阶段
2.图片处理-url-loader
1、运行:npm install --save-dev url-loader
,安装插件
2、修改webpack.config.js中的配置,如下图
3、如果图片大小小于option中limit值,则可正常打包,如果图片大小大于limit值该怎么办?
3.图片处理-file-loader
图片大小大于limit值,则要安装file-loader插件
运行:npm install file-loader -D(或--save-dev)
4.运行npm run build发现没有图片显示,并改变打包后图片的命名★★★★
原因: css中图片文件路径引入出错,应该引入dist文件中对应的图片文件(文件名改变)
解决方法:在webpack.config.js文件中,output
中新增publicPath: 'dist/'
意思是,在打包中所有的url都会在前面默认拼接上dist/
八、babel的使用
1.ES6语法转换为ES5
以下方式可能过于老了,也可自行按照官网操作:
https://www.webpackjs.com/loaders/babel-loader/
如es6中的const、let
1.运行npm install --save-dev babel-loader@7 babel-core babel-preset-es2015
2.webpack.config.js文件中添加:
{
test: /\.js$/,
// exclude排除
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
// 如果这样写,会自动去找babelrc文件
// presets: ['@babel/preset-env']
presets: ['es2015']
}
}
}
九、webpack配置vue
1.引入vue.js
1.运行:npm install vue --save
2.在main.js文件中引入以下代码:
import Vue from 'vue'
const app = new Vue({
el: '#app',
data: {
message: 'Hello webpack'
}
})
2.打包项目-错误信息
runtime-only
:代码中,不可以有任何template
runtime-compiler
:代码中,可以有template,因为compiler可以用于编译template
在webpack.config.js中配置以下内容:resolve和module平级
resolve: {
// alias别名
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
}
3.el-template区别
4.vue组件化开发引入
index.html不变:
<div id="app">
<h2>{{message}}</h2>
</div>
第一步:将vue实例中的template里面的代码抽离出来到同页面,设置一个组件中。
// App组件
const App = {
template: `
<div>
<h2>{{message}}</h2>
<button @click="btnClick">按钮</button>
<h2>{{name}}</h2>
</div>
`,
data() {
return {
message: 'Hello webpack',
name: 'lvan'
}
},
methods: {
btnClick() {
console.log('template')
}
}
}
new Vue({
el: '#app',
template: '<App/>',
// 注册组件
components: {
App
}
})
第二步:继续抽离,把组件中代码抽离到一个单独文件app.js中,再在main.js文件中引入
app.js:
export default {
template: `
<div>
<h2>{{message}}</h2>
<button @click="btnClick">按钮</button>
<h2>{{name}}</h2>
</div>
`,
data() {
return {
message: 'Hello webpack',
name: 'lvan'
}
},
methods: {
btnClick() {
console.log('template')
}
}
}
main.js:
import Vue from 'vue'
import App from './vue/app'
new Vue({
el: '#app',
template: '<App/>',
components: {
App
}
})
第三步:继续抽离,把组件中代码抽离到一个单独文件App.vue中,再在main.js文件中引入,npm run build会报错如下,解决方法看下5
App.vue:
<template>
<div>
<h2 class="title">{{message}}</h2>
<button @click="btnClick">按钮</button>
<h2>{{name}}</h2>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello webpack',
name: 'lvan'
}
},
methods: {
btnClick() {
console.log('template')
}
}
}
</script>
<style scoped>
.title {
color: green;
}
</style>
main.js:
import Vue from 'vue'
import App from './vue/app.vue'
new Vue({
el: '#app',
template: '<App/>',
components: {
App
}
})
5. .vue文件封装处理
1、运行命令:npm install vue-loader vue-template-compiler --save-dev
2、修改webpack.config.js配置
在文件头部加上const VueLoaderPlugin = require('vue-loader/lib/plugin')
在module.exports中module平级下添加代码如下:
6.配置打包引入文件的后缀可省略
如以下代码,运行打包会报错,显示找不到Cpn这个文件:
解决方案:在webpack.config.js
文件中,配置红色框中代码
十、plugin的使用
1.认识plugin
2.添加版权的plugin
3.打包html的plugin
方式1:
1、运行npm install html-webpack-plugin --save-dev
2、把webpack.config.js
中output
中的publicPath:‘dist/’
去除
3、在webpack.config.js中头部加上
const HtmlWebpackPlugin = require('html-webpack-plugin')
4、在plugins中加入以下代码:
new HtmlWebpackPlugin({
// 指定的模板,也就是根目录中的index文件
template: 'index.html'
})
方式2:
1、运行npm install 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文件中向外暴露的配置对象。新增节点
plugin: [ htmlPlugin ]
4.js压缩的plugin
如果安装的webpack版本为4以上,则自动压缩,不用安装以下插件
十一、本地服务器
1.配置webpack的自动打包功能
方式1:
1、运行npm install webpack-dev-server --save-dev命令
2、在webpack.config.js中,与plugins平级下添加如下代码:
devServer: {
// 为哪个文件夹提供服务
contentBase: './dist',
// 页面实时刷新
inline: true
}
3、在package.json文件,scripts中配置如下代码:
--open
是表示自动打开浏览器
"dev": "webpack-dev-server --open"
方式2:
1.运行:npm install webpack-dev-server -D
命令,安装自动打包工具
2.修改package.json→script
中的dev命令:"build": "webpack-dev-server"
3.运行npm run build
命令,重新打包
4.在index.html文件中,修改bundle.js的引入。修改为: “/bundle.js”
5.在浏览器中访问http://localhost:8080
2.自动打包效果如下
十二、webpack配置文件分离
使开发和发布依赖不同的配置文件
1、为了合并文件,需要安装npm install webpack-merge --save-dev
2、新建3个文件分别为,base.config.js(公共)、prod.config.js(开发依赖)、dev.config.js(发布依赖)
3、package.json中配置,修改打包入口dev为开发,build为发布
4、删掉以前根目录中的webpack.config.js文件
5、在三个文件中,分别写上代码如下:
base.config.js:
// 公共配置文件
const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')
// const htmlPlugin = new HtmlWebpackPlugin({ // 创建插件的实例对象
// template: './index.html', // 指定要用到的模板文件
// filename: 'index.html' // 指定生成的文件名称,该文件存在内存中,在目录中不显示
// })
module.exports = {
entry: path.join(__dirname, './src/main.js'),
output: {
path: path.join(__dirname, '../dist'),
filename: 'bundle.js'
// publicPath: 'dist/'
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader', 'postcss-loader']
},
{
test: /\.less$/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: "less-loader"
}]
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
// 加载图片大小 小于limit,会将图片编译成base64字符串形式
// 如果图片大于limit,则需要安装file-loader
options: {
limit: 20,
name: 'img/[name].[hash:8].[ext]'
}
}
]
},
{
test: /\.js$/,
// exclude排除
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
// 如果这样写,会自动去找babelrc文件
// presets: ['@babel/preset-env']
presets: ['es2015']
}
}
},
{
test: /\.vue$/,
use: ['vue-loader']
}
]
},
resolve: {
// 后缀名可省略
extensions: ['.js', '.css', '.vue'],
// alias别名
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
},
plugins: [
new VueLoaderPlugin(),
new webpack.BannerPlugin('最终版权归lvan所有'),
new HtmlWebpackPlugin({
// 指定的模板,也就是根目录中的index文件
template: 'index.html'
})
]
}
prod.config.js:
// 开发模式,使用配置文件
const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')
const webpackMerge = require('webpack-merge')
const baseConfig = require('./base.config')
module.exports = webpackMerge(baseConfig, {
plugins: [
new UglifyjsWebpackPlugin()
]
})
dev.config.js:
// 发布模式,使用配置文件
const webpackMerge = require('webpack-merge')
const baseConfig = require('./base.config')
module.exports = webpackMerge(baseConfig, {
devServer: {
// 为哪个文件夹提供服务
contentBase: './dist',
// 页面实时刷新
inline: true
}
})
内容持续更新中…
lvan学习笔记-文章内容仅个人观点
2020.6.7
更多推荐
所有评论(0)