webpack安装
安装webpack全局工具
npm install webpack webpack-cli -g
webpack基本使用
-
通过webpack指令打包
在项目中安装jQuerynpm install jquery建立项目结构
│ package-lock.json
│ package.json
└─src
│ index.html
│ main.js将代码书写在main.js中
// ES6 的模块化语法导入jQuery // import 导入的库对象的变量名 // from 可以写具体的路径, 也可以写包名 如果写的是包名就会去 /node_modules 中查找 import $ from 'jquery' $(function () { $('ul>li:odd').css('backgroundColor', 'pink') $('ul>li:even').css('backgroundColor', 'purple') })
在index.html直接引入src/main.js无法在浏览器中运行, 因为浏览器不支持import语法
所以需要使用webpack进行打包输出一个bundle.js
执行以下指令进行打包:
webpack ./src/main.js -o ./dist/bundle.js
直接打包会输出以下警告信息(不影响结果):
默认会以production模式进行打包, 也就是会压缩合并混淆, 如果不需要压缩合并混淆可以选择使用development模式打包
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/
通过 -d 参数可以指定打包模式为development, 表示不压缩, -p 表示production模式, 并压缩
webpack ./src/main.js -o ./dist/bundle.js -d
-
通过webpack.config.js书写配置文件后, 直接输入webpack打包 (推荐)
webpack.config.js配置文件(需要放在项目的根目录下使用):const path = require('path') module.exports = { entry: './src/main.js', // 入口, 可以为相对路径, 当然绝对路径也没错 output: { // 输出配置 path: path.join(__dirname, './dist'), // 输出的目录 filename: 'bundle.js' // 输出的文件名 }, mode: 'production' // 打包的模式, production | development }配置好之后直接输入webpack指令即可打包编译
webpack-dev-server的使用
上述的配置完毕后, 每次修改完JS代码还是需要手动运行webpack重新打包生成输出文件后使用
如果希望修改完JS后自动打包生成输出文件, 就可以借助webpack-dev-server这个工具完成
使用教程:
-
安装webpack-dev-server(这个包需要依赖webpack, 所以除了在全局安装webpack还需要在项目本地也安装webpack到开发依赖):
npm install webpack-dev-server webpack webpack-cli -D -
由于webpack-dev-server不是全局安装的, 所以无法直接在命令行运行该指令, 这个包是安装在项目本地的, 需要借助npm工具执行本地脚本, 在 package.json 中配置运行脚本:
在scripts节点下添加一个dev脚本, 运行webpack-dev-server指令"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "webpack-dev-server" }, -
配置完运行脚本后, 直接在命令行运行脚本:
npm run dev -
设置webpack-dev-server的端口号
在脚本命令后面加上参数 --port"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "webpack-dev-server --port 3000" }, -
设置webpack-dev-server的web服务器的根路径
在脚本命令后面加上参数 --contentBase"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "webpack-dev-server --contentBase ./src --port 3000" }, -
设置webpack-dev-server的自动打开浏览器
在脚本命令后面加上参数 --open"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "webpack-dev-server --open --contentBase ./src --port 3000" }, -
设置webpack-dev-server的热模块替换
在脚本命令后面加上参数 --hot"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "webpack-dev-server --hot --open --contentBase ./src --port 3000" },
注意: 默认情况下 webpack-dev-server 会将入口的文件打包输出到项目的根目录, 并且不会在物理磁盘中保存, 只在内存中存放, 方便开发调试
现在bundle.js已经是托管到内存中了, 如果需要将HTML也托管到内存中, 需要借助一个插件: html-webpack-plugin
安装:
npm install html-webpack-plugin -D
所有webpack的插件都需要在webpack的配置文件中的plugins节点下注册:
plugins: [
new webpack.HotModuleReplacementPlugin(),
new HTMLWebpackPlugin({
template: path.join(__dirname, './src/index.html'), // 源文件
filename: 'index.html' // 输出在服务器根目录的文件名, 文件存放在内存中, 不会在磁盘上显示
})
],
使用该插件后, 内存中的index.html会自动添加bundle.js的引入, 无需手动引入
webpack的loader
webpack默认无法打包除了js文件以外的所有文件, 所以不同的文件类型都需要安装对应的loader才可以加载, 否则会报错
-
css加载
默认无法加载css文件, 如果需要加载css文件, 得安装两个包: css-loader style-loadernpm install css-loader style-loader -D在main.js中引入外部的css文件, 注意: 以后引入css文件都不要在HTML中引入, 为了避免二次http请求
// ES6的import语法可以导入js和cssimport './css/index.css'安装完后无法直接使用loader, 还需要进行相应的配置
module: { rules: [ // loader的加载顺序是从右到左的 // css-loader是帮助webpack编译css文件. 而style-loader是将最终编译的结果放到HTML中生效 { test: /\.css$/, use: ['style-loader', 'css-loader'] } ] }, -
less加载
默认无法加载less文件, 需要使用less-loader less包npm install less less-loader -D在main.js中引入外部的less文件
import './css/test.less'安装完后无法直接使用loader, 还需要进行相应的配置
module: { rules: [ { test: /\.css$/, use: [ { loader: "style-loader" }, { loader: "css-loader" } ] }, { test: /\.less$/, use: [ { loader: "style-loader" }, { loader: "css-loader" }, { loader: "less-loader" } ] } ] }, -
sass加载
默认无法加载scss文件, 需要使用sass-loader node-sass包npm install sass-loader node-sass -D在main.js中引入外部的less文件
import './css/demo.scss'安装完后无法直接使用loader, 还需要进行相应的配置
module: { rules: [ { test: /\.css$/, use: [ { loader: "style-loader" }, { loader: "css-loader" } ] }, { test: /\.less$/, use: [ { loader: "style-loader" }, { loader: "css-loader" }, { loader: "less-loader" } ] }, { test: /\.scss$/, use: [ { loader: "style-loader" }, { loader: "css-loader" }, { loader: "sass-loader" } ] } ] },
url-loader
因为在css中使用图片或字体文件时会引入外部资源, 而webpack进行打包时默认不支持这些外部资源的打包, 所以需要借助 url-loader
小tips: url-loader和file-loader功能类似, url-loader包含了file-loader而且独立于file-loader存在, 意味着使用url-loader不需要安装file-loader, 两者区别在于, url-loader可以指定一些参数
用法:
-
安装url-loader
npm install url-loader -D -
在webpack.config.js中配置
module: { rules: [ { test: /.css$/, use: [ { loader: "style-loader" }, { loader: "css-loader" } ] }, { test: /.less$/, use: [ { loader: "style-loader" }, { loader: "css-loader" }, { loader: "less-loader" } ] }, { test: /.scss$/, use: [ { loader: "style-loader" }, { loader: "css-loader" }, { loader: "sass-loader" } ] }, { test: /.(png|jpg|gif|bmp|webp)$/, use: [ { loader: 'url-loader?limit=14240&name=[hash:8]-[name].[ext]', // options: { // limit: 8192 // 限制: 图片的最大大小, 如果超过了最大限制将会以原图片打包, 如果小于限制则会通过 base64 进行转码 // } } ] }, { test: /.(eot|ttf|woff|woff2|svg)$/, use: 'url-loader', } ] }注意: 在css中引入外部的图片或字体都需要用url-loader来加载, 建议分开匹配, 方便管理
babel-loader
在项目中如果用到了高级的ES6语法, 例如class关键字, webpack默认无法进行打包, 需要借助babel将高级语法转译为ES5语法之后再进行打包
用法:
-
装两套包
babel核心和babel-loader以及babel的插件npm install babel-loader@7 babel-core babel-plugin-transform-runtime -Dbabel的语法支持
npm install babel-preset-env babel-preset-stage-0 -D -
配置loader
module: { rules: [ { test: /.css$/, use: [ { loader: "style-loader" }, { loader: "css-loader" } ] }, { test: /.less$/, use: [ { loader: "style-loader" }, { loader: "css-loader" }, { loader: "less-loader" } ] }, { test: /.scss$/, use: [ { loader: "style-loader" }, { loader: "css-loader" }, { loader: "sass-loader" } ] }, { test: /.(png|jpg|gif|bmp|webp)$/, use: [ { loader: 'url-loader?limit=14240&name=[hash:8]-[name].[ext]', // options: { // limit: 8192 // 限制: 图片的最大大小, 如果超过了最大限制将会以原图片打包, 如果小于限制则会通过 base64 进行转码 // } } ] }, { test: /.(eot|ttf|woff|woff2|svg)$/, use: 'url-loader', }, { test: /.js$/, exclude: /(node_modules|bower_components)/, use: { loader: 'babel-loader', } } ] }, -
配置babel, 在项目根目录新建一个.babelrc文件
{ "presets": [ "env", "stage-0" ], "plugins": [ "transform-runtime" ] }
vue实例的render方法
以前创建vue实例:
控制app区域
var vm = new Vue({
el: '#app',
data: {},
methods: {}
})
如果需要将某个组件放置到APP区域, 可以注册组件后直接在HTML中使用组件
var login = {
template: '<h1>登录组件</h1>'
}
var vm = new Vue({
el: '#app',
data: {},
methods: {},
components: {
login
}
})
注册完毕后可以在页面上直接引入组件
<div id="app">
<login></login>
</div>
使用render函数来使用组件:
var login = {
template: '<h1>登录组件</h1>'
}
var vm = new Vue({
el: '#app',
data: {},
methods: {},
render: function(createElements) {
return createElements(login)
}
})
render函数的特点就是, 创建vm实例时, 将指定的组件渲染成HTML代码, 直接将app区域的容器替换为该组件, app内部的内容将会全部清空
vue-loader
默认情况下webpack无法读取vue文件, 需要做组件的抽离, 就得借助vue-loader
用法:
-
安装vue-loader和vue-tempalte-compiler
npm install vue-loader vue-template-compiler -D -
配置loader
{ test: /.vue$/, use: { loader: 'vue-loader', } } -
必须配置VueLoaderPlugin(不需要额外装包, 该插件在vue-loader中自带)
// webpack.config.js const VueLoaderPlugin = require('vue-loader/lib/plugin') plugins: [ new webpack.HotModuleReplacementPlugin(), new HTMLWebpackPlugin({ template: path.join(__dirname, './src/index.html'), filename: 'index.html' }), new VueLoaderPlugin() ],
配置完毕后就可以在main.js中引入.vue文件, 使用render函数进行渲染了
此方法适合在 vue.common.runtime.js 文件中使用
export default 和 export 的区别
export default 用于导出当前模块的某个成员
注意点:
- 一个模块只能导出一个, 不需要在模块中起名字
- 导入时来定义使用的变量名即可
举例:
test.js
export default {
name: '刘希晗',
age: 38
}
main.js
import pig from './test.js'
export 可以单独导出当前模块的某个成员
注意点:
- 可以导出多个成员
- 导出时就需要定义好变量名
- 导入时必须按照导出的名称来接收, 但是可以通过 as 来起别名
举例:
test.js
export const animal = {
name: '刘希晗',
age: 38
}
export const son = {
name: '四金',
age: 18
}
main.js
import { animal as fourGold, son } from './test.js'
在webpack中使用vue-router
-
装包
npm install vue-router -
导入vue和vue-router并且注册路由组件
main.js:import Vue from 'vue' import VueRouter from 'vue-router' // 注册路由 Vue.use(VueRouter) // 导入组件 import app from './App.vue' import account from './main/Account.vue' // 创建路由实例 const router = new VueRouter({ routes: [ { path: '/account', component: account} ] }) // 创建vm实例 const vm = new Vue({ el: '#app', render: c => c(app), router // 挂载路由对象到vm对象上 }) -
还需要在App.vue页面上配置标签, 将来访问/account时就会切换组件显示
.vue文件组件内部的style标签属性
lang: 指定style的语言, 可选less或sass/scss
scoped: 单属性, 不需要设置属性值, 让style只在当前组件内生效
vue的脚手架
由于webpack配置比较繁琐, 而且没有逻辑性可言, 对于开发人员来讲不太友好, 很多开发者希望能有现成的模板
当然, 早期网络上有很多现成的代码可以拷贝, 但是由于webpack不断再更新, 周边的插件或loader之类的东西也在不断地更新, 对于前端工程师来讲就需要不断的学习, 投入大量的精力在环境上
所以, vue官方提供了脚手架, 帮助我们快速部署基于webpack的vue开发环境
脚手架名为: vue-cli
用法:
-
装包
全局安装脚手架工具npm install vue-cli -g -
使用脚手架创建模板
创建完整版的webpack配置(困难)vue init webpack 项目名称创建简单版的webpack配置(简单,适合初学者)
vue init webpack-simple 项目名称 -
如果是用的是第一种模板, 会自动运行npm install, 第二种简单模板需要手动运行
npm install, 然后使用npm run dev打开项目
扫一扫
519
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
