'use strict';
const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
//指定入口
entry: {
main: './main.js'
},
output: {
path: path.join(__dirname, 'dist'),
filename: 'build.js'
},
module: {
loaders: [{
test: /\.css$/,
loader: 'style-loader!css-loader!autoprefixer-loader'
}, {
test: /\.less$/,
loader: 'style-loader!css-loader!autoprefixer-loader!less-loader'
}, {
test: /\.(jpg|ttf|svg|png)$/,
loader: 'url-loader?limit=4096'
}, {
test: /\.js$/,
loader: 'babel-loader',
//排除路径
exclude: /node_modules/,
options: {
presets: ['es2015'],
plugins: ['transform-runtime']
}
},
//处理.vue文件
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
plugins: [
new htmlWebpackPlugin({
template: './index.html',
})
],
//让单文件的方式也能有template做组件的编译,包会增大30%
//如果是.runtime的文件就小30%
//在main.js中 import Vue from 'vue';
resolve: { //文件路径加载解决方案
alias: { //别名
//'vue$' 会忽略 import xxx from 'vue/dist/vue.runtime.js'
'vue$': 'vue/dist/vue.esm.js'
//当import xx from '1213432vue' -> vue/dist/vue.common.js
}
},
devServer: { //配置webpack-dev-server -> express服务器的选项
host: '127.0.0.1', //A
port: 9999,
//代理
proxy: { //this.$ajax.get('/v2/xxxx')
'/v2/*': { // 如果当前请求的url 是以/v2开头/xxxxxx,则默认请求127.0.1/v2/xxx
changeOrigin: true, //changeOrigin就把当前本地express服务器由A变为向B请求并返回
target: 'https://api.douban.com/', //B
}
}
}
}
const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
//指定入口
entry: {
main: './main.js'
},
output: {
path: path.join(__dirname, 'dist'),
filename: 'build.js'
},
module: {
loaders: [{
test: /\.css$/,
loader: 'style-loader!css-loader!autoprefixer-loader'
}, {
test: /\.less$/,
loader: 'style-loader!css-loader!autoprefixer-loader!less-loader'
}, {
test: /\.(jpg|ttf|svg|png)$/,
loader: 'url-loader?limit=4096'
}, {
test: /\.js$/,
loader: 'babel-loader',
//排除路径
exclude: /node_modules/,
options: {
presets: ['es2015'],
plugins: ['transform-runtime']
}
},
//处理.vue文件
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
plugins: [
new htmlWebpackPlugin({
template: './index.html',
})
],
//让单文件的方式也能有template做组件的编译,包会增大30%
//如果是.runtime的文件就小30%
//在main.js中 import Vue from 'vue';
resolve: { //文件路径加载解决方案
alias: { //别名
//'vue$' 会忽略 import xxx from 'vue/dist/vue.runtime.js'
'vue$': 'vue/dist/vue.esm.js'
//当import xx from '1213432vue' -> vue/dist/vue.common.js
}
},
devServer: { //配置webpack-dev-server -> express服务器的选项
host: '127.0.0.1', //A
port: 9999,
//代理
proxy: { //this.$ajax.get('/v2/xxxx')
'/v2/*': { // 如果当前请求的url 是以/v2开头/xxxxxx,则默认请求127.0.1/v2/xxx
changeOrigin: true, //changeOrigin就把当前本地express服务器由A变为向B请求并返回
target: 'https://api.douban.com/', //B
}
}
}
}
该博客详细介绍了Webpack配置文件`webpack.config.js`的主要设置,包括入口(entry)、输出(output)、模块(module)加载器、插件(plugins)、解决路径(resolve)以及开发服务器(devServer)的配置。特别提到了处理CSS、LESS、图片资源、JavaScript以及Vue文件的加载器,还讲解了如何使用htmlWebpackPlugin生成HTML模板,并通过devServer进行代理设置。

2019

被折叠的 条评论
为什么被折叠?



