webpack构建项目
一. 初始化项目
-
npm init -y初始化项目信息 -
npm install --save-dev webpack安装webpack 和 webpack-cli - 构建项目目录
├── dist │ └── index.html ├── node_modules ├── package.json └── src └── index.js └── webpack.config.js
PS: 一般定义src文件夹下面的main.js 或者 index.js为webpack的入口文件。Webpack会根据配置对不同类型的资源文件进行不同方式的处理。
- 创建webpack配置文件
webpack.config.js
// webpack.config.js
const path = require('path');
module.exports = {
mode: 'development',
// 定义入口文件
entry: './src/index.js',
// 定义出口文件
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
PS:
___dirname是nodejs环境的一个变量指的是当前文件相对系统所处的路径
- 运行项目中的webpack
或者直接在终端运行:./node_modules/webpack/bin/webpack.jswebpackPS: 如果webpack是在全局安装的也可以直接运行, 但一般项目都有自己的webpack版本
- 使用webpack命令进行打包, 则需要安装 webpack-cli, 并确保全局安装了 webpack-cli
npm install webpack-cli -g
二. webpack开发项目
2.1 dev-serve
为了能更加高效的进行, 需要对webpack安装热更新插件, 步骤如下:
-
npm install --save-dev webpack-dev-server(注: 仅是开发时依赖) - 在
webpack.config.js中配置
module.exports = {
devServer: {
contentBase: './dist'
},
}
注: 静态挂载地址字段有可能不是
contentBase, 有时也叫static,需要注意观察dev-Serve的版本
- 设置启动脚本, 在
package.json中:
{
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server"
}
}
执行 npm run dev 后 会根据这个脚本指令，去配置项寻找暴露的配置文件执行！
- 启动
npm run dev - 设置路径别名, 方便项目组件引用
在webpack.config.js中module.exports = { resolve: { extensions: ['.js', '.vue', '.json'], alias: { '@': path.resolve('src'), }, }, }
三. webpack开发Vue项目
3.1 安装依赖
- 安装Vue:
npm i vue vue-router --save - 安装
vue-loader处理 Vue文件:npm i vue-loader --save-dev - 安装 vue template 编译器:
npm i vue-template-compiler --save-dev
3.2 处理Vue的配置
在webpack.config.js文件中配置vue文件的加载器
module.exports = {
module: {
rules: [
// 配置vue-loader, vue
{
test: /\.vue$/,
use: 'vue-loader',
},
]
}
}
同时需要配置vue加载器的插件, 在webpack.config.js中
const { VueLoaderPlugin } = require('vue-loader');
module.exports = {
plugins: [
new VueLoaderPlugin(),
]
}
3.3 挂载Vue
在创建src根目录下创建Vue根组件 App.vue
// App.vue
<template>
<div class="page">
你好呀! {{msg}}
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
msg: "wang"
}
}
}
</script>
在入口文件中 main.js 中挂载根组件
import Vue from 'vue';
import App from './App.vue';
const vm = new Vue({
render: (h) => h(App),
}).$mount("#App");
3.4 挂载Vue-Router
- 在
src/router/index.js中写入vue-router的配置import Vue from 'vue' import Router from 'vue-router' // 视图组件1 import Home from '../pages/home/index.vue' // 视图组件2 import Mine from '../pages/mine/index.vue' // Vue注入Router, 使得Vue中可以使用 this.$router/$route Vue.use(Router) export default new Router({ mode: 'history', routes: [ { path: '/', name: 'home', component: Home, }, { path: '/home', name: 'home', component: Home, }, { path: '/mine', name: 'mine', component: Mine, }, ], }) - 在实例化vue中放入vue-router参数
import router from '@/router/index' const vm = new Vue({ render: (h) => h(App), router, }).$mount('#App')
四. 设置项目运行环境
- 安装设置环境插件:
npm i cross-env --save-dev - 将
webpakc.config.js的环境值设置为动态的module.exports = { mode: process.env.NODE_ENV, } - 修改运行脚本:
package.json{ "scripts": { "dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js", "build": "cross-env NODE_ENV=production webpack --config webpack.config.js" } }
此处的
--config可以选择运行时使用的webpack配置文件, 也就是说可以使用两套webpack配置文件webpack.config.dev.js/webpack.config.build.js
