const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// 入口文件配置
// 值为：对象/字符串
// entry: './src/main.js',
entry: {
//key： 为输出时的文件名字
// value： 为文件路径
main: './src/main.js'
},
// 输出文件配置
output: {
path: __dirname+'/dist',
//[hash:20] 随机的数。保证名字不同，防止服务器的缓存
// filename: '[name].[hash:20].js'
filename: '[name].js'
},
//动态的加载script标签
//处理模板
cnpm install html-webpack-plugin -D
plugins: [
new HtmlWebpackPlugin({
//作用的文件
template: './index.html',
//输出的文件
filename: 'index.html'
})
],
module: {
//配置文件编译的规则
rules: [
//编译es6语法
使用babel-loader
cnpm install babel-loader babel-core -D
只能解析基本的语法，方法，函数不能实现
{
test: /\.js$/,//需要编译的文件路径的匹配规则
exclude: /node_modules/, //除去的文件路径
loader: 'babel-loader',
//babel-loader的配置
/*
options: {
//预设
es6的函数和方法不能编译：
（所用的es6在编译时，会提供方法转换， 适用于开发项目，框架）
cnpm install babel-plugin-transform-runtime -D
cnpm install babel-runtime -S
代码中用到了什么方法就会插入es5的方法
presets: [
// 'env'
//如果预设的单独一项配置，配置为数组
// 第一个值为预设名字
// 第二个值为这个预设的配置
['env', {
target: {
browsers: ['>1%', 'last 2 versions']
}
}]
//react用下面这个，别的用上面的
['env', "react"]
],
plugins: [
"transform-runtime"
]
}
*/
},
解析vue成js
安装vue
cnpm install vue vue-router vuex -S
cnpm install vue-loader -D(安装完之后注检查依赖模块是否安装)
{
test: /\.vue$/,
loader: 'vue-loader'
},
//编译css
cnpm install css-loader style-loader -D
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
//编译其他文件(png gif jpeg jpg ttf )
url-loader
cnpm install url-loader -D
{
test: /\.(png|jpeg|jpg|ttf|gif)/,
loader: 'url-loader'
}
]
}
}