webpack配置

单页面配置

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//压缩 去掉引号
   }
 })
]
}