1、webpack.config.js
const path = require('path')
const webpack = require('webpack')
const HTMLPlugin = require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const isDev = process.env.NODE_ENV ==='develpment'
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$/,
use:[
'style-loader',
'css-loader',
]
},
{
test: /\.styl/,
use:[
'style-loader',
'css-loader',
'stylus-loader'
]
},
{
test:/\.(gif|jpg|jepg|png|svg)$/,
use:[{
loader: 'url-loader',
options: {
limit: 1024,
name: '[name]-web.[ext]'
}
}]
}]
},
plugins: [
new webpack.DefinePlugin({
'process.env':{
NODE_ENV: isDev ? '"develpment"' :'"production"'
}
}),
new HTMLPlugin(),
new VueLoaderPlugin(),
],
}
if(isDev){
config.devtool = '#cheap-module-eval-source-map' //精确定位错误代码位置
config.devServer = {
port: '8000',
host: '0.0.0.0',
overlay: {
error: true,
},
hot: true, //热加载
},
config.plugins.push(
new webpack.HotModuleReplacementPlugin(), //程序热加载
new webpack.NoEmitOnErrorsPlugin() //减少不必要错误提示
)
}
module.exports = config
2、package.json
{
"name": "vue-ssr",
"version": "1.0.0",
"description": "vue-ssr",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "cross-env NODE_ENV=production webpack --mode production --config webpack.config.js",
"dev": " cross-env NODE_ENV=development webpack-dev-server --mode development --config webpack.config.js"
},
"keywords": [
"vue-ssr"
],
"author": "tower-7",
"license": "ISC",
"dependencies": {
"cross-env": "^5.2.0",
"css-loader": "^1.0.0",
"file-loader": "^2.0.0",
"html-webpack-plugin": "^3.2.0",
"style-loader": "^0.23.1",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
"url-loader": "^1.1.2",
"vue": "^2.5.17",
"vue-loader": "^15.4.2",
"vue-template-compiler": "^2.5.17",
"webpack": "^4.21.0",
"webpack-dev-server": "^3.1.10"
},
"devDependencies": {
"webpack-cli": "^3.1.2"
}
}
网友评论