webpack.config.js:
const path = require('path'); // const { VueLoaderPlugin } = require("vue-loader"); const VueLoaderPlugin = require('vue-loader/lib/plugin'); const HTMLPlugin = require('html-webpack-plugin'); const webpack = require('webpack'); const isDev = process.env.NODE_ENV === 'development' const config = { target:'web', entry: path.join(__dirname,'src/index.js'), output:{ filename: 'bundle.js', path: path.join(__dirname,'dist'), }, module:{ rules:[ { test: /\.vue$/, loader:'vue-loader' }, { test: /\.css$/, // loader:'style-loader!css-loader!postcss-loader', // loaders:[] use: [ 'style-loader', 'css-loader' ] }, { test: /\.styl/, use: [ 'style-loader', 'css-loader', 'stylus-loader' ] }, { test: /\.(gif|jpg|jpeg|png|svg)$/, // loader:'style-loader!css-loader!postcss-loader', // loaders:[] use: [ { loader:'url-loader', options:{ limit:1024, name:'[name]-aaa.[ext]' } } ] }, ], }, plugins:[ new webpack.DefinePlugin({ 'process.env':{ NODE_ENV: isDev ? '"development"': '"production"' } }), new VueLoaderPlugin(), new HTMLPlugin() ], // mode: 'development' //设置mode } if(isDev){ config.devtool = '#cheap-module-eval-source-map'//浏览器调试 config.devServer = { port:8000, host:'0.0.0.0',//别人的电脑也能访问到 overlay:{ errors: true, }, open: true, // historyFallback:{ // // },//没有设置地址的路由映射到指定的地址,如index.html hot: true } config.plugins.push( new webpack.HotModuleReplacementPlugin(), new webpack.NodeEnvironmentPlugin() )//热加载依赖 } module.exports = config
index.js:
/** * Created by 59864 on 2020/10/11. */ import Vue from 'vue' import App from './app.vue' import './assets/styles/test.css' import './assets/styles/test-stylus.styl' import './assets/images/1.png' const root = document.createElement('div') document.body.appendChild(root) new Vue({ render: (h) => (App) }).$mount(root)
app.vue:
<template> <div id="text">{{text}} <span>123</span> </div> </template> <script> export default{ data(){ return { text:'abc' } }, mounted(){ alert(1); console.log(123); }, } </script> <style> #text{ color: black; width: 100px; height: 200px; } </style>
package.json:
{ "name": "vue-webpack", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "cross-env NODE_ENV=production webpack --config webpack.config.js", "dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js" }, "author": "", "license": "ISC", "dependencies": { "cross-env": "^7.0.2", "file-loader": "^6.2.0", "html-webpack-plugin": "^4.5.0", "stylus": "^0.54.8", "stylus-loader": "^4.2.0", "url-loader": "^4.1.1", "vue": "^2.6.12", "vue-loader": "^15.9.5", "vue-template-compiler": "^2.6.12", "webpack": "^4.32.2" }, "devDependencies": { "css-loader": "^4.3.0", "style-loader": "^2.0.0", "webpack-cli": "^3.3.2", "webpack-dev-server": "^3.5.1" } }
开发环境下打什么包,不需要呀