Webpack打包和插件
打包入口和出口文件
入口文件
就是项目或程序被请求的时候,第一个被访问到的文件,此文件再找相对应的模块进行处理
出口文件
打包之后的文件目录以及名称
webpack 有一些默认配置
- 入口文件:src/index.js
- 出口文件:/dist/main.js
重新配置入口文件和出口文件
const path=require('path')
module.exports={
mode:'development', // 开发模式
entry:path.resolve(__dirname,'./src/index.js'),
output:{
path:path.resolve(__dirname,'./dist'),
filename:"bundle.js"
}
}
运行 npm run dev 命令查看打包结果
自动打包
不需要修改代码后重新运行 npm run dev 命令
安装
npm install --save-dev webpack-dev-server
修改 pacjkage.json 中的启动命令
"dev":"webpack serve --open"
运行
npm run dev
会使用 webpack-dev-server 进行打包,成功后,会自动打开浏览器,地址为 localhost:8080
打包后,webpack-dev-server 在编译之后不会写入到任何输出文件。而是将 bundle 文件保留在内存中,可以通过如下地址访问
所以要修改 src/index.html 的引入路径为
<script src="/bundle.js"></script>
生成预览页面
index.html 在 src 目录下,访问起来比较麻烦
解决方案:可以将 src 目录下的 index.html 拷贝一份到根目录下,这样访问 localhost:8080 时,就会默认渲染 index.html
修改完 index.html 后还需要手动拷贝比较麻烦 ,使用插件
第一步:
安装插件:npm install --save-dev html-webpack-plugin
第二步:
// 引入HtmlWebpackPlugin
const HtmlWebpackPlugin=require('html-webpack-plugin');
第三步:在module.exports里面写入,进行配置
plugins: [new HtmlWebpackPlugin({
template:'./src/index.html',//这个是要拷贝的文件
filename:'index.html',//拷贝的目录文件
})],
最后:npm i loader-utils -D 安装loader-utils
安装
npm install --save-dev html-webpack-plugin
在 webpack.config.js 中编写代码
const path=require('path')
const HtmlWebpackPlugin=require('html-webpack-plugin');
const htmlPlugins=new HtmlWebpackPlugin({
template:'./src/index.html',
filename:'index.html'
})
module.exports={
mode:'development', // 开发模式
entry:path.resolve(__dirname,'./src/index.js'),
output:{
path:path.resolve(__dirname,'./dist'),
filename:"bundle.js",
},
plugins:[
htmlPlugins
],
重新运行 npm run dev后
再次访问:http://localhost:8080/,就会运行index.html
但是跟目录下并没有 index.html ,因为其仍然创建在内存中
加载器
webpack 默认只能打包 .js 模文件,其他静态文件,如 .css,图片等默认不能处理,如果不加载对应的加载器,则会报错
处理css文件
文件打包比link引入css文件的优点:
1、文件打包是把所有的文件都读取到一个文件,页面引入这一个文件进行页面的渲染
2、大大减少了网络读取和请求文件的数量,提上网页的速度
编写样式
* {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
}
li {
line-height: 45px;
}
index.js 中导入 index.css
import './css/index.css'
安装 loader
npm install --save-dev css-loader style-loader
配置 webpack.config.js
//test是处理后缀名为什么的文件,这个里面用正则
//use是你想用什么来进行处理
// 注意:当我们使用css-loader的时候也要安装style-loader,这两个配合使用
处理less
安装
npm install less-loader less -D
rules 中增加一条规则
css-loader和style-loader的作用
- css-loader是把css文件里面的代码读出来
- style-loader是把css文件写进html文件里面来,在html文件里面生成
css 目录中新建 a.less
body {
background-color: #ccc;
ul {
list-style-type: none;
li {
line-height: 35px;
}
}
}
index.js 中引入 a.less
import './css/a.less'
重新打包程序
处理图片
第一步安装
命令:npm i file-loader url-loader -D
第二部配置文件
{
test: /\.jpg|png|gif|bmp|jfif|ttf|eot|svg|woff|woff2$/,
use: [{
loader: 'url-loader',
options: {
limit: 614400 // 代码中使用的图片为500k
}
}]
}
//test这个还是文件的后缀名
//use是一个数组,里面可以写字符串,也可以写数组
//use里面的loader是使用哪个处理器来进行处理
index.css中编写代码,为 body 设置背景图片
body {
background-image: url(../images/1.jfif);
}
重新运行
npm run dev
注意:代码中“limit: 614400” 的含义:
是图片的尺寸,单位是子节,这里面当上传图片得大小小于614400个子节时,他会把图片得源码放进引入的文件里面去,当大于614400个子节时会当成一个资源引入
5、高级语法
第一步:
语法:npm install -D babel-loader @babel/core @babel/preset-env
作用:是把js高级语法转化为普通语法,使老版本的浏览器也支持
第二步配置:
{
test: /\.m?js$/, //这里是处理js文件的
exclude: /(node_modules|bower_components)/, //这个的作用时排除掉node_modules文件,和bower_components文件里面的高级js语法
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'] //这个时处理的方式,这个是静态的处理方式
}
}
}
第三步安装babel 相关插件:
命令:npm i -D @babel/plugin-proposal-class-properties
配置babel:
options: {
presets: ['@babel/preset-env'],
plugins: ['@babel/plugin-proposal-class-properties'] // 新加的配置
}
插件
- vue 单文件组件以 .vue 作为后缀名
- vue 单文件组件包含三个部分,分别用于编写结构、样式和业务逻辑,其实每一个组件就相当于一个 html 页面,只不过后缀名是 .vue 而不是 .html
- vue 单文件组件利用了 ES6模块化的语法,从下面的 export default 可以看出来,也就是说每个组件都是一个模块,这样就可以避免命名冲突的问题
<template>
<h1>{{ msg }}</h1>
</template>
<script>
export default {
data() {
msg: "hello world";
},
};
</script>
<style scoped>
h1 {
color: blue;
}
</style>
src 目录下创建 App.vue 组件
<template>
<h1>{{ msg }}</h1>
</template>
<script>
export default {
data() {
msg: "hello world";
},
};
</script>
<style scoped>
h1 {
color: blue;
}
</style>
在 index.html 中引入和使用组件
引入的目的
- 将 App.vue 中的 template 中模板部分代码替换index.html 中的 id为 app div
- 将 App.vue 中的 css 代码也拷贝到 index.html 文件中
- 将 APP.vue 中的 script 中代码打包到 bundle.js 中
安装 vue
npm i vue
配置webpack
安装 vue-loader
npm install -D vue-loader vue-template-compiler
index.js 中编写代码
import Vue from 'vue'
import App from './App.vue'
let vm = new Vue({
el: '#app',
render: h => h(App)
})