webpack+vue 配置学习1

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/xiaoleizhanghahaha/article/details/89066925

关键部分package.json

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1",

"prd": "cross-env NODE_ENV=production webpack --config webpack.config.js ",

"dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js"

},

webpack.config.js

--------------------------------------------------------------------------------------------

const path = require('path')

const HtmlWebpackPlugin = 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$/,

use: [

'style-loader',

'css-loader'

]

},

//当图片大小小于1024的时候图片就会转化成base64代码

{

test: /\.(gif|jpg|png|svg)$/,

use: [{

loader: 'url-loader',

options: {

limit: 1024,

// ext 文件的扩展名aa名字

name: '[name]-aa.[ext]'

}

}, ]

}

]

},

plugins: [

new webpack.DefinePlugin({

'process.env': {

NODE_ENV: isDev ? '"development"' : '"production"'

}

}),

new HtmlWebpackPlugin()

]

}

if (isDev) {

config.devtool = '#cheap-module-eval-source-map' //代码映射到浏览器中效率高,准确性高

config.devServer = {

contentBase: path.join(__dirname, './dist'),

        open: true, // 是否打开页面

port: 8383,

host: '1.8.0.1',

//  proxy: { //一会启动 8880 的server 可以使用8880也可以系统9000访问;如果不是代理的话就会涉及跨域

//              '/api/*': {                 target: 'http://localhost1:8880',        }       },

overlay: {

errors: true,

},

hot: true //修改代码及时显示

}

config.plugins.push( //增加的插件

new webpack.HotModuleReplacementPlugin(),

new webpack.NoEmitOnErrorsPlugin()

)

} else {

config.devtool = '#cheap-module-eval-source-map' //代码映射到浏览器中效率高,准确性高

config.devServer = {

contentBase: path.join(__dirname, './dist'),

        open: true,

port: 8080,

host: '19.68.30.1',

//  proxy: { //一会启动 8880 的server 可以使用8880也可以系统9000访问;如果不是代理的话就会涉及跨域

//              '/api/*': {                 target: 'http://localhost2:8880',      }         },

overlay: {

errors: true,

},

},

config.plugins.push( //增加的插件

new webpack.HotModuleReplacementPlugin(),

new webpack.NoEmitOnErrorsPlugin()

)

}

module.exports = config

猜你喜欢

转载自blog.csdn.net/xiaoleizhanghahaha/article/details/89066925
今日推荐