现代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-loader
css-loader{ test: /\.css$/, use: [ 'style-loader', 'css-loader' ] }
-
2、图片解析
npm install --save-dev url-loader
依赖file-loadernpm install --save-dev url-loader
url-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文件中直接使用就可以