现代JavasScript应用程序的模块打包器(module bunder)
webpack的两大特点：1、模块化 2、打包
手动创建WebPack项目
一、创建项目目录
1、/src
2、创建webpack.config.js配置入口（出口）文件
二、创建项目
初始化：npm init -y 自动保存到package.json项目描述文件
三、安装webpack依赖包
npm i webpack -g 保存webpack到全局npm
npm i webpack-cli -g 保存webpack-cli到全局
四、入口--出口配置
const path = require('path'); //nodejs内置模块
module.exports = {
/**
* 入口
*/
entry: './src/main.js',
/**
* 出口
*/
output: {
path: path.resolve(__dirname, 'dist'), // d://webpakc/dist
filename: 'bundle.js' // d://webpakc/dist/bundle.js
},
}
五、打包执行
1、
webpack --mode development生成/dist/bundle.js文件-
2、webpack.json 文件配置
"bulid":".\\node_modules\\.bin\\webpack --mode development"打包：
npm run bulid
运行html
一、babel-loader
-
1、安装
webpack 3.x | babel-loader 8.x | babel 7.x
npm install [email protected] @babel/core @babel/preset-env webpack -
2、webpack.config.js 文件配置（规则）
module: { rules: [ { test: /\.js$/, exclude: /(node_modules|bower_components)/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } } } ] }
二、HtmlWebpackPlugin安装（简化了HTML文件的创建，为webpack包提供服务）
-
1、安装
npm install --save-dev html-webpack-plugin -
2、配置
plugins: [new HtmlWebpackPlugin({ filename: 'index.html', template: __dirname + "/public/index.html" })] 修改后每次打包才能运行
三、loader安装（模块的源代码进行转换）
-
1、css解析
npm install style-loader --save-dev依赖style-loadernpm install --save-dev css-loadercss-loader{ test: /\.css$/, use: [ 'style-loader', 'css-loader' ] } -
2、图片解析
npm install --save-dev url-loader依赖file-loadernpm install --save-dev url-loaderurl-loader{ test: /\.(png|jpg|gif)$/, use: [ { loader: 'url-loader', options: { //图片大小小于8192b时，图片解析为base64编码嵌入到js中，减少请求次数 limit: 8192 } } ] }添加img节点后，img不能直接设置src属性
四、本地服务-->开发中 Server(devServer)
浏览器解析为location：8080
安装
npm install webpack-dev-server --save-dev-
配置
devServer: { contentBase: path.join(__dirname, "dist"), compress: true, port: 9000, historyApiFallback: true, //不跳转 inline: true //实时刷新 }, -
package.json 设置
"serve":".\\node_modules\\.bin\\webpack-dev-server"运行：
npm run serve执行缓存，实际运行还是需要打包（
npm run bulid）
五、Vue使用
将
vue-loader和vue-template-compiler一起安装
(Vue官方文档)[https://vue-loader.vuejs.org/zh/guide/#%E6%89%8B%E5%8A%A8%E8%AE%BE%E7%BD%AE]
-
安装
npm install -D vue-loader vue-template-compiler -
配置->webpack.config.js
引入：
const VueLoaderPlugin = require('vue-loader/lib/plugin')配置：
module: { rules: [ // ... 其它规则 { test: /\.vue$/, loader: 'vue-loader' } ] }, plugins: [ // 请确保引入这个插件！ new VueLoaderPlugin() ] -
使用
1、新建App.vue文件
2、main.js引入vue和App.vue并实例化
import Vue from 'vue' import App from './App.vue' new Vue({ el: '#app', render: createElements => createElements(App) })
六、router使用
安装
npm i vue-router -S-
引用
新建/router/index.js文件
import Vue from 'vue' //集成vue
import Router from 'vue-router'//引用vue-router
//vue使用Router插件
Vue.use(Router);
// 创建路由数组
const routes = [
{
path: '/',
redirect: '/login'
},
{
path: '/login',
name: 'login',
component: () => import('../views/Login.vue'),
},
{
path: '/main',
name: 'main',
component: () => import('../views/Main.vue'),
}
]
// Router对象中使用配置
const router = new Router({
mode: 'history',
base: process.env.BASE_URL,
routes, //一定是routes（routes是Router里面的属性）
})
// 暴露router
export default router;
-
main.js 中引用
import router from './router/index.js'new Vue({ el: '#app', router, render: createElements => createElements(App), })
七、element-ui使用
-
安装
npm i element-ui -S -
main.js 文件引入
// 全局引入 import Element from 'element-ui' //样式一定要引入 import 'element-ui/lib/theme-chalk/index.css'; Vue.use(Element); -
配置字体图标
{ test: /\.(ttf|eot|woff|woff2|svg)/, use: ['file-loader'] },如果不配置会出现
element-ui 字体文件fonts/element-icons.ttf | fonts/element-icons.woff 加载报404 html文件中直接使用就可以