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 = configindex.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"
}
}
开发环境下打什么包,不需要呀