单页面配置
webpack的配置性文件
1. 入口
2. 出口
3. 环境
4. loader
5. 插件。。
当我们输入webpack命令时,那么会自动寻找webpack.config.js文件
webpack文件就是Node.js文件
Node.js文件使用的就是 Common.js规范
const path = require( 'path' )
// 单页面
module.exports = {
// entry: 相对路径( 网络路径)
entry: './src/index.js', //入口文件定义
/* output: {
path: 磁盘路径(将来打包出去之后的文件的路径)
filename: 将入口文件打包到出口文件中时的名称
} */ // 出口文件
output:{
path: path.resolve( __dirname,'dist' ),
filename: 'app.js'
},
mode: 'development', //配置环境
module: { //配置转换器的
rules: [
// {} //每一个对象就是一个转换器
{
test: /\.css$/,
use: ['style-loader','css-loader'] //数组中的内容是有先后顺序的,最前面的最后执行
}
]
}
}
多页面配置
有入口多个
const path = require('path')
module.exports = {
entry: { // 配置多个入口文件
app1: './src/index.js',
app2: './src/main.js'
},
output: {
path: path.resolve( __dirname,'dist' ),
filename: '[name]'.js
},
mode: 'development',
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader','css-loader']
}
]
}
}
开发环境下的配置
服务器启动范围是整个项目根目录
const path = require( 'path' )
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 单页面
module.exports = {
// entry: 相对路径( 网络路径)
entry: './src/index.js', //入口文件定义
/* output: {
path: 磁盘路径(将来打包出去之后的文件的路径)
filename: 将入口文件打包到出口文件中时的名称
} */ // 出口文件
output:{
path: path.resolve( __dirname,'dist' ),
filename: 'app.js'
},
mode: 'development', //配置环境
module: { //配置转换器的
rules: [
// {} //每一个对象就是一个转换器
{
test: /\.css$/,
use: ['style-loader','css-loader'] //数组中的内容是有先后顺序的,最前面的最后执行
},
{
test:/\.js$/,
exclude:/node_modules/, //排除
use:[{
loader:'babel-loader',
options:{
presets:['@babel/preset-env']
}
}]
}
]
},
devServer: {
port: 9000,
open: true
},
resolve: {
extensions: ['.js','.vue','.css']
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html', //根目录下的index.html
filename: './index.html',//默认到output目录
hash:true,//防止缓存,会给文件后面加入hash
minify:{
removeAttributeQuotes:true//压缩 去掉引号
}
})
]
}