1.打包js文件
1. 创建对应的文件【对应的依赖关系】
2. 安装对应的包
npm install webpack@4.32.2 webpack-cli@3.3.2 webpack-dev-server@3.5.1 -D-S
3. 配置入口文件/出口文件
在根目录下创建webpack.config.js文件
const path = require('path');
module.exports = {
// 入口 - 打包的入口
entry: './src/index.js',
// 出口 - 打包输出的位置
output: {
// path-打包之后输出的位置
path: path.resolve(__dirname, 'dist'),
// filename-打包之后的文件的名称
filename: 'bundle.js'
}
};
4. 配置命令行
在package.json的scripts中配置
"scripts": {
"start": "webpack --config webpack.config.js --mode development"
}
5. 执行命令行
npm run start
6. 报错 (版本不适配问题)
在vscode下执行 $env:NODE_OPTIONS="--openssl-legacy-provider"
7. 在vscode终端中,执行 npm run start
3.打包css
1. 创建css文件
需要在index.js中引入css文件
import "./css/index.css"
2. 安装插件
cnpm install css-loader@3 --save-dev
cnpm install style-loader@2 --save-dev
3. 配置插件
在webpack.config.js
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader' ,
'css-loader'
]
}
]
}
保存代码
4. 直接打包就可以
npm run start
4.解析*.vue文件
1. 安装
npm i vue-loader@15.9.5 -D-S
npm i vue-template-compiler@2.6.12 -D-S
npm i vue@2.6.12 -S
2. 在根目录下创建文件夹public
/public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue打包</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
3.在src中创建App.vue
/src/App.vue
<template>
<div id="app">
app配置
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
4. 在src中创建main.js入口文件
/src/main.js
import Vue from 'vue'
import App from './App.vue'
new Vue({
render: h => h(App)
}).$mount('#app')
5.在src中创建components文件夹
components/Top.vue是一个普通组件
<template>
<div class="Top">Top普通组件</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
App.vue中引入Top这个普通组件
import MyFoot from './components/MyFoot.vue'
挂载Top普通组件
export default {
components:{
MyFoot
}
}
页面中使用(App.vue中)
<my-foot></my-foot>
6.webpack.config.js下的plugins插件中
1.template的路径修改为‘public下的index.html’(/public/index.html)
template: "./public/index.html",
2.修改entry入口文件为 /src/main.js
entry: "./src/main.js",
3.配置
先引入 const VueLoaderPlugin = require("vue-loader/lib/plugin");
在rules中配置
{
test: /\.vue$/,
use: ["vue-loader"],
},
在plugins中使用
new VueLoaderPlugin()