webpack打包.vue文件
在webpack中配置.vue组件页面的解析(vue-loader)
在webpack中配置.vue组件页面的解析
1、运行npm i vue -S将vue安装为运行依赖;
2、运cnpm i vue-loader vue-template-compiler -D将解析转换vue的包安装为开发依赖;
3、运行npm i style-loader css-loader -D将解析转换CSS的包安装为开发依赖,因为.vue文件中会写CSS样式;
4、new VueLoaderPlugin() 引入这个插件,必须的
ps:注意 引入const VueLoaderPlugin = require(‘vue-loader/lib/plugin’) ———在之前的版本中好像不需要这个插件,再看教程的时候还是跟着官方文档来 vue-loader
webpack.config.js
const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin');//自动生成html模板,以便在多个入口文件时,不用手动修改引入的js const webpack = require('webpack'); const VueLoaderPlugin = require('vue-loader/lib/plugin'); module.exports = { entry: { app: './src/app.js', index: './src/index.js', main: './src/main.js', }, devServer: {//使用观察者模式(启动一个服务器,当文件有变动时,页面立即改变) contentBase: path.join(__dirname, "dist"),//将dist目录设置为可访问文件 compress: true,//一切服务都启用gzip 压缩 port: 9000,//指定服务器监听的端口 8080:为默认端口 hot: true,//告诉服务器,正在使用模块热替换 }, devtool: 'inline-source-map',//若有报错,报错信息会具体到某一个js文件的某一行 plugins: [//配置html-webpack-plugin new HtmlWebpackPlugin({ title: '这个是html模板', template: 'index.html',//配置html模板 inject:true, //是否自动在模板文件添加 自动生成的js文件链接 minify:{ removeComments:true //是否压缩时 去除注释 } }), new webpack.NamedModulesPlugin(),//模块热替换相关 new webpack.HotModuleReplacementPlugin(),//模块热替换相关 new VueLoaderPlugin(),// 请确保引入这个插件来施展魔法 ], output: { filename: '[name].bundle.js',//打包后文件的名字 path: path.resolve(__dirname, 'dist'),//打包后文件的输出目录 }, module: { rules: [ {//引入vue-loader识别.vue文件 test: /\.vue$/, use:[ 'vue-loader' ] }, {//打包css文件(可以用import在js中引入css文件) test: /\.css$/, use: [ 'style-loader', 'css-loader' ] }, {//加载图片(js或css中引入图片时) test: /\.(png|svg|jpg|gif)$/, use: [ { loader: 'file-loader', options:{ name: '[path][name].[ext]',//配置自定义文件模板 outputPath: '.',//配置打包后的输出目录(.代表在dist目录中生成) } } ] }, {//加载字体 test: /\.(woff|woff2|eot|ttf|otf)$/, use: [ { loader:'file-loader', options:{ name: '[path][name].[ext]',//配置自定义文件模板 outputPath: '.',//配置打包后的输出目录(.代表在dist目录中生成) } } ] }, {//加载数据之csv与tsv test: /\.(csv|tsv)$/, use: [ 'csv-loader' ] }, {//加载数据之xml json不用配置就可以直接加载 test: /\.xml$/, use: [ 'xml-loader' ] } ] } };
package.json
{ "name": "vueOrigin", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "webpack-dev-server --open", "build": "webpack", "dev": "webpack" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "css-loader": "^2.1.1", "csv-loader": "^3.0.2", "file-loader": "^3.0.1", "html-webpack-plugin": "^3.2.0", "style-loader": "^0.23.1", "vue-loader": "^15.7.0", "vue-template-compiler": "^2.6.10", "webpack": "^4.30.0", "webpack-cli": "^3.3.1", "webpack-dev-server": "^3.3.1", "xml-loader": "^1.2.1" }, "dependencies": { "vue": "^2.6.10", "vue-router": "^3.0.6" } }
main.js入口文件
import Vue from 'vue';//导入vue.js import App2 from '../app2.vue';//引入App2组件 import router from "../router/app2Router.js"; new Vue({ el:"#app2", router: router, template:"<App2/>", components: { App2 }, render: h => h(App2),//将App2组件渲染在#app2元素上(.vue文件必须通过reader函数转化为函数形式渲染) data:{}, created(){}, mounted(){}, })
index.html
<div ></div>
引入vue-router
npm i vue-router -S
在根文件下建立一个 router/app2Router.js文件
import Vue from 'vue'; import Router from 'vue-router'; Vue.use(Router); export default new Router({ routes:[ {//app2实例首页 path: '/', name: 'App2', component: () => import ('../app2.vue') }, ] })
然后将这个router.js文件配置到vue实例里面,见上面的main.js